I am using material-table in a react application and I am trying to programatically group or ungroup columns using a checkbox.
It is working great to create group but I can't figure out how to remove all groups.
Here is my function
import MaterialTable from '@material-table/core';
const handleGroupColumns = (e) => {
const group_by_vessel = !filters.group_by_vessel
setFilters({
...filters,
group_by_vessel
})
const tblRef = tableRef.current;
if(group_by_vessel){
//This parts works like a charm
tblRef.state.columns.map((col) => {
if(col.filter_name === "filter_vessel"){
col.tableData.groupOrder = 0
}else if(col.filter_name === "filter_voyage"){
col.tableData.groupOrder = 1
}else{
col.tableData.groupOrder = undefined;
}
return true;
});
}else{
/*
When I try to remove ALL groupOrder I get an error but if
I leave at least one group, I am ok!
*/
tblRef.state.columns.map((col) => {
col.tableData.groupOrder = undefined
return true;
});
}
}
I can remove groups as long as there is still one group, but if I try to remove all filters I get the following error :
m-table-body.js:118 Uncaught TypeError: Cannot read properties of undefined (reading 'editing')
at m-table-body.js:118
at Array.map (<anonymous>)
at MTableBody.renderUngroupedRows (m-table-body.js:117)
at MTableBody.render (m-table-body.js:264)
at finishClassComponent (react-dom.development.js:17485)
at updateClassComponent (react-dom.development.js:17435)
at beginWork (react-dom.development.js:19073)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at beginWork$1 (react-dom.development.js:23964)
at performUnitOfWork (react-dom.development.js:22776)
at workLoopSync (react-dom.development.js:22707)
at renderRootSync (react-dom.development.js:22670)
at performSyncWorkOnRoot (react-dom.development.js:22293)
at react-dom.development.js:11327
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
at flushSyncCallbackQueue (react-dom.development.js:11309)
at flushPendingDiscreteUpdates (react-dom.development.js:22372)
at flushDiscreteUpdates (react-dom.development.js:22353)
at finishEventHandler (react-dom.development.js:3714)
at batchedEventUpdates (react-dom.development.js:3748)
at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
at attemptToDispatchEvent (react-dom.development.js:6005)
at dispatchEvent (react-dom.development.js:5924)
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
at discreteUpdates$1 (react-dom.development.js:22413)
at discreteUpdates (react-dom.development.js:3756)
at dispatchDiscreteEvent (react-dom.development.js:5889)
Any Ideas?