How do I render a list or table of my own elements with react-window?

Question

I have an array of thousands of objects, like

const people = [
    { name: "Alan", age: 36, score: 103428 },
    { name: "Belinda", age: 40, score: 1482822 },
    { name: "Carol", age: 51, score: 78492391 },
    ...
];

I want to display a table where each person object is a row, but there are so many of them and their score field updates every few seconds, and it bogs the user's machine down.

This seems the perfect opportunity to try out react-window. Only say 20 of these objects will be onscreen at any moment, so I'll just display and re-render the ones that are in the viewport right now.

But I just can't make sense of the react-window examples or documentation. Here's the example it gives for a fixed-size grid:

const Cell = ({ columnIndex, rowIndex, style }) => (
  <div style={style}>
    Item {rowIndex},{columnIndex}
  </div>
);

const Example = () => (
  <Grid
    columnCount={1000}
    columnWidth={100}
    height={150}
    rowCount={1000}
    rowHeight={35}
    width={300}
  >
    {Cell}
  </Grid>
);

There's some kind of magic happening with how a FixedSizeGrid renders its children but I don't know what it is, and I don't know how I could replace Cell with a component of my own. Where are the style, columnIndex and rowIndex props coming from? I'm reading the source code and can't figure that out. It's not mentioned anywhere that you can give an array/collection to one of the react-window components so how do you map an array to one? The only way I can see to do it is by indexing into my people array, but that feels... wrong? Wouldn't that lead to sorting becoming very expensive for example?

How do I render a list or table of my own elements with react-window?

0 Answers0