自定义 GroupRow 渲染 (mbrn/MaterialTable) React

Posted 2023-02-22

【中文标题】自定义 GroupRow 渲染 (mbrn/MaterialTable) React

【英文标题】：Custom GroupRow rendering (mbrn/MaterialTable) React

【发布时间】：2020-03-02 16:37:24

【问题描述】：

我正在自定义 mbrn/material-table 的 groupRow，但是我没有找到任何文档。

https://material-table.com/#/docs/features/grouping

到目前为止，我设法使 groupRow 及其工作正常。但是现在我不知道如何在扩展 groupRow 时呈现表格行。

我尝试使用MTableBody，但没有显示记录

 <tr className="MuiTableRow-root">
    <td
      className="MuiTableCell-root MuiTableCell-alignLeft MuiTableCell-paddingNone MuiTableCell-body py-2"
      colSpan=visiblecolumns + isGroupedAndHidden
    >
      <button className="d-flex Card w-100">
        <div className="ml-3 text-left">
          <div className="text--bold text--muted text--xs">
            props.groups[0].title
          </div>
          <div className="pt-1 pb-1">
            groupheader.title == 'Priority' ? (
              <Priority value=groupData.value />
            ) : groupheader.title == 'Time' ? (
              <DateFormatter value=groupData.value relative=true />
            ) : (
              groupData.value
            )
          </div>
        </div>
        <div className="ListGroupHeader__meta d-flex align-items-center justify-content-end">
          <span className="ListGroupHeader__count ml-3 mr-1">
            alerts.length
          </span>' '
          alertalerts.length > 1 ? 's' : ''
          <ChevronRight
            className="text-muted"
            style= fontSize: '30px' 
          />
        </div>
      </button>
      <MTableBody ...props />
    </td>
  </tr>

这就是我的代码的样子。我很困惑，我不知道让它工作缺少什么

代码沙盒：https://codesandbox.io/s/festive-bell-5d76e

【问题讨论】：

你能设置一个codesandbox.io的例子，让我们可以看到整个画面吗？

代码沙盒：codesandbox.io/s/festive-bell-5d76e

【参考方案1】：

由您的参考提供，文档说

您可以通过覆盖components.GroupRow 来覆盖分组的行组件

这正是您所做的，您高估了整个组件，但该组件有很多您错过的功能，例如扩展和显示组的内容。

这是原始组件 - https://github.com/mbrn/material-table/blob/master/src/components/m-table-group-row.js

所以你要做的就是复制和更改或创建你自己的具有相同功能的组件。

在下一个示例中，我采用了原始组件并根据您的结构对其进行了更改（这远非完美，只是向您展示了方法）。 我复制了 MTableGroupRow 和 MTableCell（因为 Cell 组件是 TableRow 的一部分并且必须更改）并将它们称为 CustomGroupRow 和 CustomCell。

https://codesandbox.io/s/frosty-forest-su2dl