Material-table：是否可以默认打开detailsPanel？答案

【问题标题】：Material-table: Is it possible to open detailsPanel by default?Material-table：是否可以默认打开detailsPanel？
【发布时间】：2020-10-21 15:24:48
【问题描述】：

我正在尝试创建主 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

的链接

【问题讨论】：

这里的cmetsstackoverflow.com/questions/57460159/…说没有办法。也许尝试使用material-ui.com/components/tables

标签： javascript html reactjs material-ui material-table

【解决方案1】：

据了解，没有任何适当的方法或道具可以实现这一点，但您可以进行原生 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，如果我遗漏了什么，请告诉我。

【讨论】：

【解决方案2】：

如果您看到 source code 有一个名为 defaultExpanded 的道具应该可以工作，但有一个 open issue 会导致默认情况下无法打开面板。

要使其正常工作（直到问题得到解决），您可以强制修改材料表的组件在 useEffect 中的状态

像这样

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

此解决方案适用于任意数量的行/detailsPanel。

【讨论】：