React-Table - Как объединить useResizeColumns с липким заголовком в таблице Material-UI

Question

В последней версии (7.5.x) React-Table есть ли способ добавить изменение размера столбца в таблицу Material-UI без нарушения свойства Sticky Header таблицы Material-UI?

С одной стороны, добавление useFlexLayout или useBlockLayout нарушает "липкий заголовок", с другой стороны, изменение размера столбца не работает без useFlexLayout или useBlockLayout...

В примере codeandbox обаuseBlockLayout & useResizeColumns установлены и stickyHeaderигнорируется. однаждыuseBlockLayout & useResizeColumns закомментированы, stickyHeader снова работает.

Answer 1

Вот мое решение на codeandbox. Надеюсь, это то, что вам нужно.

Я добавил к элементам несколько встроенных стилей:

<MaUTable
  ...
  style={{ display: "flex", flexDirection: "column" }}
>
<TableHead
    style={{
      position: "sticky",
      top: 0,
      alignSelf: "flex-start",
      zIndex: 1
    }}
  >
...
<TableBody style={{ position: "relative", zIndex: 0 }}>