Merge f0b1e94 into a38a65a

README.md

@@ -8,7 +8,7 @@
 [![Coverage Status](https://coveralls.io/repos/github/patorjk/mui-dt/badge.svg?branch=master)](https://coveralls.io/github/patorjk/mui-dt?branch=master)
 [![npm version](https://badge.fury.io/js/mui-dt.svg)](https://badge.fury.io/js/mui-dt)
 
-MUI-DT is a data tables component built on [Material-UI](https://www.material-ui.com).  It comes with features like responsive modes for mobile/tablet devices, filtering, resizable + view/hide columns, search, export to CSV download, printing, selectable rows, expandable rows, pagination, and sorting. 
+MUI-DT is a data tables component built on [Material-UI](https://www.material-ui.com).  It comes with features like filtering, resizable + view/hide columns, search, export to CSV download, printing, selectable rows, expandable rows, pagination, and sorting. On top of the ability to customize styling on most views, there are two responsive modes "stacked" and "scroll" for mobile/tablet devices.
 
 You can try the table out live in a CodeSandbox here: https://codesandbox.io/s/github/patorjk/mui-dt
 
@@ -138,7 +138,7 @@ The component accepts the following props:
 |**`customToolbar`**|function||Render a custom toolbar.
 |**`customToolbarSelect`**|function||Render a custom selected rows toolbar. `function(selectedRows, displayData, setSelectedRows) => void`
 |**`count`**|number||User provided override for total number of rows.
-|**`disableToolbarSelect`**|boolean|false|Enable/disable the Select Toolbar that appears when a row is selected.
+|**`disableSelectToolbar`**|boolean|false|Enable/disable the Select Toolbar that appears when a row is selected.
 |**`download`**|boolean|true|Show/hide download icon from toolbar.
 |**`downloadOptions`**|object|`{filename: 'tableDownload.csv', separator: ','}`|Options to change the output of the CSV file: `filename`: string, `separator`: string, `filterOptions`: object(`useDisplayedColumnsOnly`: boolean, `useDisplayedRowsOnly`: boolean)
 |**`elevation`**|number|4|Shadow depth applied to Paper component.
@@ -159,9 +159,9 @@ The component accepts the following props:
 |**`onFilterChange`**|function||Callback function that triggers when filters have changed. `function(changedColumnName: string, filterList: array, changedColumnIndex: number) => void`
 |**`onFilterConfirm`**|function||Callback function that is triggered when a user presses the "confirm" button on the filter popover. This occurs only if you've set filterPopoverOptions.mustConfirm option to true. `function(filterList: array) => void`
 |**`onRowClick`**|function||Callback function that triggers when a row is clicked. `function(rowData: string[], rowMeta: { dataIndex: number, rowIndex: number }) => void`
+|**`onRowExpansionChange`**|function||Callback function that triggers when a row is expanded or collapsed. The rowsExpanded parameter can be used to save off the value for options.rowsExpanded for state changes. `function(affectedRows: array, allRowsExpanded: array, rowsExpanded: array) => void` [Example](https://github.com/patorjk/mui-dt/blob/master/examples/expandable-rows/index.js)
 |**`onRowsDelete`**|function||Callback function that triggers when row(s) are deleted. `function(rowsDeleted: object(lookup: {[dataIndex]: boolean}, data: arrayOfObjects: {index: number, dataIndex: number})) => void OR false` (Returning `false` prevents row deletion.)
-|**`onRowsExpand`**|function||Callback function that triggers when a row is expanded or collapsed. The rowsExpanded parameter can be used to save off the value for options.rowsExpanded for state changes. `function(affectedRows: array, allRowsExpanded: array, rowsExpanded: array) => void` [Example](https://github.com/patorjk/mui-dt/blob/master/examples/expandable-rows/index.js)
-|**`onRowsSelect`**|function||Callback function that triggers when row(s) are selected. If setting state, the rowsSelected parameter can be used to set options.rowsSelected. `function(newRowsSelected: array, allRowsSelected: array, rowsSelected: rowsSelected) => void` [Example](https://github.com/patorjk/mui-dt/blob/master/examples/selectable-rows/index.js)
+|**`onRowSelectionChange`**|function||Callback function that triggers when row(s) are selected/unselected. If setting state, the rowsSelected parameter can be used to set options.rowsSelected. `function(affectedRows: array, allSelectedRows: array, rowsSelected: rowsSelected) => void` [Example](https://github.com/patorjk/mui-dt/blob/master/examples/selectable-rows/index.js)
 |**`onSearchChange`**|function||Callback function that triggers when the search text value has changed. `function(searchText: string) => void`
 |**`onSearchClose`**|function||Callback function that triggers when the searchbox closes. `function() => void`
 |**`onSearchOpen`**|function||Callback function that triggers when the searchbox opens. `function() => void`
@@ -383,9 +383,14 @@ const options = {
 ```
 
 ## Breaking Changes with mui-datatables
-This library started as a fork of mui-datatables, developed to solve several pain points I was having and to add several additional features. I'm aiming to keep it similar enough so that someone could use this as a drop in replacement (or, if the maintainer of mui-datatables decides to allow more features in - to hopefully merge this library into that library), however, the more I work on this library, the more it will evolve. Below I list "breaking" changes with mui-datatables.
-
-* The "resetFilters" event that occurs for the onTableChange function is now called "clearFilters". (reason: with the addition of filterPopoverOptions and the ability to confirm filters, there needed to be a reset and a clear function. "reset" already existed and functioned as a "clear", so it was renamed)
+This library started as a fork of mui-datatables. Below I list breaking changes with mui-datatables.
+
+* The "resetFilters" event that occurs for the onTableChange function is now called "clearFilters".
+* The responsiveScrollMaxHeight responsiveScrollFullHeight classes on MUIDataTable have been removed.
+* customToolbarSelect renamed customSelectToolbar.
+* disableToolbarSelect renamed disableSelectToolbar.
+* onRowsSelect renamed onRowSelectionChange.
+* onRowsExpand renamed onRowExpansionChange.
 
 ## Contributing
 Thanks for taking an interest in the library and the github community!

examples/ExamplesGrid.js

@@ -79,4 +79,4 @@ function ExamplesGrid(props) {
     );
 }
 
-export default ExamplesGrid;
+export default ExamplesGrid;

examples/csv-export/index.js

@@ -86,8 +86,8 @@ class Example extends React.Component {
 
         return false;
       },
-      onRowsSelect: (newRowsSelected, allRows, rowsSelected) => {
-        console.log(newRowsSelected, allRows, rowsSelected);
+      onRowSelectionChange: (affectedRows, allSelectedRows, rowsSelected) => {
+        console.log(affectedRows, allSelectedRows, rowsSelected);
       },
       onRowsDelete: rowsDeleted => {
         console.log(rowsDeleted, 'were deleted!');

examples/customize-toolbarselect/index.js → examples/customize-selecttoolbar/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import MUIDataTable from "../../src/";
-import CustomToolbarSelect from "./CustomToolbarSelect";
+import CustomSelectToolbar from "./CustomSelectToolbar";
 
 class Example extends React.Component {
   render() {
@@ -46,8 +46,8 @@ class Example extends React.Component {
       filterType: "dropdown",
       responsive: "stacked",
       rowsPerPage: 10,
-      customToolbarSelect: (selectedRows, displayData, setSelectedRows) => (
-        <CustomToolbarSelect selectedRows={selectedRows} displayData={displayData} setSelectedRows={setSelectedRows} />
+      customSelectToolbar: (selectedRows, displayData, setSelectedRows) => (
+        <CustomSelectToolbar selectedRows={selectedRows} displayData={displayData} setSelectedRows={setSelectedRows} />
       ),
     };
 

examples/examples.js

@@ -13,7 +13,7 @@ import CustomizeSearchRender from "./customize-search-render";
 import CustomizeSorting from "./customize-sorting";
 import CustomizeStyling from "./customize-styling";
 import CustomizeToolbar from "./customize-toolbar";
-import CustomizeToolbarSelect from "./customize-toolbarselect";
+import CustomizeSelectToolbar from "./customize-selecttoolbar";
 import DataAsObjects from "./data-as-objects";
 import ExpandableRows from "./expandable-rows";
 import FixedHeader from "./fixed-header";
@@ -48,7 +48,7 @@ export default {
     'Customize Sorting': CustomizeSorting,
     'Customize Styling': CustomizeStyling,
     'Customize Toolbar': CustomizeToolbar,
-    'Customize Toolbar Select': CustomizeToolbarSelect,
+    'Customize Select Toolbar': CustomizeSelectToolbar,
     'Data As Objects': DataAsObjects,
     'expandableRows': ExpandableRows,
     'fixedHeader': FixedHeader,

examples/expandable-rows/index.js

@@ -88,8 +88,8 @@ class Example extends React.Component {
         return true;
       },
       rowsExpanded: [0, 1],
-      onRowsExpand: (rowExpanded, allRowsExpanded, rowsExpanded) => {
-        console.log('onRowsExpand');
+      onRowExpansionChange: (rowExpanded, allRowsExpanded, rowsExpanded) => {
+        console.log('onRowExpansionChange');
         console.dir(rowExpanded);
         console.dir(allRowsExpanded);
         console.dir(rowsExpanded);

examples/selectable-rows/index.js

@@ -1,12 +1,24 @@
 import React from "react";
 import ReactDOM from "react-dom";
+
+import Switch from '@material-ui/core/Switch';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
 import MUIDataTable from "../../src/";
 
 class Example extends React.Component {
   state = {
-    rowsSelected: []
+    rowsSelected: [],
+    disableSelectToolbar: false,
   };
 
+  toogleSelectToolbar = () => {
+    this.setState({
+      disableSelectToolbar: !this.state.disableSelectToolbar
+    });
+  }
+
   render() {
 
     const columns = [
@@ -58,8 +70,8 @@ class Example extends React.Component {
       responsive: 'stacked',
       rowsPerPage: 10,
       rowsSelected: this.state.rowsSelected,
-      onRowsSelect: (newRowSelected, allRows, rowsSelected) => {
-        console.log(newRowSelected, allRows, rowsSelected);
+      onRowSelectionChange: (affectedRows, allSelectedRows, rowsSelected) => {
+        console.log(affectedRows, allSelectedRows, rowsSelected);
         this.setState({ rowsSelected: rowsSelected });
       },
       onRowsDelete: (rowsDeleted) => {
@@ -96,11 +108,27 @@ class Example extends React.Component {
         //prevents selection of row with title "Attorney"
         return data[dataIndex][1] != "Attorney";
       },
-      selectableRowsHeader: false
+      selectableRowsHeader: false,
+      disableSelectToolbar: this.state.disableSelectToolbar,
     };
 
     return (
-      <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
+      <>
+        <FormGroup row>
+          <FormControlLabel
+            control={
+              <Switch
+                checked={this.state.disableSelectToolbar}
+                onChange={this.toogleSelectToolbar}
+                value={true}
+                color="primary"
+              />
+            }
+            label="Disable Select Toolbar"
+          />
+        </FormGroup>
+        <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
+      </>
     );
 
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-dt",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Datatables for React using Material-UI",
   "main": "dist/index.js",
   "files": [
@@ -18,7 +18,8 @@
     "coverage:html": "cross-env NODE_ENV=test nyc check-coverage --lines 55 --reporter=html --reporter=text mocha --require @babel/register test/*.js && nyc report --reporter=html",
     "prettier": "find src/ docs/ test/ -type f -name \"*.js\" ! -path \"*/.next/*\" | xargs prettier --write",
     "lint": "eslint src",
-    "build": "cross-env NODE_ENV=production npm run prettier && rollup -c",
+    "build": "cross-env NODE_ENV=production rollup -c",
+    "_old_build": "cross-env NODE_ENV=production npm run prettier && rollup -c",
     "prepare": "npm run build"
   },
   "repository": {

src/MUIDataTable.js

@@ -129,8 +129,8 @@ class MUIDataTable extends React.Component {
       customSearch: PropTypes.func,
       customSort: PropTypes.func,
       customToolbar: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
-      customToolbarSelect: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
-      disableToolbarSelect: PropTypes.bool,
+      customSelectToolbar: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+      disableSelectToolbar: PropTypes.bool,
       download: PropTypes.bool,
       downloadOptions: PropTypes.shape({
         filename: PropTypes.string,
@@ -153,8 +153,8 @@ class MUIDataTable extends React.Component {
       isRowSelectable: PropTypes.func,
       onDownload: PropTypes.func,
       onRowClick: PropTypes.func,
-      onRowsExpand: PropTypes.func,
-      onRowsSelect: PropTypes.func,
+      onRowExpansionChange: PropTypes.func,
+      onRowSelectionChange: PropTypes.func,
       onTableChange: PropTypes.func,
       onTableInit: PropTypes.func,
       page: PropTypes.number,
@@ -286,7 +286,7 @@ class MUIDataTable extends React.Component {
   getDefaultOptions = () => ({
     caseSensitive: false,
     checkboxColor: 'primary',
-    disableToolbarSelect: false,
+    disableSelectToolbar: false,
     download: true,
     downloadOptions: {
       filename: 'tableDownload.csv',
@@ -1089,8 +1089,8 @@ class MUIDataTable extends React.Component {
       },
       () => {
         this.setTableAction('expandRow');
-        if (this.options.onRowsExpand) {
-          this.options.onRowsExpand(
+        if (this.options.onRowExpansionChange) {
+          this.options.onRowExpansionChange(
             curExpandedRows,
             this.state.expandedRows.data,
             this.state.expandedRows.data.map(item => item.dataIndex),
@@ -1126,7 +1126,7 @@ class MUIDataTable extends React.Component {
           let selectedMap = buildMap(newRows);
 
           // if the select toolbar is disabled, the rules are a little different
-          if (this.options.disableToolbarSelect === true) {
+          if (this.options.disableSelectToolbar === true) {
             if (selectedRowsLen > displayData.length) {
               isDeselect = true;
             } else {
@@ -1154,8 +1154,8 @@ class MUIDataTable extends React.Component {
         },
         () => {
           this.setTableAction('rowsSelect');
-          if (this.options.onRowsSelect) {
-            this.options.onRowsSelect(
+          if (this.options.onRowSelectionChange) {
+            this.options.onRowSelectionChange(
               this.state.curSelectedRows,
               this.state.selectedRows.data,
               this.state.selectedRows.data.map(item => item.dataIndex),
@@ -1216,8 +1216,8 @@ class MUIDataTable extends React.Component {
         },
         () => {
           this.setTableAction('rowsSelect');
-          if (this.options.onRowsSelect) {
-            this.options.onRowsSelect(
+          if (this.options.onRowSelectionChange) {
+            this.options.onRowSelectionChange(
               [value],
               this.state.selectedRows.data,
               this.state.selectedRows.data.map(item => item.dataIndex),
@@ -1238,8 +1238,8 @@ class MUIDataTable extends React.Component {
         },
         () => {
           this.setTableAction('rowsSelect');
-          if (this.options.onRowsSelect) {
-            this.options.onRowsSelect(
+          if (this.options.onRowSelectionChange) {
+            this.options.onRowSelectionChange(
               this.state.selectedRows.data,
               this.state.selectedRows.data,
               this.state.selectedRows.data.map(item => item.dataIndex),
@@ -1326,7 +1326,7 @@ class MUIDataTable extends React.Component {
         elevation={this.options.elevation}
         ref={this.tableContent}
         className={classnames(classes.paper, className)}>
-        {selectedRows.data.length && this.options.disableToolbarSelect !== true ? (
+        {selectedRows.data.length && this.options.disableSelectToolbar !== true ? (
           <TableToolbarSelect
             options={this.options}
             selectedRows={selectedRows}

src/components/TableHead.js

@@ -35,10 +35,10 @@ class TableHead extends React.Component {
     let isDeterminate = numSelected > 0 && numSelected < count;
     let isChecked = numSelected === count ? true : false;
 
-    // When the disableToolbarSelect option is true, there can be
+    // When the disableSelectToolbar option is true, there can be
     // selected items that aren't visible, so we need to be more
     // precise when determining if the head checkbox should be checked.
-    if (options.disableToolbarSelect === true) {
+    if (options.disableSelectToolbar === true) {
       if (isChecked) {
         for (let ii = 0; ii < data.length; ii++) {
           if (!selectedRows.lookup[data[ii].dataIndex]) {

src/components/TableToolbarSelect.js

@@ -70,8 +70,8 @@ class TableToolbarSelect extends React.Component {
             {selectedRows.data.length} {textLabels.text}
           </Typography>
         </div>
-        {options.customToolbarSelect ? (
-          options.customToolbarSelect(selectedRows, displayData, this.handleCustomSelectedRows)
+        {options.customSelectToolbar ? (
+          options.customSelectToolbar(selectedRows, displayData, this.handleCustomSelectedRows)
         ) : (
           <Tooltip title={textLabels.delete}>
             <IconButton className={classes.iconButton} onClick={onRowsDelete} aria-label={textLabels.deleteAria}>

test/MUIDataTable.test.js

@@ -1042,7 +1042,7 @@ describe('<MUIDataTable />', function() {
     assert.deepEqual(state.selectedRows.data, expectedResult);
   });
 
-  it('should call onRowsExpand when row is expanded or collapsed', () => {
+  it('should call onRowExpansionChange when row is expanded or collapsed', () => {
     const options = {
       expandableRows: true,
       renderExpandableRow: () => (
@@ -1051,7 +1051,7 @@ describe('<MUIDataTable />', function() {
         </tr>
       ),
       expandableRowsOnClick: true,
-      onRowsExpand: spy(),
+      onRowExpansionChange: spy(),
     };
     const mountWrapper = mount(<MUIDataTable columns={columns} data={data} options={options} />);
 
@@ -1060,16 +1060,16 @@ describe('<MUIDataTable />', function() {
       .first()
       .simulate('click');
 
-    assert.strictEqual(options.onRowsExpand.callCount, 1);
-    assert(options.onRowsExpand.calledWith([{ index: 2, dataIndex: 2 }], [{ index: 2, dataIndex: 2 }]));
+    assert.strictEqual(options.onRowExpansionChange.callCount, 1);
+    assert(options.onRowExpansionChange.calledWith([{ index: 2, dataIndex: 2 }], [{ index: 2, dataIndex: 2 }]));
 
     mountWrapper
       .find('#MUIDataTableBodyRow-2')
       .first()
       .simulate('click');
 
-    assert.strictEqual(options.onRowsExpand.callCount, 2);
-    assert(options.onRowsExpand.calledWith([{ index: 2, dataIndex: 2 }], []));
+    assert.strictEqual(options.onRowExpansionChange.callCount, 2);
+    assert(options.onRowExpansionChange.calledWith([{ index: 2, dataIndex: 2 }], []));
   });
 
   it('should update selectedRows when using rowsSelected option with type=multiple', () => {