Merge pull request #24 from patorjk/customBodyRenderLite

Custom body render lite

README.md

@@ -227,7 +227,8 @@ const columns = [
 #### Column Options:
 |Name|Type|Default|Description
 |:--:|:-----|:--|:-----|
-|**`customBodyRender`**|function||Function that returns a string or React component. Used as display data within all table cells of a given column. `function(value, tableMeta, updateValue) => string`|` React Component` [Example](https://github.com/patorjk/mui-dt/blob/master/examples/component/index.js)
+|**`customBodyRender`**|function||Function that returns a string or React component. Used to display data within a table cell of a given column. `function(value, tableMeta, updateValue) => string`|` React Component` [Example](https://github.com/patorjk/mui-dt/blob/master/examples/component/index.js)
+|**`customBodyRenderLite`**|function||Function that returns a string or React component. Used to display data within a table cell of a given column. This function has better performance than customBodyRender at the cost of some functionality (different arguments and filtering is done with pre-processed data). If you have a client-side table with 1000+ rows, this is what you should use. `function(dataIndex, rowIndex) => string`|` React Component` [Example](https://github.com/patorjk/mui-dt/blob/master/examples/data-as-objects/index.js)
 |**`customHeadLabelRender`**|function||Function that returns a string or React component. Used to replace the display for the column header's label. `function(columnMeta, sortOrder, handleToggleColumn) => string`|` React Component`
 |**`customHeadRender`**|function||Function that returns a string or React component. Used as display for column header. In most cases you want customHeadLabelRender instead, as this method is for overriding the full header cell. `function(columnMeta, handleToggleColumn) => string`|` React Component`
 |**`display`**|string|'true'|Display column in table. `enum('true', 'false', 'excluded')`
@@ -238,7 +239,6 @@ const columns = [
 |**`filterOptions`**|{names, logic, display}||With filter options, it's possible to use custom names for the filter fields. [Example](https://github.com/patorjk/mui-dt/blob/master/examples/column-filters/index.js), custom filter logic [Example](https://github.com/patorjk/mui-dt/blob/master/examples/customize-filter/index.js), and custom rendering. [Example](https://github.com/patorjk/mui-dt/blob/master/examples/customize-filter/index.js)
 |**`customFilterListRender`**|function||Function that returns a string used as the chip label. `function(value) => string` [Example](https://github.com/patorjk/mui-dt/blob/master/examples/column-filters/index.js)
 |**`filterType `**|string|'dropdown'|Choice of filtering view. Takes priority over global filterType option.`enum('checkbox', 'dropdown', 'multiselect', 'textField', 'custom')` Use 'custom' if you are supplying your own rendering via `filterOptions`.
-|**`filterWithRenderData`**|string|true|The table will call all of your customBodyRender functions to get values for the filter dropdowns. If your raw data is fine for these dropdowns, set this option to false as a way to improve performance for the table.
 |**`hint`**|string||Display hint icon with string as tooltip on hover.
 |**`print`**|boolean|true|Display column when printing.
 |**`searchable`**|boolean|true|Exclude/include column from search results.

examples/data-as-objects/index.js

@@ -9,19 +9,18 @@ class Example extends React.Component {
     const columns = [
       {
         name: "name",
-        label: "Name",
+        label: "Name11",
         options: {
           filter: true,
           //display: 'excluded',
           setCellProps: () => ({style:{whiteSpace:'pre'}}),
           setCellHeaderProps: () => ({style:{whiteSpace:'pre'}}),
-          customBodyRender: (value, tableMeta, updateValue) => {
+          customBodyRenderLite: (dataIndex, rowIndex) => {
             //console.dir(value);
             //console.dir(tableMeta);
             //console.dir(updateValue);
-            return value;
+            return <div style={{fontWeight:'bold'}}>Hi {data[dataIndex].name}!</div>;
           },
-          filterWithRenderData: false,
         }
       },      
       {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-dt",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [

src/MUIDataTable.js

@@ -81,6 +81,7 @@ class MUIDataTable extends React.Component {
           name: PropTypes.string.isRequired,
           options: PropTypes.shape({
             customBodyRender: PropTypes.func,
+            customBodyRenderLite: PropTypes.func,
             customFilterListRender: PropTypes.func,
             customHeadRender: PropTypes.func,
             display: PropTypes.oneOf(['true', 'false', 'excluded']),
@@ -476,6 +477,7 @@ class MUIDataTable extends React.Component {
     }
 
     const data = status === TABLE_LOAD.INITIAL ? this.transformData(columns, props.data) : props.data;
+
     let searchText = status === TABLE_LOAD.INITIAL ? this.options.searchText : null;
 
     if (typeof this.options.searchText === 'undefined' && typeof this.state.searchText !== 'undefined') {
@@ -494,7 +496,7 @@ class MUIDataTable extends React.Component {
         }
 
         if (column.filter !== false) {
-          if (typeof column.customBodyRender === 'function' && column.filterWithRenderData !== false) {
+          if (typeof column.customBodyRender === 'function') {
             const rowData = tableData[rowIndex].data;
             tableMeta = this.getTableMeta(rowIndex, colIndex, rowData, column, data, this.state);
             const funcResult = column.customBodyRender(value, tableMeta);
@@ -655,7 +657,9 @@ class MUIDataTable extends React.Component {
       let columnValue = row[index];
       let column = columns[index];
 
-      if (column.customBodyRender) {
+      if (column.customBodyRenderLite) {
+        displayRow.push(column.customBodyRenderLite);
+      } else if (column.customBodyRender) {
         const tableMeta = this.getTableMeta(rowIndex, index, row, column, dataForTableMeta, {
           ...this.state,
           filterList: filterList,
@@ -670,18 +674,18 @@ class MUIDataTable extends React.Component {
         columnDisplay = funcResult;
 
         // drill down to get the value of a cell
-        if (column.filterWithRenderData !== false) {
-          columnValue =
-            typeof funcResult === 'string' || !funcResult
-              ? funcResult
-              : funcResult.props && funcResult.props.value
-              ? funcResult.props.value
-              : columnValue;
-          }
+        columnValue =
+          typeof funcResult === 'string' || !funcResult
+            ? funcResult
+            : funcResult.props && funcResult.props.value
+            ? funcResult.props.value
+            : columnValue;
+
+        displayRow.push(columnDisplay);
+      } else {
+        displayRow.push(columnDisplay);
       }
 
-      displayRow.push(columnDisplay);
-
       const columnVal = columnValue === null || columnValue === undefined ? '' : columnValue.toString();
 
       const filterVal = filterList[index];

src/components/TableBodyCell.js

@@ -112,7 +112,7 @@ function TableBodyCell(props) {
           className,
         )}
         {...otherProps}>
-        {children}
+        {typeof children === 'function' ? children(dataIndex, rowIndex) : children}
       </TableCell>
     </>
   );