Adding a gap/spacing between items

[rasgo-cc]

Is your feature request related to a problem? Please describe. Not being able to add spacing (gap) between items.

Describe the solution you'd like I'd like to have something like the gap prop in @tanstack/react-virtual so you can pass the exact amount of pixels that should be placed in between items. Passing that value should allow the virtualization code to account for that and thus calculate the item offsets correctly.

Describe alternatives you've considered So far the only way I found to have spacing between items is to add a top and bottom margin (so it's vertically centered). This is inconvenient as it will also add a margin to the top and bottom of the list, not just in between the items.

Additional context (none)

[aeharding]

This could be done with a custom item component, have you tried that?

[rasgo-cc]

This could be done with a custom item component, have you tried that?

Thank you for suggesting @aeharding !

I tried this (see below) but this doesn't work as findStartIndex() gives me the index of the first visible item, not the first item in the virtualized list (visible + overscan items). When I scroll and index 1 becomes the first visible item, the index 0 is still in the virtualized list so it doesn't work as I intended.

  const ItemComponent = forwardRef(
    (props: CustomItemComponentProps, extRef: any) => {

      let offset = 0;
      if (componentRef.current) {
        offset = componentRef.current.findStartIndex();
      }
      const gap = 10;

      return (
        <div
          {...props}
          ref={extRef}
          style={{
            ...props.style,
            top: (props.style.top as number) + gap * (props.index - offset),
          }}
        />
      );
    }
  );

Any way for me to get the first index of the virtualized list?

[aeharding]

Does props.index work? That should be the absolute index

[rasgo-cc]

It doesn't work. I'm sure I'm missing something in the logic though but I don't know what. Just created a sandbox: https://stackblitz.com/edit/react-starter-tailwindcss-la2clkwt?file=src%2FApp.tsx

You can see the fist items have a gap (the first virtualized window?) but then spacing gets messed up. Any ideas?

[inokawa]

I agree with that @tanstack/react-virtual like gap prop is needed. However, there is no clear schedule for now.

You can do the similar thing by manually adding margin-top to the last item and margin-bottom to the others like:

<VList>
  {array.map((d, i) => <Component key={i} isLast={i === array.length - 1}>{d}</Component> )}
</VList>