feat: A key to override the default id tag to persist state between…

… rerenders
material-table-core · Feb 13, 2022 · 5a7d2b3 · 5a7d2b3
1 parent 5b57e40
commit 5a7d2b3
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -331,6 +331,8 @@ export interface Options<RowData extends object> {
   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;