2

In the latest version (7.5.x) of React-Table, is there a way to add the column resizing to a Material-UI table without breaking the 'Sticky Header' property of the Material-UI Table?

On one hand, adding 'useFlexLayout' or 'useBlockLayout' breaks the 'Sticky Header', on the other, column resizing isn't working without 'useFlexLayout' or 'useBlockLayout'...

In the codesandbox example, both useBlockLayout & useResizeColumns are set and the stickyHeader is ignored. Once useBlockLayout & useResizeColumns are commented out, the stickyHeader is working again.

Vladi Feldman
  • 872
  • 1
  • 8
  • 16

1 Answers1

1

Here is my solution on codesandbox. I hope this is what you need.

I`ve added some inline styles to the elements:

<MaUTable
  ...
  style={{ display: "flex", flexDirection: "column" }}
>
<TableHead
    style={{
      position: "sticky",
      top: 0,
      alignSelf: "flex-start",
      zIndex: 1
    }}
  >
...
<TableBody style={{ position: "relative", zIndex: 0 }}>
ShaDeRzz
  • 109
  • 2
  • THanks for your answer. Unfortunately, in your codesandbox, the table header doesn't resize together with the table (try making the table wider) – Vladi Feldman Mar 17 '21 at 14:20