* #8. add costum content via functions

GigaTables · Mar 23, 2017 · a21ae5b · a21ae5b
1 parent 84919c3
commit a21ae5b
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 5 deletions.
diff --git a/main.js b/main.js
@@ -96,13 +96,13 @@ var settings = {
      render: function (data, row, type) {
        return '<div><form method="post" class="accForm" action=""><input type="hidden" name="action" value="forms" /><input type="hidden" name="id" value="' + row.id + '" /><div>' + data + '</div></form></div>';
      },
-     target: 2
+     target: 'title' // provide data column index to match opts
    },
    {
      render: function (data, row, type) {
        return '<div><form method="post" class="accForm" action=""><input type="hidden" name="action" value="forms" /><input type="hidden" name="id" value="' + row.id + '" /><div>' + data + '</div></form></div>';
      },
-     target: 3
+     target: 'date'
    }
  ],
  tableOpts: {

diff --git a/src/Reactables.jsx b/src/Reactables.jsx
@@ -39,6 +39,7 @@ class Reactables extends Main {
     this.searchableCols = [];
     this.visibleCols = [];
     this.sortableCols = [];
+    this.customColumns = [];
     this.lastTimeKeyup = (new Date()).getTime(), this.nowMillis = 0;
     // these default sets will merge with users sets
     this.defaultSettings = {
@@ -63,13 +64,18 @@ class Reactables extends Main {
   build()
   {
     this.settings = loAssign({}, this.defaultSettings, this.props.settings);
-    const { columns } = this.settings;
+    const { columns, columnOpts } = this.settings;
     columns.map((object, index) => {
       this.setSearchableCols(object, index);
       this.setSortableCols(object, index);
       // visibility must be the last - it unsets search & sort if false
       this.setVisibleCols(object, index);
     });
+    if (typeof columnOpts !== CommonConstants.UNDEFINED) {
+      columnOpts.map((object, index) => {
+        this.setCustomColumns(object, index);
+      });
+    }
     fetch(this.settings.ajax).then((response) =>
     {// set ajax loader fo BD
       this.setLoader(columns.length);

diff --git a/src/components/CommonConstants.js b/src/components/CommonConstants.js
@@ -1,5 +1,6 @@
 module.exports = {
   UNDEFINED: 'undefined',
+  FUNCTION: 'function',
   // keys
   ESCAPE_KEY: 27,
   CTRL_KEY: 17,
@@ -18,5 +19,7 @@ module.exports = {
   MORE_PAGES: 5,
   DISPLAY_TOP: 'top',
   DISPLAY_BOTTOM: 'bottom',
-  SORT_PERIOD: 200
+  SORT_PERIOD: 200,
+  TARGET: 'target',
+  RENDER: 'render'
 }
diff --git a/src/components/Main.js b/src/components/Main.js
@@ -46,6 +46,11 @@ class Main extends React.Component {
     }
   }
 
+  setCustomColumns(object)
+  {
+    this.customColumns[object[CommonConstants.TARGET]] = object[CommonConstants.RENDER];
+  }
+
   doSearch(e)
   {
     var that = this;
@@ -131,14 +136,21 @@ class Main extends React.Component {
           const { data } = th.props;
           // check if a JSON object has this data field + visible
           if(typeof data !== CommonConstants.UNDEFINED && this.visibleCols[data] === true) {
+            let content = null;
+            if (typeof this.customColumns[data] !== CommonConstants.UNDEFINED
+              && typeof this.customColumns[data] === CommonConstants.FUNCTION) { // custom column
+              content = this.customColumns[data](object[data], object, data);
+            } else {
+              content = object[data];
+            }
             cols.push(<Column
               dataIndex={data}
               selectedRows={(typeof selectedRows !== CommonConstants.UNDEFINED) ? selectedRows : this.state.selectedRows}
               minRow={minRow}
               maxRow={maxRow}
               count={objectIndex}
               gteRowId={rowId}
-              key={idx}>{object[data]}</Column>);
+              key={idx}>{content}</Column>);
           }
         });
         // count is used to shft key + click selection of rows, ex.: sorted