Virtuoso

The most powerful virtual list component for React

ReactScrollingVirtual list
petyosi/react-virtuosovirtuoso.devreact-virtuoso

README

npm version

React Virtuoso is the most powerful React virtual list/table component, full stop. Here's why:

- Variable sized items out of the box; no manual measurements or hard-coding item heights is necessary;
- Support for reverse (bottom up) scrolling and prepending items (chat, feeds, etc);
- Grouped mode with sticky headers;
- Responsive grid layout;
- Table Support;
- Automatic handling of content resize;
- Custom Header, Footer, and empty list components;
- Pinned top items;
- Endless scrolling, press to load more;
- Initial top most item index;
- Scroll to index method.

For live examples and documentation, check the documentation website.

Sponsors

Stream

React Virtuoso is proudly sponsored by Stream, the leading provider in enterprise grade Feed & Chat APIs. To learn more about Stream, click here.

If you are using Virtuoso for work, sponsor it. Any donation helps a lot with the project development and maintenance.

Get Started


  1. ```sh
  2. npm install react-virtuoso
  3. ```

  1. ``` js
  2. import * as React from 'react'
  3. import * as ReactDOM from 'react-dom'
  4. import { Virtuoso } from 'react-virtuoso'

  6. const App = () => {
  7.   return <Virtuoso style={{ height: '400px' }} totalCount={200} itemContent={index => <div>Item {index}</div>} />
  8. }

  10. ReactDOM.render(<App />, document.getElementById('root'))
  11. ```

Grouped Mode


The GroupedVirtuoso component is a variant of the "flat" Virtuoso, with the following differences:

- Instead of totalCount, the component exposes groupCounts: number[] property, which specifies the amount of items in each group.
  For example, passing [20, 30] will render two groups with 20 and 30 items each;
- In addition the itemContent property, the component requires an additional groupContent property,
  which renders the group header. The groupContent callback receives the zero-based group index as a parameter.

Grid


The VirtuosoGrid component displays same sized items in multiple columns.
The layout and item sizing is controlled through CSS class properties, which allows you to use media queries, min-width, percentage, etc.

Table


The TableVirtuoso component works just like Virtuoso, but with HTML tables.
It supports window scrolling, sticky headers, sticky columns, and works with React Table and MUI Table.

Works With Your UI Library of Choice


You can customize the markup up to your requirements - check the Material UI list demo.
If you need to support reordering, check the React Sortable HOC example.

Documentation and Demos


For in-depth documentation and live examples of the supported features and live demos, check the documentation website.

Browser support


To support legacy browsers, you might have to load a ResizeObserver Polyfill before usingreact-virtuoso:

  1. ```
  2. import ResizeObserver from 'resize-observer-polyfill'
  3. if (!window.ResizeObserver)
  4.   window.ResizeObserver = ResizeObserver
  5. ```

Author


Petyo Ivanov @petyosi.

Contributing


Fixes and new Features


To run the tests, use npm run test.
An end-to-end browser-based test suite is runnable with npm run e2e, with the pages being `e2e/.tsx and the tests e2e/.test.ts`.

A convenient way to debug something is to preview the test cases in the browser.
To do that, run npm run browse-examples - it will open a crude UI that lets you browse the components in the e2e folder.

Docs


The documentation site is built with docusaurus and the content is available in the site/docs directory.
The API reference is generated from the doc comments in src/components.tsx.

License


MIT License.