Create Tables with Virtual Scrolling in a React App with the react-window Library

We can create tables that use virtual scrolling with the react-window library.

A virtual scrolling table is more efficient than a regular one since it loads the data only when it’s displayed on the screen.

In this article, we’ll look at how to create tables with the react-window library.

Installation

We can install the package by running:

yarn add react-window

or

npm install --save react-window

Creating the Table

We can create a simple table by writing:

App.js

import React from "react";
import { FixedSizeList as List } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";
import "./styles.css";

const Row = ({ index, style }) => (
  <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
    Row {index}
  </div>
);

const Table = () => (
  <AutoSizer>
    {({ height, width }) => (
      <List
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
      >
        {Row}
      </List>
    )}
  </AutoSizer>
);

export default function App() {
  return (
    <div className="App" style={{ height: 300 }}>
      <Table />
    </div>
  );
}

style.css

.List {
  border: 1px solid yellow;
}

.ListItemEven,
.ListItemOdd {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ListItemEven {
  background-color: yellow;
}

We created the Row component with that we use as the row.

It takes the index and style props with the index of the entry and the styles respectively.

The Table component uses the AutoSizer component from react-virtualized-auto-sizer to size the list and its items properly.

className is the class name for the list.

height is the height of the list, which is calculated automatically by AutoSizer .

itemCount has the number of rows.

itemSize has the number of items to load each time.

width has the width of the rows, which is also automatically calculated.

The Row component is added as the child of List to display it.

Then we set the height of the div in App to display the list.

Create a Table

We can create a table by using the Grid component.

For example, we can write:

import React, { forwardRef } from "react";
import { FixedSizeGrid as Grid } from "react-window";
import "./styles.css";
const GUTTER_SIZE = 5;
const COLUMN_WIDTH = 100;
const ROW_HEIGHT = 35;

const Cell = ({ columnIndex, rowIndex, style }) => (
  <div
    className="GridItem"
    style={{
      ...style,
      left: style.left + GUTTER_SIZE,
      top: style.top + GUTTER_SIZE,
      width: style.width - GUTTER_SIZE,
      height: style.height - GUTTER_SIZE
    }}
  >
    row {rowIndex}, col {columnIndex}
  </div>
);

const Table = () => (
  <Grid
    className="Grid"
    columnCount={20}
    columnWidth={COLUMN_WIDTH + GUTTER_SIZE}
    height={300}
    innerElementType={innerElementType}
    rowCount={100}
    rowHeight={ROW_HEIGHT + GUTTER_SIZE}
    width={400}
  >
    {Cell}
  </Grid>
);

const innerElementType = forwardRef(({ style, ...rest }, ref) => (
  <div
    ref={ref}
    style={{
      ...style,
      paddingLeft: GUTTER_SIZE,
      paddingTop: GUTTER_SIZE
    }}
    {...rest}
  />
));

export default function App() {
  return (
    <div className="App" style={{ height: 500 }}>
      <Table />
    </div>
  );
}

We create the Cell component for the table by getting the coumnIndex , rowIndex , and style .

style is passed to the style prop.

Also, we make a gutter by adding the GUTTER_SIZE to left and top and subtract it from width and height .

We display the rowIndex and columnIndex as the content.

The Cell s are used in the Grid component.

We set the columnCount to set the number of columns to display.

columnWidth sets the width of the column.

height has the height of the table.

innerElementType is a ref to the component with the given styles for the grid used for the cell container.

rowCount has the number of rows.

rowHeight has the row’s height.

width has the width of the table.

We then use the Table component in our App component.

Now we should see a 400px by 300px table displayed.

Conclusion

We can create a table with the react-window component by setting the computed dimensions to the cells and table container.