https://github.com/alonrbar/react-tablize
High performance virtual table and grid components for React.
https://github.com/alonrbar/react-tablize
Last synced: 7 months ago
JSON representation
High performance virtual table and grid components for React.
- Host: GitHub
- URL: https://github.com/alonrbar/react-tablize
- Owner: alonrbar
- License: mit
- Created: 2019-04-11T11:13:48.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-07T20:41:33.000Z (10 months ago)
- Last Synced: 2024-10-07T22:48:02.815Z (8 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.08 MB
- Stars: 14
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-tablize
High performance virtual table and grid components for React.
[](https://www.npmjs.com/package/react-tablize)
[](https://github.com/alonrbar/react-tablize/blob/master/LICENSE)
- [Table](#table)
- [Examples](#table-examples)
- [Props](#table-props)
- [Grid](#grid)
- [Examples](#grid-examples)
- [Props](#grid-props)
- [Prior art and motivation](#prior-art-and-motivation)
- [Changelog](#changelog)
## Table
### Table Examples
#### Terse syntax
```jsx
const people: Person[];
{['Name', 'Age']}
{index => ([
people[index].name,
people[index].age
])}
```
#### Rows and cells syntax
```jsx
const people: Person[];
Name
Age
{index => (
{people[index].name}
{people[index].age}
)}
```
#### Mixed syntax
```jsx
const people: Person[];
{[
Name
,
'Age'
]}
{index => (
{[
{people[index].name}
,
people[index].age
]}
)}
```
#### Columns syntax
```jsx
const people: Person[];
Name
{({ rowIndex }) => people[rowIndex].name}
Age
{({ rowIndex }) => people[rowIndex].age}
```
### Table Props
| Name | Type | Default | Required | Description |
|-|-|-|-|-|
| rowCount | number || yes | The number of rows in the table. |
| rowHeight | `number` \| `(rowIndex: number) => number` | 50 | no | Row height in pixels. |
| rowKey | `(rowIndex: number) => React.Key` | | no | React key for each row. |
| overscanCount | number | 20 | no | Number of rows to render ahead. |
| dir | `'rtl'` \| `'ltr'` | `'ltr'` | no ||
| className | string || no ||
| style | React.CSSProperties || no ||
| placeholder | React.ReactNode | | no | What to display when there are no items. |
## Grid
### Grid Examples
#### Simple Grid
```jsx
{cellProps => (
`${cellProps.absRowIndex}, ${cellProps.absColIndex}`
)}
```
#### Fixed Head and Columns
```jsx
{cellProps => {
// fixed left column
if (cellProps.tilePosition.horizontal === 'left') {
return (
{cellProps.absColIndex}
);
}
// fixed header
if (cellProps.tilePosition.vertical === 'header') {
return (
{cellProps.absColIndex}
);
}
// body
return `${cellProps.absRowIndex}, ${cellProps.absColIndex}`;
}}
```
#### Variable Width and Height
```jsx
columnIndex === 0 ? 50 : 100}
rowHeight={rowIndex => rowIndex === 0 ? 80 : 40}
>
{cellProps => (
`${cellProps.absRowIndex}, ${cellProps.absColIndex}`
)}
```
### Grid Cell Render Props
```typescript
interface RenderCellProps {
/**
* Absolute column index, taking into account fixed columns.
*/
absColIndex: number;
/**
* Absolute row index, taking into account fixed header and/or footer.
*/
absRowIndex: number;
/**
* Column index relative to the current tile.
*/
relColIndex: number;
/**
* Row index relative to the current tile.
*/
relRowIndex: number;
tileKey: TileKey;
tilePosition: TilePosition;
/**
* The height of the rendered cell.
* You don't have to do anything with it, it's just an informative prop.
*/
height: number;
/**
* The width of the rendered cell.
* You don't have to do anything with it, it's just an informative prop.
*/
width: number;
}
enum TileKey {
HeaderLeft,
HeaderCenter,
HeaderRight,
BodyLeft,
BodyCenter,
BodyRight,
FooterLeft,
FooterCenter,
FooterRight
}
interface TilePosition {
vertical: 'header' | 'body' | 'footer';
horizontal: 'left' | 'center' | 'right';
}
```
## Prior art and motivation
Some parts of this library are inspired by, some are a modification of, and
some are a complete ripoff of these libraries:
- https://github.com/bvaughn/react-window
- https://github.com/ranneyd/sticky-table
- https://github.com/fulcrumapp/react-virtual-grid
- https://github.com/Flipkart/recyclerlistview
Thank you!
If there are so many virtual scrolling libraries out there, why do I need another one?
Well, each of these libraries implements only part of what I personally needed
so I've created a library that combines the best of all:
| Library | Grid component | Fixed rows and columns | RTL | Recycling |
|-|-|-|-|-|
| react-window | ✔ | ✖ | ✔ | ✖ |
| sticky-table | ✔ | ✔ | ✖ | ✖ |
| react-virtual-grid | ✔ | ✔ | ? | ✖ |
| recyclerlistview | ✖ | ? | ? | ✔ |
| **react-tablize** | ✔ | ✔ | ✔ | ✔ |
## Changelog
The changelog can be found [here](https://github.com/alonrbar/react-tablize/blob/master/CHANGELOG.md).