@types/react-virtualized

What is @types/react-virtualized?

@types/react-virtualized provides TypeScript definitions for the react-virtualized library, which is used for efficiently rendering large lists and tabular data by only rendering visible items.

What are @types/react-virtualized's main functionalities?

List

The List component is used to render a large number of rows efficiently by only rendering the rows that are visible within the viewport.

import { List, ListRowRenderer } from 'react-virtualized';

const rowRenderer: ListRowRenderer = ({ index, key, style }) => (
  <div key={key} style={style}>
    Row {index}
  </div>
);

const MyList = () => (
  <List
    width={300}
    height={300}
    rowCount={1000}
    rowHeight={20}
    rowRenderer={rowRenderer}
  />
);

Grid

The Grid component is used to render a large grid of items efficiently by only rendering the cells that are visible within the viewport.

import { Grid, GridCellRenderer } from 'react-virtualized';

const cellRenderer: GridCellRenderer = ({ columnIndex, key, rowIndex, style }) => (
  <div key={key} style={style}>
    Cell {rowIndex},{columnIndex}
  </div>
);

const MyGrid = () => (
  <Grid
    columnCount={100}
    columnWidth={100}
    height={300}
    rowCount={100}
    rowHeight={30}
    width={300}
    cellRenderer={cellRenderer}
  />
);

Table

The Table component is used to render tabular data efficiently by only rendering the rows and columns that are visible within the viewport.

import { Column, Table } from 'react-virtualized';

const MyTable = () => (
  <Table
    width={300}
    height={300}
    headerHeight={20}
    rowHeight={30}
    rowCount={100}
    rowGetter={({ index }) => ({ name: `Name ${index}`, age: index })}
  >
    <Column label='Name' dataKey='name' width={100} />
    <Column label='Age' dataKey='age' width={100} />
  </Table>
);

Other packages similar to @types/react-virtualized

react-window

react-window is a lightweight alternative to react-virtualized for rendering large lists and grids efficiently. It offers a simpler API and better performance for most use cases.

react-infinite

react-infinite provides infinite scrolling capabilities for large lists. It is simpler than react-virtualized but does not offer as many features for grid and table rendering.

react-virtual

react-virtual is a modern, lightweight library for virtualizing large lists and tables. It offers a more modern API and better performance compared to react-virtualized.

README

Installation

npm install --save @types/react-virtualized

Summary

This package contains type definitions for react-virtualized (https://github.com/bvaughn/react-virtualized).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-virtualized.

Additional Details

• Last updated: Wed, 06 Dec 2023 07:07:09 GMT
• Dependencies: @types/prop-types, @types/react

Credits

These definitions were written by Kalle Ott, John Gunther, Konstantin Nesterov, Steve Zhang, Brandon Hall, Sebastian Busch, and Adam Zmenak.