mui-datatables v3.4.1

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.
@@ -268,7 +269,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`) <p><ul><li>`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)</li><li>`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)</li></ul></p>
 |**`customHeadRender`**|function||Function that returns a string or React component. Used as display for column header. `function(columnMeta, handleToggleColumn, sortOrder) => string`&#124;` React Component`
-|**`display`**|string|'true'|Display column in table. Possible values:<p><ul><li>true: Column is visible and toggleable via the View Columns popover in the Toolbar.</li><li>false: Column is not visible but can be made visible via the View Columns popover in the Toolbar.</li><li>excluded: Column is not visible and not toggleable via the View Columns popover in the Toolbar.</li></ul></p><p>See also: `viewColumns` and `filter` options.</p>
+|**`display`**|boolean or string|true|Display column in table. Possible values:<p><ul><li>true: Column is visible and toggleable via the View Columns popover in the Toolbar.</li><li>false: Column is not visible but can be made visible via the View Columns popover in the Toolbar.</li><li>excluded: Column is not visible and not toggleable via the View Columns popover in the Toolbar.</li></ul></p><p>See also: `viewColumns` and `filter` options.</p>
 |**`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).

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": [

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';
@@ -19,7 +20,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';
 
@@ -218,6 +219,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 +270,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 +359,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 && 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);
@@ -1004,6 +1010,7 @@ class MUIDataTable extends React.Component {
 
       if (
         searchText &&
+        column.display !== 'excluded' &&
         this.hasSearchText(columnVal, searchText, caseSensitive) &&
         column.display !== 'false' &&
         column.searchable
@@ -1369,7 +1376,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':
@@ -1956,7 +1963,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}
             />
           )}
           <DndProvider backend={HTML5Backend} {...dndProps}>
@@ -1987,7 +1994,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 +2013,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({

test/MUIDataTable.test.js

@@ -449,6 +449,11 @@ describe('<MUIDataTable />', function() {
     });
   });
 
+  it('should correctly set tableId', () => {
+    const fullWrapper = mount(<MUIDataTable columns={columns} data={[]} options={{ tableId: 'myTable123' }} />);
+    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(<MUIDataTable columns={columns} data={data} />);
     let state = shallowWrapper.dive().state();