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

我正在自定义mbrn / material-table的groupRow,但是我找不到用于此操作的任何文档。

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

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

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

我尝试使用MTableBody,但记录未显示

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

 <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>{' '}
          alert{alerts.length > 1 ? 's' : ''}
          <ChevronRight
            classname="text-muted"
            style={{ fontSize: '30px' }}
          />
        </div>
      </button>
      <MTableBody {...props} />
    </td>
  </tr>

这是我的代码的样子。太困惑了,我不知道要使它起作用还缺少什么

CodeSandBox:https://codesandbox.io/s/festive-bell-5d76e

chimeralinux 回答:自定义GroupRow渲染(mbrn / MaterialTable)React

文档供您参考,

  

您可以使用覆盖gcm_sender_id

覆盖分组的行组件

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

这是原始组件-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

本文链接:https://www.f2er.com/3153885.html

大家都在问