Material-table: Close detailPanel when leaving the page?

[FlavyP]

I have a table with detailPanel. When I open the detailPanel of any rows, leave the page, and then come back to the page where the tables are, the detailPanels are still opened. Is there any way to close the detailPanel when leaving the page/unmount de component?

Also, when I come back, if I want to close the detailPanel by clicking on the row, I need to click twice. I think somehow it thinks that the detailPanel is closed, but it's still showing.

[mbrn]

Hi @FlavyP ,

Can you share code of table code please?

[FlavyP]

Hi, sure.

<MaterialTable
                columns={[
                    { title: "Name", field: "name" },
                    {
                        title: "Start Date",
                        field: "startDate",
                        type: "date",
                        render: rowData => {
                            return (
                                <div>
                                    {DateUtil.formatDate(rowData.startDate)}
                                </div>
                            );
                        }
                    },
                    {
                        title: "End Date",
                        field: "endDate",
                        type: "date",
                        render: rowData => {
                            return (
                                <div>
                                    {DateUtil.formatDate(rowData.endDate)}
                                </div>
                            );
                        }
                    },
                    {
                        title: "disc",
                        field: "disc",
                        type: "numeric"
                    }
                ]}
                data={data.filter(x => x.type === type)}
                title="Data"
                detailPanel={[
                    {
                        tooltip: "Show Details",
                        render: rowData => {
                            return <OtherComponent rowData={rowData} />;
                        }
                    }
                ]}
                onRowClick={(event, rowData, togglePanel) => togglePanel()}
            />

[mbrn]

It saves some data (about table, detail panel etc.) to your rows. When you mount table with same data again it will remember the detailpanel state. So if you want to reset table completely. You can delete tableData field on every row.

[FlavyP]

Could you help me with some code example of that?

[mbrn]

const newData = oldData.map(row => ({...row, tableData: {}}));

[FlavyP]

Should this be when I unmount the component?

[mbrn]

unmount or mount.

[FlavyP]

Thank you!