From 9e31468b373765d3ed0f8e44e44945260d6b756c Mon Sep 17 00:00:00 2001 From: Patrick Gillespie Date: Tue, 16 Jun 2020 22:07:55 -0400 Subject: [PATCH 1/2] added customBodyRenderLite --- README.md | 5 +- examples/array-value-columns/index.js | 7 ++- examples/column-filters/index.js | 5 +- examples/csv-export/index.js | 5 +- examples/custom-action-columns/index.js | 9 ++- examples/large-data-set/index.js | 17 ++++-- src/MUIDataTable.js | 70 ++++++++++++---------- src/components/TableBodyCell.js | 2 +- test/MUIDataTable.test.js | 77 +++++++++++++++++++++++++ 9 files changed, 146 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index 97d3bbf6a..4f9812436 100644 --- a/README.md +++ b/README.md @@ -145,7 +145,7 @@ The component accepts the following props: |:--:|:-----|:-----| |**`title`**|array|Title used to caption table |**`columns`**|array|Columns used to describe table. Must be either an array of simple strings or objects describing a column -|**`data`**|array|Data used to describe table. Must be either an array containing objects of key/value pairs with values that are strings or numbers, or arrays of strings or numbers (Ex: data: [{"Name": "Joe", "Job Title": "Plumber", "Age": 30}, {"Name": "Jane", "Job Title": "Electrician", "Age": 45}] or data: [["Joe", "Plumber", 30], ["Jane", "Electrician", 45]]) **Use of arbitrary objects as data is not supported, and is deprecated. Consider using ids and mapping to external object data in custom renderers instead e.g. `const data = [{"Name": "Joe", "ObjectData": 123}] --> const dataToMapInCustomRender = { 123: { foo: 'bar', baz: 'qux', ... } }`** +|**`data`**|array|Data used to describe table. Must be either an array containing objects of key/value pairs with values that are strings or numbers, or arrays of strings or numbers (Ex: data: [{"Name": "Joe", "Job Title": "Plumber", "Age": 30}, {"Name": "Jane", "Job Title": "Electrician", "Age": 45}] or data: [["Joe", "Plumber", 30], ["Jane", "Electrician", 45]]). The **customBodyRender** and **customBodyRenderLite** options can be used to control the diaplay. |**`options`**|object|Options used to describe table |**`components`**|object|Custom components used to render the table @@ -256,7 +256,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/gregnb/mui-datatables/blob/master/examples/component/index.js) +|**`customBodyRender`**|function||Function that returns a string or React component. Used to display data within all table cells of a given column. The value returned from this function will be used for filtering in the filter dialog. If this isn't need, you may want to consider customBodyRenderLite instead. `function(value, tableMeta, updateValue) => string`|` React Component` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/component/index.js) +|**`customBodyRenderLite`**|function||Function that returns a string or React component. Used to display data within all table cells of a given column. This method performs better than customBodyRender but has the following caveats:

`function(dataIndex, rowIndex) => string`|` React Component` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/large-data-set/index.js) |**`customFilterListOptions`**|{render: function, update: function}|| (These options only affect the filter chips that display after filters are selected. To modify the filters themselves, see `filterOptions`) `render` returns a string or array of strings used as the chip label(s). `function(value) => string OR arrayOfStrings`, `update` returns a `filterList (see above)` allowing for custom filter updates when removing the filter chip [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/column-filters/index.js) |**`customHeadRender`**|function||Function that returns a string or React component. Used as display for column header. `function(columnMeta, handleToggleColumn, sortOrder) => string`|` React Component` |**`display`**|string|'true'|Display column in table. `enum('true', 'false', 'excluded')` diff --git a/examples/array-value-columns/index.js b/examples/array-value-columns/index.js index 4cd661a52..15e97fa92 100644 --- a/examples/array-value-columns/index.js +++ b/examples/array-value-columns/index.js @@ -48,13 +48,14 @@ class Example extends React.Component { options: { filter: true, filterType: 'multiselect', - customBodyRender: (value) => { + customBodyRenderLite: (dataIndex) => { + let value = data[dataIndex][5]; return value.map( (val, key) => { return ; }); - } + }, } - } + }, ]; diff --git a/examples/column-filters/index.js b/examples/column-filters/index.js index 427862fdc..2cd3e8221 100644 --- a/examples/column-filters/index.js +++ b/examples/column-filters/index.js @@ -36,9 +36,8 @@ class Example extends React.Component { { name: "Age", options: { - customBodyRender: (val, tableMeta) => { - console.log(val); - console.dir(tableMeta); + customBodyRenderLite: (dataIndex) => { + let val = data[dataIndex][3]; return val; }, filter: true, diff --git a/examples/csv-export/index.js b/examples/csv-export/index.js index 2dd1faf5a..b0db25014 100644 --- a/examples/csv-export/index.js +++ b/examples/csv-export/index.js @@ -21,7 +21,10 @@ class Example extends React.Component { { name: 'Age', options: { - customBodyRender: value =>
{value}
+ customBodyRenderLite: (dataIndex) => { + let value = data[dataIndex][3]; + return
{value}
; + } } }, { diff --git a/examples/custom-action-columns/index.js b/examples/custom-action-columns/index.js index f731905d0..0d0e234c2 100644 --- a/examples/custom-action-columns/index.js +++ b/examples/custom-action-columns/index.js @@ -50,7 +50,7 @@ class Example extends React.Component { filter: false, sort: false, empty: true, - customBodyRender: (value, tableMeta, updateValue) => { + customBodyRenderLite: (dataIndex) => { return ( ); @@ -116,7 +116,7 @@ class Example extends React.Component { filter: false, sort: false, empty: true, - customBodyRender: (value, tableMeta, updateValue) => { + customBodyRenderLite: (dataIndex) => { return (