Skip to content

Commit

Permalink
Merge pull request #1086 from patorjk/persistent_state
Browse files Browse the repository at this point in the history 
Updated table to make state persistent between renders
  • Loading branch information
@patorjk
patorjk authored May 31, 2020
2 parents 4f83609 + 912bf2e commit e63835e
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 41 deletions.
35 changes: 23 additions & 12 deletions examples/data-as-objects/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,22 @@ import MUIDataTable from "../../src/";

class Example extends React.Component {

state = {
counter: 0,
data: [
{ name: "Gabby George", title: "Business Analyst", location: "Minneapolis", age: 30, salary: "$100,000", phone: { home: '867-5309', cell: '123-4567' } },
{ name: "Aiden Lloyd", title: "Business Consultant", location: "Dallas",  age: 55, salary: "$200,000", phone: { home: '867-5310', cell: '123-4568' } },
{ name: "Jaden Collins", title: "Attorney", location: "Santa Ana", age: 27, salary: "$500,000", phone: { home: '867-5311', cell: '123-4569' } },
{ name: "Franky Rees", title: "Business Analyst", location: "St. Petersburg", age: 22, salary: "$50,000", phone: { home: '867-5312', cell: '123-4569' } }
]
}

rerender = () => {
this.setState((prevState, props) => ({
counter: prevState.counter + 1
}));
}

render() {

const columns = [
Expand All @@ -14,15 +30,15 @@ class Example extends React.Component {
filter: true,
display: 'excluded',
}
},
},  
{
name: "title",
label: "Modified Title Label",
options: {
filter: true,
}
},
{
{  
name: "location",
label: "Location",
options: {
Expand Down Expand Up @@ -58,25 +74,20 @@ class Example extends React.Component {
}
];


const data = [
{ name: "Gabby George", title: "Business Analyst", location: "Minneapolis", age: 30, salary: "$100,000", phone: { home: '867-5309', cell: '123-4567' } },
{ name: "Aiden Lloyd", title: "Business Consultant", location: "Dallas", age: 55, salary: "$200,000", phone: { home: '867-5310', cell: '123-4568' } },
{ name: "Jaden Collins", title: "Attorney", location: "Santa Ana", age: 27, salary: "$500,000", phone: { home: '867-5311', cell: '123-4569' } },
{ name: "Franky Rees", title: "Business Analyst", location: "St. Petersburg", age: 22, salary: "$50,000", phone: { home: '867-5312', cell: '123-4569' } }
];

const options = {
filter: true,
filterType: 'dropdown',
responsive: 'stacked',
};

return (
<MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
<React.Fragment>
<button onClick={this.rerender}>Re-render - {this.state.counter}</button>
<MUIDataTable title={"ACME Employee list"} data={this.state.data} columns={columns} options={options} />
</React.Fragment>
);

}
}

export default Example;
export default Example;
33 changes: 22 additions & 11 deletions examples/simple/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,26 @@ import MUIDataTable from "../../src/";

class Example extends React.Component {

render() {
state = {
counter: 0,
data: [
["Gabby George", "Business Analyst", "Minneapolis"],
["Aiden Lloyd", "Business Consultant", "Dallas"],
["Jaden Collins", "Attorney", "Santa Ana"],
["Franky Rees", "Business Analyst", "St. Petersburg"],
["Aaren Rose", null, "Toledo"]
]
}

const columns = ["Name", "Title", "Location"];
rerender = () => {
this.setState((prevState, props) => ({
counter: prevState.counter + 1
}));
}

const data = [
["Gabby George", "Business Analyst", "Minneapolis"],
["Aiden Lloyd", "Business Consultant", "Dallas"],
["Jaden Collins", "Attorney", "Santa Ana"],
["Franky Rees", "Business Analyst", "St. Petersburg"],
["Aaren Rose", null, "Toledo"]
];
render() {

const columns = ["Name", "Title", "Location"];

const options = {
filter: true,
Expand All @@ -24,10 +32,13 @@ class Example extends React.Component {
};

return (
<MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
<React.Fragment>
<button onClick={this.rerender}>Re-render - {this.state.counter}</button>
<MUIDataTable title={"ACME Employee list"} data={this.state.data} columns={columns} options={options} />
</React.Fragment>
);

}
}

export default Example;
export default Example;
88 changes: 70 additions & 18 deletions src/MUIDataTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,9 +264,15 @@ class MUIDataTable extends React.Component {
}

componentDidUpdate(prevProps) {
if (this.props.data !== prevProps.data || this.props.columns !== prevProps.columns) {
if (this.props.data !== prevProps.data || this.props.columns !== prevProps.columns || this.props.options !== prevProps.options) {
this.updateOptions(this.options, this.props);
this.setTableData(this.props, TABLE_LOAD.INITIAL, () => {

var didDataUpdate = this.props.data !== prevProps.data;
if ( this.props.data && prevProps.data ) {
didDataUpdate = didDataUpdate && (this.props.data.length === prevProps.data.length);
}

this.setTableData(this.props, TABLE_LOAD.INITIAL, didDataUpdate, () => {
this.setTableAction('propsUpdate');
});
}
Expand Down Expand Up @@ -295,7 +301,7 @@ class MUIDataTable extends React.Component {
initializeTable(props) {
this.mergeDefaultOptions(props);
this.setTableOptions();
this.setTableData(props, TABLE_LOAD.INITIAL, () => {
this.setTableData(props, TABLE_LOAD.INITIAL, true, () => {
this.setTableInit('tableInitialized');
});
}
Expand Down Expand Up @@ -372,8 +378,8 @@ class MUIDataTable extends React.Component {
};

/*
* React currently does not support deep merge for defaultProps. Objects are overwritten
*/
 * React currently does not support deep merge for defaultProps. Objects are overwritten
 */
mergeDefaultOptions(props) {
const defaultOptions = this.getDefaultOptions();

Expand Down Expand Up @@ -428,10 +434,10 @@ class MUIDataTable extends React.Component {
getTableContentRef = () => this.tableContent.current;

/*
* Build the source table data
*/
 *  Build the source table data
 */

buildColumns = newColumns => {
buildColumns = (newColumns, prevColumns) => {
let columnData = [];
let filterData = [];
let filterList = [];
Expand All @@ -450,8 +456,9 @@ class MUIDataTable extends React.Component {
sortDirection: 'none',
};

const options = { ...column.options };

if (typeof column === 'object') {
const options = { ...column.options };
if (options) {
if (options.display !== undefined) {
options.display = options.display.toString();
Expand All @@ -474,14 +481,47 @@ class MUIDataTable extends React.Component {
}
}

// remember stored version of display and sortDirection if not overwritten
if (
typeof options.display === 'undefined' &&
prevColumns[colIndex] &&
prevColumns[colIndex].name === column.name &&
prevColumns[colIndex].display
) {
options.display = prevColumns[colIndex].display;
}
if (
typeof options.sortDirection === 'undefined' &&
prevColumns[colIndex] &&
prevColumns[colIndex].name === column.name &&
prevColumns[colIndex].sortDirection
) {
options.sortDirection = prevColumns[colIndex].sortDirection;
}

columnOptions = {
name: column.name,
label: column.label ? column.label : column.name,
...columnOptions,
...options,
};
} else {
columnOptions = { ...columnOptions, name: column, label: column };

// remember stored version of display and sortDirection if not overwritten
if (
prevColumns[colIndex] &&
prevColumns[colIndex].display
) {
options.display = prevColumns[colIndex].display;
}
if (
prevColumns[colIndex] &&
prevColumns[colIndex].sortDirection
) {
options.sortDirection = prevColumns[colIndex].sortDirection;
}

columnOptions = { ...columnOptions, ...options, name: column, label: column };
}

columnData.push(columnOptions);
Expand Down Expand Up @@ -520,15 +560,19 @@ class MUIDataTable extends React.Component {
return transformedData;
};

setTableData(props, status, callback = () => {}) {
setTableData(props, status, dataUpdated, 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;

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++) {
Expand Down Expand Up @@ -577,6 +621,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) {
Expand Down Expand Up @@ -616,14 +662,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++) {
Expand All @@ -643,6 +689,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 (typeof this.options.rowsSelected === 'undefined' && dataUpdated === false) {
if (this.state.selectedRows) {
selectedRowsData = Object.assign({}, this.state.selectedRows);
}
}

if (this.options.rowsExpanded && this.options.rowsExpanded.length && this.options.expandableRows) {
Expand All @@ -659,6 +709,8 @@ class MUIDataTable extends React.Component {
expandedRowsData.data.push({ index: rowPos, dataIndex: row });
expandedRowsData.lookup[row] = true;
});
} else if (typeof this.options.rowsExpanded === 'undefined' && dataUpdated === false && this.state.expandedRows) {
expandedRowsData = Object.assign({}, this.state.expandedRows);
}
}

Expand All @@ -679,7 +731,6 @@ class MUIDataTable extends React.Component {
count: this.options.count,
data: tableData,
displayData: this.getDisplayData(columns, tableData, filterList, searchText, tableMeta),
previousSelectedRow: null,
},
callback,
);
Expand Down Expand Up @@ -1109,6 +1160,7 @@ class MUIDataTable extends React.Component {
},
},
TABLE_LOAD.UPDATE,
true,
() => {
this.setTableAction('rowDelete');
},
Expand Down Expand Up @@ -1180,7 +1232,7 @@ class MUIDataTable extends React.Component {
return arr;
}, []);

let newRows = [...prevState.selectedRows, ...selectedRows];
let newRows = [...selectedRows];
let selectedMap = buildMap(newRows);

// if the select toolbar is disabled, the rules are a little different
Expand Down Expand Up @@ -1504,4 +1556,4 @@ class MUIDataTable extends React.Component {
}
}

export default withStyles(defaultTableStyles, { name: 'MUIDataTable' })(MUIDataTable);
export default withStyles(defaultTableStyles, { name: 'MUIDataTable' })(MUIDataTable);

0 comments on commit e63835e

Please sign in to comment.