Merge pull request #1463 from gregnb/v3_4_0

mui-datatables v3.4.0
gregnb · Aug 8, 2020 · a382f3e · a382f3e
2 parents db5ec06 + 7650383
commit a382f3e
Show file tree

Hide file tree

Showing 14 changed files with 114 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -171,7 +171,7 @@ The component accepts the following props:
 |**`draggableColumns`**|object|{}|An object of options describing how dragging columns should work. The options are: <p><ul><li>`enabled:boolean`: Indicates if draggable columns are enabled. Defaults to false.</li><li>`transitionTime:number`: The time in milliseconds it takes for columns to swap positions. Defaults to 300.</li></ul></p>To disable the dragging of a particular column, see the "draggable" option in the columns options. Dragging a column to a new position updates the columnOrder array and triggers the onColumnOrderChange callback.
 |**`elevation`**|number|4|Shadow depth applied to Paper component. 
 |**`enableNestedDataAccess`**|string|""|If provided a non-empty string (ex: "."), it will use that value in the column's names to access nested data. For example, given a enableNestedDataAccess value of "." and a column name of "phone.cell", the column would use the value found in `phone:{cell:"555-5555"}`. Any amount of nesting will work. [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/data-as-objects/index.js) demonstrates the functionality. 
-|**`expandableRows`**|boolean|false|Enable/disable expandable rows.
+|**`expandableRows`**|boolean|false|Enable/disable expandable rows. [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/expandable-rows/index.js)
 |**`expandableRowsHeader`**|boolean|true|Show/hide the expand all/collapse all row header for expandable rows.
 |**`expandableRowsOnClick`**|boolean|false|Enable/disable expand trigger when row is clicked. When False, only expand icon will trigger this action.
 |**`filter`**|boolean|true|Show/hide filter icon from toolbar.
@@ -202,7 +202,7 @@ The component accepts the following props:
 |**`onTableChange`**|function||Callback function that triggers when table state has changed. `function(action: string, tableState: object) => void`
 |**`onTableInit`**|function||Callback function that triggers when table state has been initialized. `function(action: string, tableState: object) => void`
 |**`onViewColumnsChange`**|function||Callback function that triggers when a column view has been changed. Previously known as onColumnViewChange. `function(changedColumn: string, action: string) => void`
-|**`page`**|number||User provided starting page for pagination.
+|**`page`**|number||User provided page for pagination.
 |**`pagination`**|boolean|true|Enable/disable pagination.
 |**`print`**|boolean|true|Show/hide print  icon from toolbar.
 |**`renderExpandableRow`**|function||Render expandable row. `function(rowData, rowMeta) => React Component` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/expandable-rows/index.js)
@@ -413,7 +413,8 @@ class CustomDataTable extends React.Component {
 }
 ```
 Supported customizable components:
- * `Checkbox`
+ * `Checkbox` - A special 'data-description' props lets you differentiate checkboxes [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/custom-components/index.js). Valid values: ['row-select', 'row-select-header', 'table-filter', 'table-view-col'].The dataIndex is also passed via the "data-index" prop.
+ * `ExpandButton` [Example](https://github.com/gregnb/mui-datatables/blob/master/examples/expandable-rows/index.js)
  * `TableBody`
  * `TableViewCol` - The component that displays the view/hide list of columns on the toolbar.
  * `TableFilterList` - You can pass `ItemComponent` prop to render custom filter list item.

diff --git a/examples/custom-components/index.js b/examples/custom-components/index.js
@@ -7,6 +7,7 @@ import TableFilterList from '../../src/components/TableFilterList';
 import MuiTooltip from '@material-ui/core/Tooltip';
 import Fade from "@material-ui/core/Fade";
 import Checkbox from '@material-ui/core/Checkbox';
+import Radio from '@material-ui/core/Radio';
 import TableViewCol from './TableViewCol';
 
 const CustomChip = (props) => {
@@ -33,8 +34,13 @@ const CustomTooltip = (props) => {
 
 const CustomCheckbox = (props) => {
   let newProps = Object.assign({}, props);
-  newProps.color = "secondary";
-  return (<Checkbox {...newProps} />);
+  newProps.color = props['data-description'] === 'row-select' ? 'secondary' : 'primary';
+
+  if (props['data-description'] === 'row-select') {
+    return (<Radio {...newProps} />);
+  } else {
+    return (<Checkbox {...newProps} />);
+  }
 };
 
 const CustomFilterList = (props) => {
@@ -107,7 +113,9 @@ class Example extends React.Component {
     let options = {
       onFilterChipClose: (index, removedFilter, filterList) => {
         console.log(index, removedFilter, filterList);
-      }
+      },
+      selectableRows: 'single',
+      selectToolbarPlacement: 'none',
     };
 
     return (

diff --git a/examples/expandable-rows/index.js b/examples/expandable-rows/index.js
@@ -1,6 +1,6 @@
  import React from "react";
 import ReactDOM from "react-dom";
-import MUIDataTable from "../../src/";
+import MUIDataTable, {ExpandButton} from "../../src/";
 import TableRow from "@material-ui/core/TableRow";
 import TableCell from "@material-ui/core/TableCell";
 import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
@@ -85,6 +85,8 @@ class Example extends React.Component {
       expandableRowsHeader: false,
       expandableRowsOnClick: true,
       isRowExpandable: (dataIndex, expandedRows) => {
+        if (dataIndex === 3 || dataIndex === 4) return false;
+
         // Prevent expand/collapse of any row if there are 4 rows expanded already (but allow those already expanded to be collapsed)
         if (expandedRows.data.length > 4 && expandedRows.data.filter(d => d.dataIndex === dataIndex).length === 0) return false;
         return true;
@@ -114,9 +116,16 @@ class Example extends React.Component {
       },
     });
 
+    const components = {
+      ExpandButton: function(props) {
+        if (props.dataIndex === 3 || props.dataIndex === 4) return <div style={{width:'24px'}} />;
+        return <ExpandButton {...props} />;
+      }
+    };
+
     return (
       <MuiThemeProvider theme={theme}>
-        <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
+        <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} components={components} />
       </MuiThemeProvider>
     );
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-datatables",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [

diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
@@ -10,6 +10,7 @@ import merge from 'lodash.merge';
 import PropTypes from 'prop-types';
 import React from 'react';
 import DefaultTableBody from './components/TableBody';
+import DefaultTableFilter from './components/TableFilter';
 import DefaultTableFilterList from './components/TableFilterList';
 import DefaultTableFooter from './components/TableFooter';
 import DefaultTableHead from './components/TableHead';
@@ -254,6 +255,7 @@ class MUIDataTable extends React.Component {
     columns: [],
     components: {
       TableBody: DefaultTableBody,
+      TableFilter: DefaultTableFilter,
       TableFilterList: DefaultTableFilterList,
       TableFooter: DefaultTableFooter,
       TableHead: DefaultTableHead,
@@ -290,7 +292,7 @@ class MUIDataTable extends React.Component {
       filterList: [],
       page: 0,
       previousSelectedRow: null,
-      rowsPerPage: 0,
+      rowsPerPage: 10,
       searchProps: {},
       searchText: null,
       selectedRows: {
@@ -392,7 +394,7 @@ class MUIDataTable extends React.Component {
     resizableColumns: false,
     responsive: 'vertical',
     rowHover: true,
-    rowsPerPage: 10,
+    //rowsPerPage: 10,
     rowsPerPageOptions: [10, 15, 100],
     search: true,
     selectableRows: 'multiple',
@@ -427,7 +429,7 @@ class MUIDataTable extends React.Component {
       );
       this.options.selectableRows = this.options.selectableRows ? 'multiple' : 'none';
     }
-    if (!['standard', 'vertical', 'verticalAlways', 'simple'].includes(this.options.responsive)) {
+    if (['standard', 'vertical', 'verticalAlways', 'simple'].indexOf(this.options.responsive) === -1) {
       if (
         [
           'scrollMaxHeight',
@@ -436,7 +438,7 @@ class MUIDataTable extends React.Component {
           'stackedFullWidth',
           'scrollFullHeightFullWidth',
           'scroll',
-        ].includes(this.options.responsive)
+        ].indexOf(this.options.responsive) !== -1
       ) {
         this.warnDep(
           this.options.responsive +
@@ -496,10 +498,13 @@ class MUIDataTable extends React.Component {
       );
     }
 
-    if (Object.values(STP).indexOf(this.options.selectToolbarPlacement) === -1) {
-      this.warnDep(
-        'Invalid option value for selectToolbarPlacement. Please check the documentation: https://github.com/gregnb/mui-datatables#options',
-      );
+    // only give this warning message in newer browsers
+    if (Object.values) {
+      if (Object.values(STP).indexOf(this.options.selectToolbarPlacement) === -1) {
+        this.warnDep(
+          'Invalid option value for selectToolbarPlacement. Please check the documentation: https://github.com/gregnb/mui-datatables#options',
+        );
+      }
     }
   };
 
@@ -710,6 +715,16 @@ class MUIDataTable extends React.Component {
       searchText = this.state.searchText;
     }
 
+    let rowsPerPage = this.state.rowsPerPage;
+    if (typeof this.options.rowsPerPage === 'number') {
+      rowsPerPage = this.options.rowsPerPage;
+    }
+
+    let page = this.state.page;
+    if (typeof this.options.page === 'number') {
+      page = this.options.page;
+    }
+
     columns.forEach((column, colIndex) => {
       for (let rowIndex = 0; rowIndex < data.length; rowIndex++) {
         let value = status === TABLE_LOAD.INITIAL ? data[rowIndex][colIndex] : data[rowIndex].data[colIndex];
@@ -886,6 +901,8 @@ class MUIDataTable extends React.Component {
       count: this.options.count,
       data: tableData,
       sortOrder: sortOrder,
+      rowsPerPage,
+      page,
       displayData: this.getDisplayData(columns, tableData, filterList, searchText, tableMeta, props),
       columnOrder,
     };
@@ -1886,7 +1903,8 @@ class MUIDataTable extends React.Component {
             components={this.props.components}
           />
         )}
-        {(selectedRows.data.length === 0 || [STP.ABOVE, STP.NONE].includes(this.options.selectToolbarPlacement)) &&
+        {(selectedRows.data.length === 0 ||
+          [STP.ABOVE, STP.NONE].indexOf(this.options.selectToolbarPlacement) !== -1) &&
           showToolbar && (
             <TableToolbarComponent
               columns={columns}

diff --git a/src/components/ExpandButton.js b/src/components/ExpandButton.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '@material-ui/core/IconButton';
+import Remove from '@material-ui/icons/Remove';
+import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
+
+export default function ExpandButton(props) {
+  return (
+    <React.Fragment>
+      {props.isHeaderCell && !props.areAllRowsExpanded() && props.expandedRows && props.expandedRows.data.length > 0 ? (
+        <IconButton
+          onClick={props.onExpand}
+          style={{ padding: 0 }}
+          disabled={props.expandableRowsHeader === false}
+          className={props.buttonClass}>
+          <Remove id="expandable-button" className={props.iconIndeterminateClass} />
+        </IconButton>
+      ) : (
+        <IconButton
+          onClick={props.onExpand}
+          style={{ padding: 0 }}
+          disabled={props.expandableRowsHeader === false}
+          className={props.buttonClass}>
+          <KeyboardArrowRight id="expandable-button" className={props.iconClass} />
+        </IconButton>
+      )}
+    </React.Fragment>
+  );
+}
diff --git a/src/components/TableBody.js b/src/components/TableBody.js
@@ -288,6 +288,7 @@ class TableBody extends React.Component {
                     selectableRowsHideCheckboxes={options.selectableRowsHideCheckboxes}
                     isRowExpanded={this.isRowExpanded(dataIndex)}
                     isRowSelectable={isRowSelectable}
+                    dataIndex={dataIndex}
                     id={'MUIDataTableSelectCell-' + dataIndex}
                     components={components}
                   />

diff --git a/src/components/TableFilter.js b/src/components/TableFilter.js
@@ -183,6 +183,7 @@ class TableFilter extends React.Component {
                   }}
                   control={
                     <CheckboxComponent
+                      data-description="table-filter"
                       color="primary"
                       className={classes.checkboxIcon}
                       onChange={this.handleCheckboxChange.bind(null, index, filterValue, column.name)}
@@ -284,6 +285,7 @@ class TableFilter extends React.Component {
             {filterData[index].map((filterValue, filterIndex) => (
               <MenuItem value={filterValue} key={filterIndex + 1}>
                 <CheckboxComponent
+                  data-description="table-filter"
                   color="primary"
                   checked={filterList[index].indexOf(filterValue) >= 0 ? true : false}
                   value={filterValue != null ? filterValue.toString() : ''}

diff --git a/src/components/TableSelectCell.js b/src/components/TableSelectCell.js
@@ -3,10 +3,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Checkbox from '@material-ui/core/Checkbox';
 import TableCell from '@material-ui/core/TableCell';
-import IconButton from '@material-ui/core/IconButton';
 import { withStyles } from '@material-ui/core/styles';
-import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
-import Remove from '@material-ui/icons/Remove';
+import ExpandButton from './ExpandButton';
 
 const defaultSelectCellStyles = theme => ({
   root: {
@@ -88,6 +86,7 @@ class TableSelectCell extends React.Component {
       areAllRowsExpanded = () => false,
       selectableRowsHideCheckboxes,
       setHeadCellRef,
+      dataIndex,
       components = {},
       ...otherProps
     } = this.props;
@@ -96,6 +95,7 @@ class TableSelectCell extends React.Component {
     if (!expandableOn && selectableOn === 'none') return false;
 
     const CheckboxComponent = components.Checkbox || Checkbox;
+    const ExpandButtonComponent = components.ExpandButton || ExpandButton;
 
     const cellClass = clsx({
       [classes.root]: true,
@@ -137,6 +137,8 @@ class TableSelectCell extends React.Component {
             checked: classes.checked,
             disabled: classes.disabled,
           }}
+          data-description={isHeaderCell ? 'row-select-header' : 'row-select'}
+          data-index={dataIndex || null}
           color="primary"
           disabled={!isRowSelectable}
           {...otherProps}
@@ -148,25 +150,17 @@ class TableSelectCell extends React.Component {
       <TableCell className={cellClass} padding="checkbox" {...refProp}>
         <div style={{ display: 'flex', alignItems: 'center' }}>
           {expandableOn && (
-            <React.Fragment>
-              {isHeaderCell && !areAllRowsExpanded() && expandedRows && expandedRows.data.length > 0 ? (
-                <IconButton
-                  onClick={onExpand}
-                  style={{ padding: 0 }}
-                  disabled={expandableRowsHeader === false}
-                  className={buttonClass}>
-                  <Remove id="expandable-button" className={iconIndeterminateClass} />
-                </IconButton>
-              ) : (
-                <IconButton
-                  onClick={onExpand}
-                  style={{ padding: 0 }}
-                  disabled={expandableRowsHeader === false}
-                  className={buttonClass}>
-                  <KeyboardArrowRight id="expandable-button" className={iconClass} />
-                </IconButton>
-              )}
-            </React.Fragment>
+            <ExpandButtonComponent
+              isHeaderCell={isHeaderCell}
+              areAllRowsExpanded={areAllRowsExpanded}
+              expandedRows={expandedRows}
+              onExpand={onExpand}
+              expandableRowsHeader={expandableRowsHeader}
+              buttonClass={buttonClass}
+              iconIndeterminateClass={iconIndeterminateClass}
+              iconClass={iconClass}
+              dataIndex={dataIndex}
+            />
           )}
           {selectableOn !== 'none' && selectableRowsHideCheckboxes !== true && renderCheckBox()}
         </div>

diff --git a/src/components/TableToolbar.js b/src/components/TableToolbar.js
@@ -294,6 +294,7 @@ class TableToolbar extends React.Component {
 
     const Tooltip = components.Tooltip || MuiTooltip;
     const TableViewColComponent = components.TableViewCol || TableViewCol;
+    const TableFilterComponent = components.TableFilter || TableFilter;
     const { search, downloadCsv, print, viewColumns, filterTable } = options.textLabels.toolbar;
     const { showSearch, searchText } = this.state;
 
@@ -424,7 +425,7 @@ class TableToolbar extends React.Component {
                 </Tooltip>
               }
               content={
-                <TableFilter
+                <TableFilterComponent
                   customFooter={options.customFilterDialogFooter}
                   columns={columns}
                   options={options}

diff --git a/src/components/TableViewCol.js b/src/components/TableViewCol.js
@@ -69,6 +69,7 @@ const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updat
                 control={
                   <CheckboxComponent
                     color="primary"
+                    data-description="table-view-col"
                     className={classes.checkbox}
                     classes={{
                       root: classes.checkboxRoot,