react-window spacing between items list

Question

I am trying to integrate react-window with react-window-infinite-loader and so far, I have been successful, but facing an issue where I couldn't find a way to style my list item to create more spacing between the list item.

Here is my code below

export default function AutoComplete({}: AutoCompleteProps) {
  //testdata length is 35000
  const LOADING = 1;
  const LOADED = 2;

  const isItemLoaded = (index) => testData[index]?.loading === LOADED;
  const loadMoreItems = (startIndex, stopIndex) => {
    for (let index = startIndex; index <= stopIndex; index++) {
      testData[index].loading = LOADING;
    }
    return new Promise<void>((resolve) =>
      setTimeout(() => {
        for (let index = startIndex; index <= stopIndex; index++) {
          testData[index].loading = LOADED;
        }
        resolve();
      }, 2500)
    );
  };
  const Row = ({ index, style }) => {
    let label;
    if (testData[index].loading === LOADED) {
      label = `${testData[index].title}`;
    } else {
      label = "Loading...";
    }
    const listStyle = { ...style };
    return (
      <div
        className={`whitespace-nowrap overflow-hidden text-ellipsis`}
        style={style}
      >
        <div>{label}</div>
      </div>
    );
  };

  return (
    <InfiniteLoader
      isItemLoaded={isItemLoaded}
      itemCount={testData.length}
      loadMoreItems={loadMoreItems}
    >
      {({ onItemsRendered, ref }) => (
        <List
          style={{ position: "absolute", width: "100%", marginTop: 50 }}
          className="absolute top-[110%] z-50 bg-white w-full"
          height={250 - 40}
          itemCount={testData.length}
          itemSize={30}
          width={300}
          onItemsRendered={onItemsRendered}
          ref={ref}
        >
          {({ index, style }) => <Row index={index} style={style} />}
        </List>
      )}
    </InfiniteLoader>
  );
}

The output is shared as you can see the list items are very close to each other and I need to add some padding maybe to make it look cleaner.

@UNRIVALLEDKING nope its giving the style from top or bottom of the list but never between the row, and also the parent div works on absolute top positioning, here is a codesanbox repo if you want to try https://codesandbox.io/s/4lvznx?file=/src/App.js — Naruto, Jul 07 '23 at 06:35
Can you share an example of what you're trying to achieve? What I am trying to understand is do you need padding in each of the lines (in which case gap between the lines will increase along with space around all the rows put together) or do you wish to merely add space on all the sides within (in which case the space between the line will remain the same)? — Suryasish Paul, Jul 07 '23 at 17:48
the first point, padding in each row so the list looks neat and each row has proper spacing with another row — Naruto, Jul 10 '23 at 06:46
Is the following what you're trying to achieve or something else? https://codesandbox.io/s/cold-glade-hcgy8q?file=/src/App.js Let me know if it is, in which case I'll add an answer. — Suryasish Paul, Jul 10 '23 at 07:09
exactly like that, cant figure it out what you did, can you please explain ? — Naruto, Jul 11 '23 at 04:52
I have added an answer below with an explanation and a link to the docs. If it is what you've been looking for, I could really use a validation and an upvote. In case, you're looking for something else, please let me know so I can make edits. Thank you! — Suryasish Paul, Jul 11 '23 at 06:22

score 2 · Accepted Answer · answered Jul 11 '23 at 06:19

Increasing the value of <List></List>'s height prop and proportionately increasing the value of the itemSize prop will solve the problem. Here's a sandbox for your reference: https://codesandbox.io/s/cold-glade-hcgy8q?file=/src/App.js

Also, you can read about the props mentioned in the docs here: https://react-window.vercel.app/#/api/FixedSizeList

Good luck!

score 1 · Answer 2 · answered Jul 08 '23 at 06:54

1

Here is codesandbox repo with the desired fixes. the issue was due to the style props you were passing.

that style props was adding these styles I overwrote this with did some minor changes in List and ListItem class

you can change margin as feel will look good now.

answered Jul 08 '23 at 06:54

UNRIVALLEDKING

265
3
15

this still doesnt works properly, try scrolling it down a little tooo much down and you may see the list items not being rendered, this is the same issue i am facing after trying multiple examples :) – Naruto Jul 10 '23 at 04:54
seems like we cant alter the "top" property – Naruto Jul 10 '23 at 05:05
Changing top wouldn’t make a difference in this case because the position is set to be relative. Top or any other such property only takes effect when the position is some form of absolute positioning (either absolute itself or sticky/fixed/etc.). – Suryasish Paul Jul 11 '23 at 06:24
@Naruto I scrolled till the end. it's rendering properly. [here is image](https://i.ibb.co/wdQJNPS/image.png) – UNRIVALLEDKING Jul 11 '23 at 13:43
strange doesnt render for me – Naruto Jul 11 '23 at 19:11

react-window spacing between items list

2 Answers2