Пользовательский рендеринг GroupRow (mbrn / MaterialTable) React

Question

Я настраиваю groupRow таблицы mbrn / material-table, но я не нахожу никаких документов для этого.

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>{' '}
          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

Answer 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