React Virtual Grid
High performance virtual grid. This is a low level component for building fast tables. This component does not load any data and is not intended to be a drop-in widget. Some React and purist principles might be sacrificed for maximum performance.
Features
- High performance
- Virtual rows + columns
- Dynamic per-row heights and per-column widths
- Fixed headers, footers, left columns, right columns
- Column + row resizing
- Custom cell rendering
Setup
npm install react-virtual-grid
Usage
const columnCount = 4000;const rowCount = 4000; Component { return <Grid = = = = = = = = = = = /> ; } { // calculate the width, or null if you're not sure yet because data hasn't loaded return 128; } { // calculate the height, or null if you're not sure yet because data hasn't loaded return 32; } { const colIndex colLeft width = columnData; const rowIndex rowTop height = rowData; const cellNumber = rowIndex * thisstatecolumnCount + colIndex; const left = column < 1 ? 0 : colLeft; const top = row < 1 ? 0 : rowTop; const attrs = left top width height ; const title = rowIndex + '-' + colIndex; return <div = =>title</div> ; }
Hacking
# gem install foreman foreman start # open http://localhost:4001/test # code changes will be recompiled automatically
Building
Build the production version of the library:
make dist
Tests
foreman start # in another terminal npm test