React-Table - How to combine useResizeColumns with sticky Header in Material-UI table

user_11523019 0
Viewed 1174

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.

material-ui react-table-v7 react-table reactjs
1 Answers

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 }}>
user_94750100
Related