How to combine GrouppedVirtuoso & VirtuosoGrid?

[Ayomits]

I need to display grid inside of each group. But I could not find classes or components for customizing this behavior:

'use client';
import { useWatchHistoryItems } from './use-watch-history-items';

import { GroupedVirtuoso } from 'react-virtuoso';
export function WatchHistoryList({
  items,
}: ReturnType<typeof useWatchHistoryItems>) {
  const groupCounts = items.map(s => s.items.length);

  return (
    <GroupedVirtuoso
      groupCounts={groupCounts}
      groupContent={groupIndex => {
        const group = items[groupIndex];
        return <h4 className='text-lg font-semibold'>{group.date}</h4>;
      }}
      components={{
        List: props => <div {...props} className='flex flex-col gap-1 bg-red-500' />,
        Group: props => <div {...props} className='flex flex-col gap-1 bg-blue-500' />,
        Item: props => <div {...props} className='flex flex-col gap-1 bg-green-500' />
      }}
      itemContent={(idx, groupIndex) => {
        return idx
      }}
      useWindowScroll
      overscan={400}
    />
  );
}

[misha-erm]

hi @Ayomits, did you find a good solution?

Initially I tried to render it like a collection of VirtuosoGrid, e.g.:

rows.map(() => (
  <div>
    <div>header</div>
    <VirtuosoGrid
      ...
      useWindowScroll
    />
  </div>
))

And it seems to work, but there are definitely some downsides.

Also was thinking about pushing it further and nesting VirtuosoGrid inside GroupedVirtuoso, e.g. rendering it as itemContent

But not sure if it's a good idea, sounds like there might be a lot of overhead from each virtuoso instance

[Ayomits]

I've found solution. You can use single VirtuosoGrid for not nested groups
The data structure will looks like this:

["header1", {...item}, {...item}, "header2"]

Using simple checks you can resolve headers and real objects

const data = ["header1", {title: "title"}, {title: "title"}, "header2", {title: "title"}]

<VirtuosoGrid totalCount={data.length} data={data} itemContent={(_, data) =>{
  const isHeader = typeof data === "string"
  
  return (
    <div>{isHeader ? data : data.title}</div>
  )
} />

But this solution looks not good, but it works...

[misha-erm]

Nice, also thought about it.
And I assume you then overwrite styles of header item containers so they occupy the whole row, right?

I was a bit nervous about this approach because of the mention that it supports only equally-sized items :)

thanks for the response 🙇🏻