diff --git a/README.md b/README.md
index 1e02736..a06f856 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@
[](https://coveralls.io/github/patorjk/mui-dt?branch=master)
[](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!
diff --git a/examples/ExamplesGrid.js b/examples/ExamplesGrid.js
index e157a66..4650ef2 100644
--- a/examples/ExamplesGrid.js
+++ b/examples/ExamplesGrid.js
@@ -79,4 +79,4 @@ function ExamplesGrid(props) {
);
}
-export default ExamplesGrid;
\ No newline at end of file
+export default ExamplesGrid;
diff --git a/examples/csv-export/index.js b/examples/csv-export/index.js
index 99a67d2..49b0bb8 100644
--- a/examples/csv-export/index.js
+++ b/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!');
diff --git a/examples/customize-toolbarselect/CustomToolbarSelect.js b/examples/customize-selecttoolbar/CustomSelectToolbar.js
similarity index 100%
rename from examples/customize-toolbarselect/CustomToolbarSelect.js
rename to examples/customize-selecttoolbar/CustomSelectToolbar.js
diff --git a/examples/customize-toolbarselect/index.js b/examples/customize-selecttoolbar/index.js
similarity index 93%
rename from examples/customize-toolbarselect/index.js
rename to examples/customize-selecttoolbar/index.js
index aadff27..19c61b6 100644
--- a/examples/customize-toolbarselect/index.js
+++ b/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) => (
-
+ customSelectToolbar: (selectedRows, displayData, setSelectedRows) => (
+
),
};
diff --git a/examples/examples.js b/examples/examples.js
index 9370862..afdb447 100644
--- a/examples/examples.js
+++ b/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,
diff --git a/examples/expandable-rows/index.js b/examples/expandable-rows/index.js
index 79fc239..a30b474 100644
--- a/examples/expandable-rows/index.js
+++ b/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);
diff --git a/examples/selectable-rows/index.js b/examples/selectable-rows/index.js
index a52c66a..6ead89a 100644
--- a/examples/selectable-rows/index.js
+++ b/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 (
-
+ <>
+
+
+ }
+ label="Disable Select Toolbar"
+ />
+
+
+
);
}
diff --git a/package.json b/package.json
index 6a9dbf6..7bcbf5a 100644
--- a/package.json
+++ b/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": {
diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js
index ebfcfad..a8b80e3 100644
--- a/src/MUIDataTable.js
+++ b/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 ? (
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]) {
diff --git a/src/components/TableToolbarSelect.js b/src/components/TableToolbarSelect.js
index 7f1bbe4..dea760f 100644
--- a/src/components/TableToolbarSelect.js
+++ b/src/components/TableToolbarSelect.js
@@ -70,8 +70,8 @@ class TableToolbarSelect extends React.Component {
{selectedRows.data.length} {textLabels.text}
- {options.customToolbarSelect ? (
- options.customToolbarSelect(selectedRows, displayData, this.handleCustomSelectedRows)
+ {options.customSelectToolbar ? (
+ options.customSelectToolbar(selectedRows, displayData, this.handleCustomSelectedRows)
) : (
diff --git a/test/MUIDataTable.test.js b/test/MUIDataTable.test.js
index 73ae0aa..df60dca 100644
--- a/test/MUIDataTable.test.js
+++ b/test/MUIDataTable.test.js
@@ -1042,7 +1042,7 @@ describe('', 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('', function() {
),
expandableRowsOnClick: true,
- onRowsExpand: spy(),
+ onRowExpansionChange: spy(),
};
const mountWrapper = mount();
@@ -1060,16 +1060,16 @@ describe('', 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', () => {
diff --git a/test/MUIDataTableToolbarSelect.test.js b/test/MUIDataTableSelectToolbar.test.js
similarity index 82%
rename from test/MUIDataTableToolbarSelect.test.js
rename to test/MUIDataTableSelectToolbar.test.js
index cafccb4..be86fc3 100644
--- a/test/MUIDataTableToolbarSelect.test.js
+++ b/test/MUIDataTableSelectToolbar.test.js
@@ -19,28 +19,28 @@ describe('', function() {
assert.strictEqual(actualResult.length, 1);
});
- it('should call customToolbarSelect with 3 arguments', () => {
+ it('should call customSelectToolbar with 3 arguments', () => {
const onRowsDelete = () => {};
- const customToolbarSelect = spy();
+ const customSelectToolbar = spy();
const selectedRows = { data: [1] };
const displayData = [1];
const mountWrapper = mount(
,
);
- assert.strictEqual(customToolbarSelect.calledWith(selectedRows, displayData, match.typeOf('function')), true);
+ assert.strictEqual(customSelectToolbar.calledWith(selectedRows, displayData, match.typeOf('function')), true);
});
it('should throw TypeError if selectedRows is not an array of numbers', done => {
const onRowsDelete = () => {};
const selectRowUpdate = () => {};
- const customToolbarSelect = (_, __, setSelectedRows) => {
+ const customSelectToolbar = (_, __, setSelectedRows) => {
const spySetSelectedRows = spy(setSelectedRows);
try {
spySetSelectedRows('');
@@ -62,7 +62,7 @@ describe('', function() {
const mountWrapper = mount(
', function() {
);
});
- it('should call selectRowUpdate when customToolbarSelect passed and setSelectedRows was called', () => {
+ it('should call selectRowUpdate when customSelectToolbar passed and setSelectedRows was called', () => {
const onRowsDelete = () => {};
const selectRowUpdate = spy();
- const customToolbarSelect = (_, __, setSelectedRows) => {
+ const customSelectToolbar = (_, __, setSelectedRows) => {
setSelectedRows([1]);
};
const selectedRows = { data: [1] };
@@ -82,7 +82,7 @@ describe('', function() {
const mountWrapper = mount(