diff --git a/src/defaults/props.options.js b/src/defaults/props.options.js index f43712be..07297dcf 100644 --- a/src/defaults/props.options.js +++ b/src/defaults/props.options.js @@ -3,6 +3,7 @@ */ export default { + idSynonym: 'id', actionsColumnIndex: 0, addRowPosition: 'last', columnsButton: false, diff --git a/src/material-table.js b/src/material-table.js index 0fe09629..3fb97906 100644 --- a/src/material-table.js +++ b/src/material-table.js @@ -120,7 +120,7 @@ export default class MaterialTable extends React.Component { this.dataManager.changeApplySearch(true); this.dataManager.changeApplyFilters(true); this.dataManager.changeApplySort(true); - this.dataManager.setData(props.data); + this.dataManager.setData(props.data, props.options.idSynonym); } let defaultSortColumnIndex = -1; @@ -702,7 +702,7 @@ export default class MaterialTable extends React.Component { totalCount: result.totalCount, page: result.page }; - this.dataManager.setData(result.data); + this.dataManager.setData(result.data, this.props.options.idSynonym); this.setState( { isLoading: false, diff --git a/src/prop-types.js b/src/prop-types.js index 4984d612..384ef07d 100644 --- a/src/prop-types.js +++ b/src/prop-types.js @@ -310,6 +310,7 @@ export const propTypes = { options: PropTypes.shape({ actionsCellStyle: PropTypes.object, editCellStyle: PropTypes.object, + idSynonym: PropTypes.string, detailPanelColumnStyle: PropTypes.object, actionsColumnIndex: PropTypes.number, addRowPosition: PropTypes.oneOf(['first', 'last']), diff --git a/src/utils/data-manager.js b/src/utils/data-manager.js index 6d43ed31..2ced2a54 100644 --- a/src/utils/data-manager.js +++ b/src/utils/data-manager.js @@ -52,10 +52,11 @@ export default class DataManager { constructor() {} - setData(data) { + setData(data, idSynonym) { this.selectedCount = 0; let prevDataObject = {}; - if (this.data.length !== 0 && this.data[0].id !== undefined) { + + if (this.data.length !== 0 && this.data[0][idSynonym] !== undefined) { prevDataObject = this.data.reduce((obj, row) => { obj[row.tableData.id] = row.tableData; return obj; @@ -70,9 +71,9 @@ export default class DataManager { } } this.data = data.map((row, index) => { - const prevTableData = prevDataObject[row.id] || {}; + const prevTableData = prevDataObject[row[idSynonym]] || {}; const tableData = { - id: row.id || index, + id: row[idSynonym] || index, // `uuid` acts as our 'key' and is generated when new data // is passed into material-table externally. uuid: row.uuid || uuid.v4(), @@ -100,7 +101,6 @@ export default class DataManager { } return newRow; }); - this.filtered = false; } diff --git a/types/index.d.ts b/types/index.d.ts index f40acfc9..d30f79c9 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -331,6 +331,8 @@ export interface Options { actionsCellStyle?: React.CSSProperties; detailPanelColumnStyle?: React.CSSProperties; editCellStyle?: React.CSSProperties; + // A key to override the default `id` tag to persist state between rerenders + idSynonym?: string | number; actionsColumnIndex?: number; addRowPosition?: 'first' | 'last'; columnsButton?: boolean;