Implement table record virtualizer back #2839
Conversation
Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
| @@ -114,6 +116,7 @@ export const TableCellContainer = ({ | |||
| <StyledCellBaseContainer | |||
| onMouseEnter={handleContainerMouseEnter} | |||
| onMouseLeave={handleContainerMouseLeave} | |||
| style={{ width }} | |||
There was a problem hiding this comment.
Hey @charlesBochet,
The virtualizer's requirement for absolute positioning is affecting the table body layout. As a result, the natural dimensions are compromised, and this impacts the cell widths. To address this, I've manually adjusted the widths to match those of the table header cells.
There was a problem hiding this comment.
@gitstart-twenty I've left comment and proposed another strategy
front/package.json
Outdated
| @@ -16,6 +16,7 @@ | |||
| "@hookform/resolvers": "^3.1.1", | |||
| "@sniptt/guards": "^0.2.0", | |||
| "@tabler/icons-react": "^2.30.0", | |||
| "@tanstack/react-virtual": "^3.0.0", | |||
There was a problem hiding this comment.
@gitstart-twenty let's not re-add tanstack, I don't think it's useful actually, it's overkill and the API of this library is not great.
I think we need something simpler.
Could you create a component Virtualizer in ui/utilities/virtualizer taking the following code: https://github.com/NightCafeStudio/react-render-if-visible/blob/main/src/render-if-visible.tsx (it seems to be what we need but not maintained anymore)
Then use it in RecordTableBody to wrap a row. Should be simpler and achieving the same result.
I don't think we need to virtualize commands for now btw :)
There was a problem hiding this comment.
Alright, on this
Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Fixes #2728