Column virtulization with header groups

[DeveloperParth]

So Im trying to get column virtulization and header groups to work togather using react-virtual by TanStack and ive been following the offical column virtulization example but ive removed row virtulization since it was not needed. Ive 1 level deep header groups(so depth 0,1) now when rendering virtualized headers ive for example 13 headers at depth 0 and 49 at depth 1 and now it treats grouped header as same as normal headers, the issue i had ran into was header is undefined which was due to index being out of bound for headers at depth 0. I cant figure out how to solve it there is the option to render headers without virtulization but that seemed to have its own caveats.

[CavalcanteLeo]

So Im trying to get column virtulization and header groups to work togather using react-virtual by TanStack and ive been following the offical column virtulization example but ive removed row virtulization since it was not needed. Ive 1 level deep header groups(so depth 0,1) now when rendering virtualized headers ive for example 13 headers at depth 0 and 49 at depth 1 and now it treats grouped header as same as normal headers, the issue i had ran into was header is undefined which was due to index being out of bound for headers at depth 0. I cant figure out how to solve it there is the option to render headers without virtulization but that seemed to have its own caveats.

hey mate, I'm facing the same problem, have u figured it out?

[Gokul-Nath-27]

Same problem facing here, Have you found a solution for it @CavalcanteLeo ?

[blakesenn]

I was running into a very similar issue. I had two header groups, the first group (depth 0) having less than half the headers as the second group (depth 1).

This may not be the ideal solution you are looking for, but I was able to solve this issue while keeping the headers virtualized by rendering the headers in the first header group as divs with absolute positioning. So instead of using two header groups, I opted for just one and rendered the "header" that was at depth 0 with absolute position over the actual headers.

The example below shows how you could render the "header" that you had at depth 0 to span across multiple headers. You'll notice that the div containing text Types of Candy is rendered only on the first column in the "group". It uses absolute positioning and its width is calculated by multiplying the column width by the number of columns it should span (number of columns in that group). You will likely want to adjust your column header heights to make room for the new header div.

Please let me know if you need more details or a better example! I hope this helps.

Example:

  const columnWidth = 100
  const numberOfColumnsToSpan = 2

  const columnOne = {
    Header: () => {
      return (
        <>
          <div
            style={{
              position: 'absolute',
              width: `${columnWidth * numberOfColumnsToSpan}px`,
            }}
          >
            Types of Candy
          </div>
          <div>Chocolate</div>
        </>
      )
    },
    Cell: ({ value }) => {
      return <div>{value}</div>
    },
  }

  const columnTwo = {
    Header: () => {
      return <div>Skittles</div>
    },
    Cell: ({ value }) => {
      return <div>{value}</div>
    },
  }

[Gokul-Nath-27]

@blakesenn Can you please provide a sandbox link for this solution? Thanks in advance.