Add Gap Between Elements While Using React Virtualized

Question

I am using React-Virtualized to create a lazy loading infinite list.

https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md

However, I am not able to create a gap between the rendered divs, since they are absolutely positioned and top is calculated dynamically.

I've tried the following, however no luck. Any ideas on how to add this gap between each element? Thanks!

<AutoSizer disableHeight>
   {({width}) => (
              <List
                onRowsRendered={onRowsRendered}
                ref={registerChild}
                rowCount={rowCount}
                rowRenderer={rowRenderer}
                width={width - 30}
                rowHeight={175}
                height={this.state.height - 64}
                style={{
                  paddingTop: 15,
                  boxSizing: 'content-box',
                }}
                containerStyle={{
                  position: 'relative',
                  overflow: 'visible',
                }}
              />
    )}
</AutoSizer>

score 2 · Accepted Answer · answered Dec 26 '18 at 15:39

I ended up solving for the padding by adding a div inside the CellMeasurer as a parent container to provide the padding.

The div is the absolute positioned container, whereas the Card is padded and shows the box shadow.

<CellMeasurer
      cache={this.cache}
      columnIndex={0}
      key={key}
      rowIndex={index}
      parent={parent}
    >
      {({ measure }) => (
        <div
          className={s.listItem}
          style={style}
          onLoad={measure}
          key={index}>
            <Card>

Is this still the way to go? – mleister Nov 23 '22 at 22:01 — mleister, Nov 23 '22 at 22:01

score 0 · Answer 2 · answered Nov 23 '22 at 23:26

Build a div using padding-bottom arround your rendered item.

Example:

<div style={paddingBottom:10}>
  // Your item component goes here
</div>

I also asked on GitHub what's the prefered way. See the question here: https://github.com/bvaughn/react-virtualized/issues/1786

score 0 · Answer 3 · answered Jan 28 '23 at 19:16

You can just decrease the height, if one item is like 50 pixels and you want some spacing , do that to your cell renderer (rowRenderer prop): style={{ ...style, height: CELL_HEIGHT - ROW_SPACING }}

So item will be placed on the exact same places based on the calculations of the library but they will be smaller and you will have space between them.

That would be your List component: <List rowHeight={CELL_HEIGHT} .... />

Add Gap Between Elements While Using React Virtualized

3 Answers3