Demos available here: http://bvaughn.github.io/react-virtualized/
Install react-virtualized using npm.
npm install react-virtualized --saveAPI documentation available here.
Below is a simple VirtualScroll example. Each row in the virtualized list is rendered through the use of a rowRenderer function for performance reasons. This function must return an element with a unique key and must fit within the specified rowHeight.
Note that it is very important that rows do not have vertical overflow. This will make scrolling the list difficult (as individual items will intercept the scroll events). For this reason it is recommended that your rows use a style like overflow-y: hidden.)
import React from 'react';
import ReactDOM from 'react-dom';
import { VirtualScroll } from 'react-virtualized';
// List data as an array of strings
const list = [
'Brian Vaughn'
// And so on...
];
// Render your list
ReactDOM.render(
<VirtualScroll
width={300}
height={300}
rowsCount={list.length}
rowHeight={20}
rowRenderer={
index => (
<div key={index}>
{list[index]}
</div>
)
}
/>,
document.getElementById('example')
);Below is a very basic FlexTable example. This table has only 2 columns, each containing a simple string. Both have a fixed width and neither is sortable. See here for a more full-featured example including custom cell renderers, sortable headers, and more.
import React from 'react';
import ReactDOM from 'react-dom';
import { FlexTable, FlexColumn } from 'react-virtualized';
// Table data as a array of objects
const list = [
{ name: 'Brian Vaughn', description: 'Software engineer' }
// And so on...
];
// Render your table
ReactDOM.render(
<FlexTable
width={300}
height={300}
headerHeight={20}
rowHeight={30}
rowsCount={list.length}
rowGetter={index => list[index]}
>
<FlexColumn
label='Name'
dataKey='name'
width={100}
/>
<FlexColumn
width={200}
label='Description'
dataKey='description'
/>
</FlexTable>,
document.getElementById('example')
);Use GitHub issues for requests.
I actively welcome pull requests; learn how to contribute.
Changes are tracked in the changelog.
react-virtualized is available under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent