Mui-datatables: One expanded row at a time

[janakprajapati]

Hi,

I looked into the doc and existing issues but, I haven't found a way to implement the Expanded Rows where only one row will be in expanded state. If we select any other row, the previous row collapse automatically.

I checked the rowsExpanded option but, I do not see any event callback like onRowExpand OR a way to change the state of the other row's expanded state.

If this is possible with current options, please guide me to respective reference/sample.

Thanks

Requested Behavior

One expanded row at a time. If you select any other row to expand, the previous expanded row collapse automatically.

Current Behavior

The expanded rows remain in expanded state when we select any other rows to expand.

[patorjk]

There's an onTableChange function that will recieve an "expandRow" action when a row is opened or closed.

var options = {
    rowsExpanded: [0, 2],
    expandableRows: true,
    renderExpandableRow: () => {
      return <div>hi</div>;
    },
    onTableChange: (action, tableState) => {
        switch (action) {
            case 'expandRow':
                console.log(action);
                console.dir(tableState);
            break;
        }
    }
}

However, you have to be careful, because the table re-applies your options when it's re-rendered. So if you're going to control the rowsExpanded array, you have to update your options object.

I put together a short example here:

https://codesandbox.io/s/muidatatables-custom-toolbar-75b2f

[janakprajapati]

@patorjk Thanks a lot.

[gabrielliwerant]

I think there's a good use case here to add some of the same functionality to expanded rows that we have for selected rows, so I'll re-open this and work on that as a feature.

[gabrielliwerant]

Related to https://github.com/gregnb/mui-datatables/pull/861 and https://github.com/gregnb/mui-datatables/pull/862.

[gabrielliwerant]

The ability to do this should be available as of 2.12.0 via the isRowExpandable option.