React Material-Table programatically remove grouping

Viewed 11

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?

0 Answers
Related