javascript - Material-table:是否可以默认打开detailsPanel？

Question

我正在尝试创建主 React Material-Table 的子表.
一切都正常工作，它应该工作，详细信息面板(子表)显示在切换图标按下。
有什么方法可以显示它默认打开吗？我的意思是删除切换图标并显示detailPanel直接从组件渲染？
这是我的 mat-table 的样子(我不想插入整个组件代码，因为代码太多，完整的代码在沙箱中):

<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"
          })
        }}
      />

以及 的链接Codesandbox

Answer 1

据了解，没有任何适当的方法或 Prop 可以实现这一点，但您可以进行 native DoM 操作。

在 DetailPanel 中提供自定义图标带有一些唯一 ID 的图标，如下所示:

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

现在，在 componentDidMount找到此元素并在其上触发单击事件并像这样隐藏父节点

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

这是 working sandbox link从你那里 fork ，如果我遗漏了什么，请告诉我。