Ant Design Table virtualization height constraints

The Virtualization Requirement

p>To enable virtualization in an Ant Design Table, you must provide an explicit numeric value to the scroll.y property. The virtualization engine uses this height to calculate the scroll offset and determine which specific rows are currently within the visible viewport. If this value is undefined or set to a percentage that resolves to zero during the initial mount, the engine will fail to render rows, often resulting in an empty table.

Recommended Approach for Responsive Height

To maintain responsiveness while using virtualization, the most effective strategy is to use a ResizeObserver to measure the height of the parent container. This allows the table to adapt to dynamic layouts without hardcoding pixels.

1. Wrap the Table in a container with a defined layout (e.g., using CSS flex-grow: 1 or a specific grid height).
2. Implement a ResizeObserver on that container to track height changes.
3. Store the measured height in a state variable and pass it to the scroll={{ y: height }} prop.

const [tableHeight, setTableHeight] = useState(500);

useEffect(() => {
  const observer = new ResizeObserver((entries) => {
    if (entries[0]) {
      setTableHeight(entries[0].contentRect.height);
    }
  });
  observer.observe(containerRef.current);
  return () => observer.disconnect();
}, []);

return (
  
     />
  
);

Dynamic Updates and Re-renders

The component does support dynamic height updates. When the scroll.y value changes, the table triggers a re-calculation of the virtual window. This process does not trigger a full re-render of the dataset itself; instead, it simply repositions or updates the existing DOM nodes to match the new boundaries. This makes it performant enough for window resizing or layout shifts.

Assumption: This solution assumes you are using Ant Design v4.x or v5.x, where the virtual prop is supported.