3

我正在使用带有 REACT 的 MaterialTable（基于 Material-UI Table.material-table.com 的 React 数据表）更精确地使用详细面板 - material-table.com/#/docs/features/detail-panel

我需要什么？用户应该打开/关闭详细的面板并在它们之间拖放项目。

问题：每次我 React 渲染表格时，所有详细面板都会关闭。

我正在寻找一种解决方案，它允许我为每一行设置一个标志，说明它是隐藏的还是打开的。所以在渲染时.. React 不会自动关闭所有行。

我尝试在表格和面板上设置选项和事件 - 没有一个能够控制行切换。

代码非常简单：

<MaterialTable
           title = "Group Keywords Preview"
           columns = {[
                 { title : "Group", field : "group" },
                 { title : "Weight", field : "weight" }
           ]}
           options={{
               selection: true
           }}
           data = { my data ...}
           detailPanel = {[
                    {
                        tooltip : 'Show Group',
                        render : rowData => {
                              return <my react component .. />
                        }
                    }
            ]}

/>

材料表是否有任何标志/方法来以编程方式切换行？我可以用另一种方式吗？

提前致谢。

4

2 回答 2

3 
class DetailPanelWithRowClick extends React.Component {
  constructor(props) {
    super(props);
    
    this.tableRef = React.createRef();
  }
  

  render() {
    return (
    <>
      <MaterialTable
        tableRef={this.tableRef}
        columns={[
          { title: 'Name', field: 'name' },
          { title: 'Surname', field: 'surname' },
          { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
          {
            title: 'Birth Place',
            field: 'birthCity',
            lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
          },
        ]}
        data={[
          { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
          { name: 'Zerya Betül', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        ]}
        title="Detail Panel With RowClick Preview"
        detailPanel={rowData => {
          return (
            <iframe
              width="100%"
              height="315"
              src="https://www.youtube.com/embed/C0DPdy98e4c"
              frameborder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
            />
          )
        }}
        onRowClick={(event, rowData, togglePanel) => togglePanel()}
      />
      <button onClick={() => {
        this.tableRef.current.onToggleDetailPanel([0], rowData => <div>{rowData.name}</div>)
      }}>toggle second line</button>
      </>
    )
  }
}

您可以使用上述示例中的用法。

于 2020-07-08T21:21:10.797 回答
0

是的，你可以这么做。材料表通过向每个项目添加一个 tableData 对象来改变您的数据。

它看起来像这样：

"tableData":{"id":0,"checked":true}}

这控制了行 ID，如果项目被选中以及过滤等其他事情。通过将选中的键更改为 true/false，您可以以编程方式控制项目的选择。

希望这可以帮助。快乐编码。

于 2019-08-12T11:33:41.317 回答