Infinite table height (Must be fixed, but how to deal with diff screen sizes?)
The table wrapper must have a fixed height when using infinite tables, right?
(https://tanstack.com/table/latest/docs/framework/react/examples/virtualized-infinite-scrolling)
<div
className="container"
onScroll={e => fetchMoreOnBottomReached(e.target as HTMLDivElement)}
ref={tableContainerRef}
style={{
overflow: 'auto', //our scrollable table container
position: 'relative', //needed for sticky header
height: '600px', //should be a fixed height
}}
>
The problem is that the fixed height does not fit perfectly in every screen size. Has someone found a way to deal with this? I would appreciate any tips from the community on this!
Thanks a bunch, guys!
TanStack | High Quality Open-Source Software for Web Developers
Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.
1 Reply
reduced-jadeOP•11mo ago
If someone comes across this issue, I figured you could save the height of the parent component in a state as soon as the window object is available:
const [componentParentHeight, setComponentParentHeight] = React.useState<number | null>(null)
React.useEffect(() => {
if (window) {
setComponentParentHeight(window.innerHeight)
console.log(window.innerHeight)
}
})
And then you can use that value to calculate the height of your table:
<div
className="rounded-t-lg border border-b-0 container px-6"
onScroll={e => fetchMoreOnBottomReached(e.target as HTMLDivElement)}
ref={tableContainerRef}
style={{
overflow: 'auto', //our scrollable table container
position: 'relative', //needed for sticky header
height:
${componentParentHeight! - 272}px, //should be a fixed height
width: '100%', // Ensure the div occupies the full width of its parent
maxWidth: '100%', // Ensure the div does not exceed the width of its parent
}}
>
I think that's pretty much it