Material-table：是不是可以默认打开detailsPanel？

Posted 2023-02-22

【中文标题】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

的链接

【问题讨论】：

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

【参考方案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。