diff --git a/README.md b/README.md index 1023574..c0ed2ae 100644 --- a/README.md +++ b/README.md @@ -388,6 +388,7 @@ const options = { ## Breaking Changes with mui-datatables This library started as a fork of mui-datatables. Below I list breaking changes with mui-datatables. +* The table now retains internal state through re-renders. When you override a table option or column option you take control, but if you opt not to control an option the table will maintain the state and not reset it when the table re-renders. * 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. diff --git a/examples/data-as-objects/index.js b/examples/data-as-objects/index.js index ceb81ff..a8c0569 100644 --- a/examples/data-as-objects/index.js +++ b/examples/data-as-objects/index.js @@ -65,6 +65,7 @@ class Example extends React.Component { name: "phone.home", label: "Home Phone", options: { + filter: true, setCellProps: () => ({style:{whiteSpace:'pre'}}), setCellHeaderProps: () => ({style:{whiteSpace:'pre'}}), } @@ -73,6 +74,7 @@ class Example extends React.Component { name: "phone.fake", label: "Not a Phone #", options: { + filter: false, setCellProps: () => ({style:{whiteSpace:'pre'}}), setCellHeaderProps: () => ({style:{whiteSpace:'pre'}}), } @@ -81,6 +83,7 @@ class Example extends React.Component { name: "phone2.cell", label: "Cell Phone", options: { + filter: false, setCellProps: () => ({style:{whiteSpace:'pre'}}), setCellHeaderProps: () => ({style:{whiteSpace:'pre'}}), } @@ -89,6 +92,7 @@ class Example extends React.Component { name: "phone3.home", label: "Not An Attribute", options: { + filter: false, setCellProps: () => ({style:{whiteSpace:'pre'}}), setCellHeaderProps: () => ({style:{whiteSpace:'pre'}}), } @@ -97,6 +101,7 @@ class Example extends React.Component { name: "phone4.home", label: "Not An Attribute", options: { + filter: false, setCellProps: () => ({style:{whiteSpace:'pre'}}), setCellHeaderProps: () => ({style:{whiteSpace:'pre'}}), } @@ -105,6 +110,7 @@ class Example extends React.Component { name: "phone4.home", label: "Not An Attribute", options: { + filter: false, setCellProps: () => ({style:{whiteSpace:'pre'}}), setCellHeaderProps: () => ({style:{whiteSpace:'pre'}}), } @@ -165,7 +171,7 @@ class Example extends React.Component { const options = { filter: true, - rowsPerPage: 10, + rowsPerPage: 100, rowsPerPageOptions: [10,100,200,500], filterType: 'dropdown', displayMode: 'scroll',//stacked diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js index 2cc6339..d25d4a9 100644 --- a/src/MUIDataTable.js +++ b/src/MUIDataTable.js @@ -391,7 +391,7 @@ class MUIDataTable extends React.Component { * Build the source table data */ - buildColumns = newColumns => { + buildColumns = (newColumns, prevColumns) => { let columnData = []; let filterData = []; let filterList = []; @@ -412,6 +412,8 @@ class MUIDataTable extends React.Component { if (column.options) { if (column.options.display !== undefined) { column.options.display = column.options.display.toString(); + } else if (prevColumns[colIndex] && prevColumns[colIndex].name === column.name && prevColumns[colIndex].display) { + column.options.display = prevColumns[colIndex].display; } } @@ -455,7 +457,7 @@ class MUIDataTable extends React.Component { setTableData(props, status, callback = () => {}) { let tableData = []; - let { columns, filterData, filterList } = this.buildColumns(props.columns); + let { columns, filterData, filterList } = this.buildColumns(props.columns, this.state.columns); let sortIndex = null; let sortDirection = 'none'; let tableMeta; @@ -467,7 +469,11 @@ class MUIDataTable extends React.Component { } const data = status === TABLE_LOAD.INITIAL ? this.transformData(columns, props.data) : props.data; - const searchText = status === TABLE_LOAD.INITIAL ? this.options.searchText : null; + let searchText = status === TABLE_LOAD.INITIAL ? this.options.searchText : null; + + if (typeof this.options.searchText === 'undefined' && typeof this.state.searchText !== 'undefined') { + searchText = this.state.searchText; + } columns.forEach((column, colIndex) => { for (let rowIndex = 0; rowIndex < data.length; rowIndex++) { @@ -480,26 +486,28 @@ class MUIDataTable extends React.Component { }); } - if (typeof column.customBodyRender === 'function' && column.filterWithRenderData !== false) { - const rowData = tableData[rowIndex].data; - tableMeta = this.getTableMeta(rowIndex, colIndex, rowData, column, data, this.state); - const funcResult = column.customBodyRender(value, tableMeta); + if (column.filter !== false) { + if (typeof column.customBodyRender === 'function' && column.filterWithRenderData !== false) { + const rowData = tableData[rowIndex].data; + tableMeta = this.getTableMeta(rowIndex, colIndex, rowData, column, data, this.state); + const funcResult = column.customBodyRender(value, tableMeta); - if (React.isValidElement(funcResult) && funcResult.props.value) { - value = funcResult.props.value; - } else if (typeof funcResult === 'string') { - value = funcResult; + if (React.isValidElement(funcResult) && funcResult.props.value) { + value = funcResult.props.value; + } else if (typeof funcResult === 'string') { + value = funcResult; + } } - } - if (filterData[colIndex].indexOf(value) < 0 && !Array.isArray(value)) { - filterData[colIndex].push(value); - } else if (Array.isArray(value)) { - value.forEach(element => { - if (filterData[colIndex].indexOf(element) < 0) { - filterData[colIndex].push(element); - } - }); + if (filterData[colIndex].indexOf(value) < 0 && !Array.isArray(value)) { + filterData[colIndex].push(value); + } else if (Array.isArray(value)) { + value.forEach(element => { + if (filterData[colIndex].indexOf(element) < 0) { + filterData[colIndex].push(element); + } + }); + } } } @@ -511,6 +519,8 @@ class MUIDataTable extends React.Component { if (column.filterList) { filterList[colIndex] = cloneDeep(column.filterList); + } else if ( this.state.filterList && this.state.filterList[colIndex] && this.state.filterList[colIndex].length > 0) { + filterList[colIndex] = cloneDeep(this.state.filterList[colIndex]); } if (this.options.sortFilterList) { @@ -550,14 +560,14 @@ class MUIDataTable extends React.Component { selectedRowsData.data.push({ index: rowPos, dataIndex: row }); selectedRowsData.lookup[row] = true; }); - } // Single row selection customization - if ( + } else if ( this.options.rowsSelected && this.options.rowsSelected.length === 1 && this.options.selectableRows === 'single' ) { + let rowPos = this.options.rowsSelected[0]; for (let cIndex = 0; cIndex < this.state.displayData.length; cIndex++) { @@ -577,6 +587,10 @@ class MUIDataTable extends React.Component { console.error( 'Multiple values provided for selectableRows, but selectableRows set to "single". Either supply only a single value or use "multiple".', ); + } else { + if (this.state.selectedRows) { + selectedRowsData = Object.assign({}, this.state.selectedRows); + } } if (this.options.rowsExpanded && this.options.rowsExpanded.length && this.options.expandableRows) { @@ -593,6 +607,8 @@ class MUIDataTable extends React.Component { expandedRowsData.data.push({ index: rowPos, dataIndex: row }); expandedRowsData.lookup[row] = true; }); + } else if (this.state.expandedRows) { + expandedRowsData = Object.assign({}, this.state.expandedRows); } } @@ -614,7 +630,6 @@ class MUIDataTable extends React.Component { data: tableData, sortOrder: sortOrder, displayData: this.getDisplayData(columns, tableData, filterList, searchText, tableMeta), - //previousSelectedRow: null, }, callback, ); diff --git a/src/components/TableBody.js b/src/components/TableBody.js index 4e8679b..761cbb2 100644 --- a/src/components/TableBody.js +++ b/src/components/TableBody.js @@ -217,17 +217,6 @@ class TableBody extends React.Component { if (options.customRowRender) { return options.customRowRender(row, dataIndex, rowIndex); } - -/* - onChange={this.handleRowSelect.bind(null, { - index: this.getRowIndex(rowIndex), - dataIndex: dataIndex, - })} - onExpand={toggleExpandRow.bind(null, { - index: this.getRowIndex(rowIndex), - dataIndex: dataIndex, - })} -*/ return (