v0.8.7 - Change line feature

v0.8.7

  * Added feature for line change, if you send text with the escape char \n, it will be rendered in different lines in the UI, and also escaped in the CSV download.
  E.g: let text = '"Gianluigi\nBuffon"'; Check the Example in GitHub.

Author: jciccio

README.md

@@ -169,8 +169,12 @@ Changes the background to white and the text to blue
 | warningColor | string   |N | Hex value for text (default: #ba8722)|
 
 # What's new
+v0.8.7
 
-v0.8.3
+  * Added feature for line change, if you send text with the escape char \n, it will be rendered in different lines in the UI, and also escaped in the CSV download. 
+  E.g: let text = '"Gianluigi\nBuffon"'; Check the Example in GitHub.
+
+v0.8.6
   * If there is a tie between an error and a warning, the error will have priority and show the error color
 
 v0.8.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-js-table-with-csv-dl",
-  "version": "0.8.4",
+  "version": "0.8.7",
   "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": {

react-table-example/src/App.js

@@ -18,8 +18,10 @@ class App extends Component {
       "array2":[],
       "Object":[{"id":1000,"values":"K-1"}]};
 
+    let text = '"Gianluigi\nBuffon"';
+
     let table = [ 
-      {number: 12, name:"Buffon",  success: true},
+      {number: 12, name:text,  success: true},
       {number: 21, name: "Pirlo", metadata: JSON.stringify(json), success: false},
       {number: 10, name: "Ruiz", position: "MDI"},
       {number: 7, name: "Nesta", position: "RB"},

src/index.js

@@ -299,14 +299,15 @@ class TableViewer extends Component {
     let isWarning = row.warning || false;
     let isSucccess = row.success;
     let fontColor = "#000000";
-    if (isSucccess === true){
-      fontColor = (this.props.successColor ) ? this.props.successColor : '#0b7012';
+    
+    if (isSucccess=== false){ // because can be undefined
+      fontColor = (this.props.errorColor ) ? this.props.errorColor : '#b30009';
     }
     else if(isWarning){
       fontColor = (this.props.warningColor ) ? this.props.warningColor : '#ba8722';
     }
-    else if (isSucccess=== false){ // because can be undefined
-      fontColor = (this.props.errorColor ) ? this.props.errorColor : '#b30009';
+    else if (isSucccess === true){
+      fontColor = (this.props.successColor ) ? this.props.successColor : '#0b7012';
     }
 
     return(
@@ -360,13 +361,21 @@ class TableViewer extends Component {
       let rowContent = headers.map((header, element) => {
         let content = row[header];
         let isJson = false;
+        console.log("Cont: "+ content);
         try {
           if (isNaN(content)){
             content = JSON.parse(content);
             isJson = true;
-          }
+          }         
         } catch (e) {
           content = row[header];
+          if(content){
+            content = content.split("\n").map((item, i) => {
+              return (<p key={`part-${i}`}>{item}</p>)
+            });  
+          }
+          
+          console.log("catch: "+ content);
           isJson = false;
         }
         if (isJson){