add onDetailPanelChange callback

material-table-core · Nov 10, 2023 · 6c326fd · 6c326fd
1 parent 652e6c8
commit 6c326fd
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 1 deletion.
diff --git a/__tests__/demo/demo-components/index.js b/__tests__/demo/demo-components/index.js
@@ -1080,6 +1080,7 @@ export function DetailPanelRemounting(props) {
       detailPanel={({ rowData }) => (
         <SubTable rowData={rowData} setSelection={setSelection} />
       )}
+      onDetailPanelChange={console.log}
       options={{
         selection: true
       }}

diff --git a/src/material-table.js b/src/material-table.js
@@ -833,8 +833,14 @@ export default class MaterialTable extends React.Component {
   };
 
   onToggleDetailPanel = (path, render) => {
-    this.dataManager.changeDetailPanelVisibility(path, render);
+    const row = this.dataManager.changeDetailPanelVisibility(path, render);
     this.setState(this.dataManager.getRenderState());
+    console.log(row, row.tableData.showDetailPanel ? 'open' : 'closed');
+    this.props.onTreeExpandChange &&
+      this.props.onDetailPanelChange(
+        row,
+        row.tableData.showDetailPanel ? 'open' : 'closed'
+      );
   };
 
   onCellEditStarted = (rowData, columnDef) => {

diff --git a/src/utils/data-manager.js b/src/utils/data-manager.js
@@ -315,6 +315,7 @@ export default class DataManager {
     }
 
     this.lastDetailPanelRow = rowData;
+    return rowData;
   }
 
   changeGroupExpand(path) {

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -96,6 +96,7 @@ export interface MaterialTableProps<RowData extends object> {
   onTreeExpandChange?: (data: any, isExpanded: boolean) => void;
   onQueryChange?: (query?: Query<RowData>) => void;
   onBulkEditOpen?: (isOpen: boolean) => void;
+  onDetailPanelChange?: (row: RowData, state: 'open' | 'closed') => void;
   renderSummaryRow?: ({
     columns,
     column,
-Original file line number
+Diff line change
@@ Expand Up / @@ -315,6 +315,7 @@ export default class DataManager { @@
         }
         this.lastDetailPanelRow = rowData;
+        return rowData;
       }
       changeGroupExpand(path) {
@@ Expand Down @@