Material-table: Is it possible to open detailsPanel by default?

Question

I'm trying to create a subtable of the main React Material-Table. Everything is working properly as it should work, details panel (subtable) is showing on toggle icon press.

Are there any ways to show it opened by default? I mean to remove the toggle icon and show the detailPanel right from the component render?

Here is how my mat-table looks like (I didn't want to insert the whole component code, cause it will be too much code, full code is in the sandbox):

<MaterialTable
        icons={tableIcons}
        tableRef={tableRef}
        columns={tableColumns}
        data={tableData}
        onRowClick={(evt, selectedRow) =>
          setSelectedRow(selectedRow.tableData.id)
        }
        title="Remote Data Example"
        detailPanel={detailSubtable}
        options={{
          rowStyle: rowData => ({
            backgroundColor:
              selectedRow === rowData.tableData.id ? "#EEE" : "#FFF"
          })
        }}
      />

And a link to the Codesandbox

According to comments here https://stackoverflow.com/questions/57460159/how-to-control-programmatically-the-toggling-of-a-row there is no way. Maybe try to go with https://material-ui.com/components/tables/ — Rostyslav, Jul 01 '20 at 08:31

score 0 · Answer 1 · answered Jul 01 '20 at 12:12

As per knowledge, there is not any proper way or props to achieve this but you can do native DoM manipulation.
Provide custom Icon in DetailPanel icon with some unique ID like this:

  DetailPanel: forwardRef((props, ref) => (
    <div id="my-id" style={{ display: "none" }}>
      <ChevronRight {...props} ref={ref} />
    </div>
  )),

Now, On componentDidMount find this element and trigger a click event on it and hide parent node like this

 useEffect(() => {
    const myToggler = document.getElementById("my-id");
    if (!!myToggler) {
      myToggler.click();
      myToggler.parentNode.style.display = "none";
    }
  }, []);

here is the working sandbox link forked from yours, let me know if I am missing something.

score 0 · Answer 2 · answered Jul 01 '20 at 13:03

If you see the source code There is a props called defaultExpanded which should work but there is an open issue which is causing the issue of not opening the panel by default.

To make it work (until the issue is fixed), you can imperatively modify the material-table's component the state in the useEffect

Like this

useEffect(() => {
    tableRef.current.state.data = tableRef.current.state.data.map(data => {
      console.log(data);
      data.tableData.showDetailPanel = tableRef.current.props.detailPanel;
      return data;
    });
  }, []);

Working demo of your code

This solution works for any number of rows/detailsPanel.

Material-table: Is it possible to open detailsPanel by default?

2 Answers2