Demos available here: http://bvaughn.github.io/react-virtualized/
Install react-virtualized
using npm.
npm install react-virtualized --save
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.size}
rowHeight={20}
rowRenderer={index => list[index]}
/>,
document.getElementById('example')
);
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.