V5 - JSON support

V5 - JSON support
Styling fixes
Bug fixes

Signed-off-by: Jose Antonio Ciccio <jciccio@gmail.com>

Author: jciccio

README.md

@@ -9,7 +9,7 @@ React JS Table and log viewer with CSV download functionality
 
 # Description
 
-React JS Table and log viewer with Search and CSV download functionality. You can display data table information passing JS objects and an array of dats you want to show and download the full data into a csv file. You can pick what fields of the object you want to display and download the full objects.
+React JS Table and log viewer with Search and CSV download functionality. You can display data table information passing JS objects and an array of dats you want to show and download the full data into a csv file. You can pick what fields of the object you want to display and download the full objects. Also you can pass a String with a JSON and will be rendered.
 
 
 # How it looks
@@ -119,6 +119,12 @@ Changes the background to white and the text to blue
 | caseInsensitive | boolean |N| do searches without casing| 
 
 # What's new
+v0.5.0
+* Table now speaks JSON, you can pass as param a JSON in string format and will be rendered.
+
+v0.4.12
+* Download button CSS fix
+
 v0.4.11
 * links style fixed
 * Search box fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-js-table-with-csv-dl",
-  "version": "0.4.11",
+  "version": "0.5.0",
   "description": "React JS tables and log viewer with stats if needed. Has the functionality to dowload table contents in CSV file with data stored in class prop.",
   "main": "build/index.js",
   "peerDependencies": {
@@ -11,7 +11,8 @@
     "webpack": "^2.6.1",
     "file-saver": "^1.3.8",
     "react-js-paginator": "^0.1.7",
-    "react-js-search": "^0.2.4"
+    "react-js-search": "^0.2.4",
+    "react-html-parser": "^2.0.2"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -40,7 +41,8 @@
     "babel-polyfill": "^6.26.0",
     "react-js-paginator": "^0.1.7",
     "file-saver": "^1.3.8",
-    "react-js-search": "^0.2.4"
+    "react-js-search": "^0.2.4",
+    "react-html-parser": "^2.0.2"
   },
   "repository": {
     "type": "git",

react-table-example/src/App.js

@@ -9,11 +9,20 @@ class App extends Component {
 
     let headers = ["number", "position", "name"];
 
-    let table = [ {number: 12, name:"Buffon", position: "ST", success: true},
-      {number: 21, name: "Pirlo", position: "MC", success: false},
+
+    let json = {
+      "Key1": {"id":10,"values":"1-2"},
+      "Key2":{},
+      "Key3":"(Zone 1)",
+      "description":"","array":[100],
+      "array2":[],
+      "Object":[{"id":1000,"values":"K-1"}]};
+
+    let table = [ {number: 12, name:"Buffon", position: JSON.stringify(json), success: true},
+      {number: 21, name: "Pirlo", position: JSON.stringify(json), success: false},
       {number: 10, name: "Ruiz", position: "MDI"},
       {number: 7, name: "Nesta", position: "RB", success: true},
-      {number: 4, name: "Cannavaro", position: "CB"},
+      {number: 4, name: "Cannavaro", position: JSON.stringify(json)},
       {number: 2, name: "Puyol", position: "CB", success: false},
       {number: 15, name: "Abate", position: "LB"},
       {number: 16, name: "Locatelli", position: "MDI"},

src/index.js

@@ -6,7 +6,7 @@ import Paginator from 'react-js-paginator';
 import SearchBar from 'react-js-search';
 import FileSaver from 'file-saver/FileSaver';
 import PropTypes from 'prop-types';
-
+import ReactHtmlParser from "react-html-parser";
 import "./logViewer.css";
 
 /**
@@ -28,7 +28,7 @@ class TableViewer extends Component {
     }
   }
 
-  highlightSyntax(json) {
+ highlightSyntax(json) {
     if (json) {
       json = json
         .replace(/&/g, "&")
@@ -38,17 +38,17 @@ class TableViewer extends Component {
       return json.replace(
         /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g,
         function(match) {
-          var cls = "number";
+          var cls = "hljs-number";
           if (/^"/.test(match)) {
             if (/:$/.test(match)) {
-              cls = "key";
+              cls = "hljs-key";
             } else {
-              cls = "string";
+              cls = "hljs-string";
             }
           } else if (/true|false/.test(match)) {
-            cls = "boolean";
+            cls = "hljs-boolean";
           } else if (/null/.test(match)) {
-            cls = "null";
+            cls = "hljs-null";
           }
           return '<span class="' + cls + '">' + match + "</span>";
         }
@@ -308,13 +308,43 @@ class TableViewer extends Component {
         rowData.push(this.renderLineNumber(number));
       }
       let rowContent = headers.map((header, element) => {
-        return (
-          <div 
-          key={`table_row_${i}_cell_${element}`} 
-          className="divTableCell">
-            {row[header]}
-          </div>
-        )
+
+        let content = row[header];
+        let isJson = false;
+        try {
+          if (isNaN(content)){
+            content = JSON.parse(content);
+            isJson = true;
+          }
+        } catch (e) {
+          content = row[header];
+          isJson = false;
+        }
+
+        if (isJson){
+          let jsonText =JSON.stringify(content,undefined,2);
+          let highlight = this.highlightSyntax(jsonText);
+          let parsedHtml = ReactHtmlParser(highlight, true);
+          return (
+            <div 
+              key={`table_row_${i}_cell_${element}`} 
+              className="divTableCell">
+              <pre>
+                {parsedHtml}
+              </pre>
+            </div>
+          )
+        }
+        else{
+          return (
+            <div 
+              key={`table_row_${i}_cell_${element}`} 
+              className="divTableCell">
+              {content}
+            </div>
+          )
+        }
+        
       });
       return [...rowData, ...rowContent];
     }

src/logViewer.css

@@ -168,7 +168,6 @@
 .logViewer .csvFileDownloader{
   margin-bottom: 10px;
   float: left;
-  height: 10px;
 }
 
 
@@ -256,10 +255,21 @@
 }
 
 .logViewer .search-container {
-    float: right;
-    padding-right: 0px;
-    margin-right: -7px;
+  float: right;
+  padding-right: 0px;
+  margin-right: -7px;
 }
 
+.hljs-string { color: #0052cc; }
+.hljs-number { color: #009933; }
+.hljs-boolean { color: blue; }
+.hljs-null { color: magenta; }
+.hljs-key { color: #000; }
 
+.jsonviewer_json pre{
+  height: 746px;
+}
 
+pre {
+  text-align: left;
+}