From db985e718073405e3b50a528f68496ef9d2cdb4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Fermann?= Date: Sat, 15 Aug 2020 11:18:00 +0200 Subject: [PATCH 1/5] feat: add option to pass tableId as a prop --- src/MUIDataTable.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js index aa029e5a4..a00e8330c 100644 --- a/src/MUIDataTable.js +++ b/src/MUIDataTable.js @@ -218,6 +218,7 @@ class MUIDataTable extends React.Component { selectableRowsHideCheckboxes: PropTypes.bool, selectableRowsOnClick: PropTypes.bool, serverSide: PropTypes.bool, + tableId: PropTypes.string, tableBodyHeight: PropTypes.string, tableBodyMaxHeight: PropTypes.string, renderExpandableRow: PropTypes.func, @@ -268,7 +269,6 @@ class MUIDataTable extends React.Component { constructor(props) { super(props); - this.tableId = (Math.random() + '').replace(/\./, ''); this.tableRef = React.createRef(); this.tableContent = React.createRef(); this.draggableHeadCellRefs = {}; @@ -358,6 +358,11 @@ class MUIDataTable extends React.Component { props.options.selectToolbarPlacement = STP.NONE; } + // provide default tableId when draggableColumns is enabled and no tableId has been passed as prop + if (props.options.draggableColumns.enabled === true && !props.options.tableId) { + props.options.tableId = (Math.random() + '').replace(/\./, ''); + } + this.options = assignwith(options, props.options, (objValue, srcValue, key) => { // Merge any default options that are objects, as they will be overwritten otherwise if (key === 'textLabels' || key === 'downloadOptions') return merge(objValue, srcValue); @@ -1956,7 +1961,7 @@ class MUIDataTable extends React.Component { updateDividers={fn => (this.updateDividers = fn)} setResizeable={fn => (this.setHeadResizeable = fn)} options={this.props.options} - tableId={this.tableId} + tableId={this.options.tableId} /> )} @@ -1987,7 +1992,7 @@ class MUIDataTable extends React.Component { updateColumnOrder={this.updateColumnOrder} draggableHeadCellRefs={this.draggableHeadCellRefs} tableRef={this.getTableContentRef} - tableId={this.tableId} + tableId={this.options.tableId} timers={this.timers} components={this.props.components} /> @@ -2006,7 +2011,7 @@ class MUIDataTable extends React.Component { columnOrder={columnOrder} filterList={filterList} components={this.props.components} - tableId={this.tableId} + tableId={this.options.tableId} /> {this.options.customTableBodyFooterRender ? this.options.customTableBodyFooterRender({ From a25aa9bc256fb85014cb4c62bdcc318e635fb631 Mon Sep 17 00:00:00 2001 From: Jeff Jankowski Date: Tue, 18 Aug 2020 13:48:51 -0700 Subject: [PATCH 2/5] Using deep-object equality to find filterPos To correctly find filterPos of object-typed filters in customFilterListOptions.update, replacing reference equality indexOf() with predicate-based findIndex() and lodash.isEqual. --- src/MUIDataTable.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js index aa029e5a4..9eeec8bd7 100644 --- a/src/MUIDataTable.js +++ b/src/MUIDataTable.js @@ -5,6 +5,7 @@ import clsx from 'clsx'; import assignwith from 'lodash.assignwith'; import cloneDeep from 'lodash.clonedeep'; import find from 'lodash.find'; +import isEqual from 'lodash.isequal'; import isUndefined from 'lodash.isundefined'; import merge from 'lodash.merge'; import PropTypes from 'prop-types'; @@ -1369,7 +1370,7 @@ class MUIDataTable extends React.Component { }; updateFilterByType = (filterList, index, value, type, customUpdate) => { - const filterPos = filterList[index].indexOf(value); + const filterPos = filterList[index].findIndex(filter => isEqual(filter, value)); switch (type) { case 'checkbox': From 026b90db0167a62ca39950fee54f0110a2cb3951 Mon Sep 17 00:00:00 2001 From: Daniel F <45217974+w3bdesign@users.noreply.github.com> Date: Wed, 19 Aug 2020 03:25:43 +0200 Subject: [PATCH 3/5] Update display to accept either booleann or string Typescript definitions have been updated for the display property, and it accepts either a boolean (true or false) or a string ("excluded"). As a result the documentation should reflect this. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e9f4999ae..2376f23b3 100644 --- a/README.md +++ b/README.md @@ -268,7 +268,7 @@ const columns = [ |**`customHeadLabelRender`**|function||Function that returns a string or React component. Used for creating a custom header to a column. This method only affects the display in the table's header, other areas of the table (such as the View Columns popover), will use the column's label. `function(columnMeta : object) => string`|` React Component` |**`customFilterListOptions`**|object|| (These options only affect the filter chips that display after filters are selected. To modify the filters themselves, see `filterOptions`)

  • `render`: function that returns a string or array of strings used as the chip label(s). `function(value) => string OR arrayOfStrings` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-filter/index.js)
  • `update`: function that returns a `filterList (see above)` allowing for custom filter updates when removing the filter chip. filterType must be set to "custom". `function(filterList, filterPos, index) => filterList` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-filter/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. Possible values:

  • true: Column is visible and toggleable via the View Columns popover in the Toolbar.
  • false: Column is not visible but can be made visible via the View Columns popover in the Toolbar.
  • excluded: Column is not visible and not toggleable via the View Columns popover in the Toolbar.

See also: `viewColumns` and `filter` options.

+|**`display`**|boolean or string|true|Display column in table. Possible values:

  • true: Column is visible and toggleable via the View Columns popover in the Toolbar.
  • false: Column is not visible but can be made visible via the View Columns popover in the Toolbar.
  • excluded: Column is not visible and not toggleable via the View Columns popover in the Toolbar.

See also: `viewColumns` and `filter` options.

|**`download`**|boolean|true|Display column in CSV download file. |**`draggable`**|boolean|true|Determines if a column can be dragged. The draggableColumns.enabled option must also be true. |**`empty`**|boolean|false|This denotes whether the column has data or not (for use with intentionally empty columns). From 4deb3bd0b585d67024a56668fdddbf6cb5b60ce4 Mon Sep 17 00:00:00 2001 From: Dohyeong Woo Date: Thu, 20 Aug 2020 14:38:13 +0900 Subject: [PATCH 4/5] Fix search results for excluded options --- src/MUIDataTable.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js index aa029e5a4..284447bdf 100644 --- a/src/MUIDataTable.js +++ b/src/MUIDataTable.js @@ -19,7 +19,7 @@ import DefaultTableToolbar from './components/TableToolbar'; import DefaultTableToolbarSelect from './components/TableToolbarSelect'; import MuiTooltip from '@material-ui/core/Tooltip'; import getTextLabels from './textLabels'; -import { buildMap, getCollatorComparator, sortCompare, getPageValue, warnDeprecated, warnInfo } from './utils'; +import { buildMap, getCollatorComparator, getPageValue, sortCompare, warnDeprecated, warnInfo } from './utils'; import { DndProvider } from 'react-dnd'; import { HTML5Backend } from 'react-dnd-html5-backend'; @@ -1004,6 +1004,7 @@ class MUIDataTable extends React.Component { if ( searchText && + column.display !== 'excluded' && this.hasSearchText(columnVal, searchText, caseSensitive) && column.display !== 'false' && column.searchable From 938826df08da34633bd32b642bb15941055adc9f Mon Sep 17 00:00:00 2001 From: Patrick Gillespie Date: Thu, 20 Aug 2020 11:04:48 -0400 Subject: [PATCH 5/5] 3.4.1 updates --- README.md | 1 + package-lock.json | 91 ++++++++++++++++++++------------------- package.json | 2 +- src/MUIDataTable.js | 2 +- test/MUIDataTable.test.js | 5 +++ 5 files changed, 54 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index 2376f23b3..2021d4104 100644 --- a/README.md +++ b/README.md @@ -230,6 +230,7 @@ The component accepts the following props: |**`sort`**|boolean|true|Enable/disable sort on all columns. |**`sortFilterList`**|boolean|true|Enable/disable alphanumeric sorting of filter lists. |**`sortOrder`**|object|{}|Sets the column to sort by and its sort direction. To remove/reset sorting, input in an empty object. The object options are the column name and the direction: `name: string, direction: enum('asc', 'desc')` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/customize-columns/index.js) +|**`tableId`**|string|auto generated|A string that is used internally for identifying the table. It's auto-generated, however, if you need it set to a custom value (ex: server-side rendering), you can set it via this property. |**`tableBodyHeight`**|string|'auto'|CSS string for the height of the table (ex: '500px', '100%', 'auto'). |**`tableBodyMaxHeight`**|string||CSS string for the height of the table (ex: '500px', '100%', 'auto'). |**`textLabels`**|object||User provided labels to localize text. diff --git a/package-lock.json b/package-lock.json index b7a6ee711..3e8e9e57b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "mui-datatables", - "version": "3.4.0", + "version": "3.4.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -4080,8 +4080,7 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", - "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" + "resolved": "" } } }, @@ -4129,9 +4128,9 @@ } }, "bluebird": { - "version": "3.7.1", - "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.1.tgz", - "integrity": "sha512-DdmyoGCleJnkbp3nkbxTLJ18rjDsE4yCggEwKNXkeV123sPNfOCYeDoeuOY+F2FrSjO1YXcTU+dsy96KMy+gcg==", + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", + "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", "dev": true }, "bn.js": { @@ -4386,9 +4385,9 @@ "dev": true }, "cacache": { - "version": "12.0.3", - "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.3.tgz", - "integrity": "sha512-kqdmfXEGFepesTuROHMs3MpFLWrPkSSpRqOw80RCflZXy/khxaArvFrQ7uJxSUduzAufc6G0g1VUCOZXxWavPw==", + "version": "12.0.4", + "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz", + "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==", "dev": true, "requires": { "bluebird": "^3.5.5", @@ -4422,15 +4421,6 @@ "path-is-absolute": "^1.0.0" } }, - "lru-cache": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", - "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", - "dev": true, - "requires": { - "yallist": "^3.0.2" - } - }, "rimraf": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", @@ -4439,12 +4429,6 @@ "requires": { "glob": "^7.1.3" } - }, - "yallist": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", - "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", - "dev": true } } }, @@ -9798,6 +9782,15 @@ "js-tokens": "^3.0.0 || ^4.0.0" } }, + "lru-cache": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", + "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", + "dev": true, + "requires": { + "yallist": "^3.0.2" + } + }, "magic-string": { "version": "0.25.7", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz", @@ -13033,6 +13026,12 @@ "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==", "dev": true }, + "pify": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", + "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "dev": true + }, "pinkie": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", @@ -15300,6 +15299,15 @@ } } }, + "serialize-javascript": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", + "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==", + "dev": true, + "requires": { + "randombytes": "^2.1.0" + } + }, "serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz", @@ -15590,8 +15598,7 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", - "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" + "resolved": "" } } }, @@ -15989,9 +15996,9 @@ } }, "stream-shift": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz", - "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz", + "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==", "dev": true }, "strict-uri-encode": { @@ -16459,16 +16466,16 @@ } }, "terser-webpack-plugin": { - "version": "1.4.3", - "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz", - "integrity": "sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==", + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz", + "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==", "dev": true, "requires": { "cacache": "^12.0.2", "find-cache-dir": "^2.1.0", "is-wsl": "^1.1.0", "schema-utils": "^1.0.0", - "serialize-javascript": "^2.1.2", + "serialize-javascript": "^4.0.0", "source-map": "^0.6.1", "terser": "^4.1.2", "webpack-sources": "^1.4.0", @@ -16539,12 +16546,6 @@ "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", "dev": true }, - "pify": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", - "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", - "dev": true - }, "pkg-dir": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz", @@ -16565,12 +16566,6 @@ "ajv-keywords": "^3.1.0" } }, - "serialize-javascript": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz", - "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==", - "dev": true - }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -17972,6 +17967,12 @@ "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==" }, + "yallist": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", + "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==", + "dev": true + }, "yargs": { "version": "13.2.4", "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.2.4.tgz", diff --git a/package.json b/package.json index af48c4518..3e9685751 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mui-datatables", - "version": "3.4.0", + "version": "3.4.1", "description": "Datatables for React using Material-UI", "main": "dist/index.js", "files": [ diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js index 1ea64b4fb..ce3709a71 100644 --- a/src/MUIDataTable.js +++ b/src/MUIDataTable.js @@ -360,7 +360,7 @@ class MUIDataTable extends React.Component { } // provide default tableId when draggableColumns is enabled and no tableId has been passed as prop - if (props.options.draggableColumns.enabled === true && !props.options.tableId) { + if ((props.options.draggableColumns && props.options.draggableColumns.enabled === true) && !props.options.tableId) { props.options.tableId = (Math.random() + '').replace(/\./, ''); } diff --git a/test/MUIDataTable.test.js b/test/MUIDataTable.test.js index 2323e5251..2c110745d 100644 --- a/test/MUIDataTable.test.js +++ b/test/MUIDataTable.test.js @@ -449,6 +449,11 @@ describe('', function() { }); }); + it('should correctly set tableId', () => { + const fullWrapper = mount(); + assert.strictEqual(fullWrapper.find('[data-tableid="myTable123"]').length, 12); + }); + it('should correctly re-build internal table data and displayData structure with prop change', () => { const shallowWrapper = shallow(); let state = shallowWrapper.dive().state();