Problem with a dynamic width in a grid. Looks like a lack of measurement on the first render.

[Mati20041]

Hi!

My first thought was to create an issue, but I decided to ask here for help if I'm not doing something wrong.

Version

3.0.0-beta.68

What I'm trying to achieve

A grid with virtualised rows and columns where width is dynamic and height can be fixed.

What's the problem

The animation below shows how Column 0 recalculates width based on the widest cell (header). When I use also random lorem ipsum it gets worse with horizontal scroll but fixes over recalculations.

What I've tried already:

Mostly all of the examples. The closest one is React Example: Dynamic but it focuses on dynamic height.

I tried to change the example to a such state where I could have a single row and dynamic widths of the columns. The closest behaviour I could achieve is a state, where on the first render some columns have the default value from estimateSize function. After scrolling/being rendered again they recalculate properly.

Demo of the problem: Codesandbox
(I recommend to horizontally scroll to column 3 where worse problem occurs, but gets fixed while scrolling vertically)

Perhaps someone will know what's the problem here or point out whether it is a bug. I will be glad for any help.

[Mati20041]

This issue #23 pointed me to something that helped me to create something that actually works (although I had to read it multiple times to understand ;) )

It turns out the measurements taken by virtualizer.measureElement overrides indexed cell each time it is called (because all cells in the columns has the same data-index) and the latest measurement wins (in my example the narrower cell which was on the bottom). Configuring a custom measurer, which takes the maximum measured value like below seems to fix the unwanted behaviour.

import {measureElement} from "@tanstack/react-virtual";

// in component
  
  // init an array which will hold the maximum width for each column
  const colWidths = React.useRef(Array.from({ length: columns }, () => 0));

  const columnVirtualizer = useVirtualizer({
    horizontal: true,
    count: columns,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,
    overscan: 5,
    measureElement: (element, entry, virtualizer) => {
      const size = measureElement(element, entry, virtualizer); // call the default one
      const index = Number.parseInt(element.getAttribute("data-index") as any);
      if (colWidths.current[index] < size) {
        colWidths.current[index] = size;
      }
      return colWidths.current[index];
    },
  });

This code makes the table act exactly as intended. I'm aware it could still change the width of a column if wider content appears, but this is acceptable in my use case.

CodeSandbox: https://codesandbox.io/p/sandbox/tanstack-virtual-grid-dynamic-width-fpcqv9

I just wonder if there are some other better ways.
Wouldn't it be useful to put an example of "how to make a dynamic column width in a grid" as one of the examples?

[piecyk]

Yes this is correct

Wouldn't it be useful to put an example of "how to make a dynamic column width in a grid" as one of the examples?

i think so, as in past we alredy had exactly same use case with same outcome.

[hasakilol]

Hi, I want to support dynamic row height at the same time. So I emulate your code like this:

const rowVirtualizer = useVirtualizer({
    horizontal: false,
    count: data,
    estimateSize: () => 31,
    overscan: 5,
    getScrollElement: () => parentRef.current,
    measureElement: (element, entry, virtualizer) => {
      const size = measureElement(element, entry, virtualizer);
      const index = Number.parseInt(element.getAttribute("row-index") as any);

      if (rowHeights.current[index] < size) {
        rowHeights.current[index] = size;
      }
      return rowHeights.current[index];
    },
});

but doesn't work. Any clue? thanks!

Here is link: CodeSandBox

[hasakilol]

#972 problem solved.