


To do that, run npm run browse-examples - it will open a crude UI that lets you browse the components in the e2e folder. Petyo Ivanov Contributing Fixes and new FeaturesĪn 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.Ī convenient way to debug something is to preview the test cases in the browser. To support legacy browsers, you might have to load a ResizeObserver Polyfill before using react-virtuoso: import ResizeObserver from 'resize-observer-polyfill' Documentation and Demosįor in-depth documentation and live examples of the supported features and live demos, check the documentation website. If you need to support reordering, check the React Sortable HOC example. You can customize the markup up to your requirements - check the Material UI list demo. It supports window scrolling, sticky headers, sticky columns, and works with React Table and MUI Table. The TableVirtuoso component works just like Virtuoso, but with HTML tables. The layout and item sizing is controlled through CSS class properties, which allows you to use media queries, min-width, percentage, etc.

The VirtuosoGrid component displays same sized items in multiple columns. The groupContent callback receives the zero-based group index as a parameter. In addition the itemContent property, the component requires an additional groupContent property,.Instead of totalCount, the component exposes groupCounts: number property, which specifies the amount of items in each group.įor example, passing will render two groups with 20 and 30 items each.The GroupedVirtuoso component is a variant of the "flat" Virtuoso, with the following differences: Import * as React from 'react' import * as ReactDOM from 'react-dom' import ReactDOM.
