react-tablize

High performance virtual table and grid components for React.

Table
- Examples
- Props
Grid
- Examples
- Props
Prior art and motivation
Changelog

Table

Table Examples

Terse syntax

const people: Person[];

<Table rowCount={people.length}>
    <TableHead>
        {['Name', 'Age']}
    </TableHead>
    <TableBody>
        {index => ([
            people[index].name,
            people[index].age
        ])}
    </TableBody>
</Table>

Rows and cells syntax

const people: Person[];

<Table rowCount={people.length}>
    <TableHead>
        <TableCell>
            Name
        </TableCell>
        <TableCell>
            Age
        </TableCell>
    </TableHead>
    <TableBody>
        {index => (
            <TableRow>
                <TableCell>
                    {people[index].name}
                </TableCell>
                <TableCell>
                    {people[index].age}
                </TableCell>
            </TableRow>
        )}
    </TableBody>
</Table>

Mixed syntax

const people: Person[];

<Table rowCount={people.length}>
    <TableHead>
        {[
            <TableCell key="name">
                Name
            </TableCell>,
            'Age'
        ]}
    </TableHead>
    <TableBody>
        {index => (
            <TableRow>
                {[
                    <TableCell key="name">
                        {people[index].name}
                    </TableCell>,
                    people[index].age
                ]}
            </TableRow>
        )}
    </TableBody>
</Table>

Columns syntax

const people: Person[];

<Table rowCount={people.length}>

    <TableColumn>
        <ColumnHead>Name</ColumnHead>
        <ColumnBody>
            {({ rowIndex }) => people[rowIndex].name}
        </ColumnBody>
    </TableColumn>

    <TableColumn>
        <ColumnHead>Age</ColumnHead>
        <ColumnBody>
            {({ rowIndex }) => people[rowIndex].age}
        </ColumnBody>
    </TableColumn>

</Table>

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

<Grid
    columnCount={1000}
    rowCount={10}
    columnWidth={100}
    rowHeight={40}
>
    {cellProps => (
        `${cellProps.absRowIndex}, ${cellProps.absColIndex}`
    )}
</Grid>

Fixed Head and Columns

<Grid
    columnCount={1000}
    rowCount={10}
    columnWidth={100}
    rowHeight={40}
    fixedHeaderHeight={50}
    fixedLeftWidth={100}
>
    {cellProps => {

        // fixed left column
        if (cellProps.tilePosition.horizontal === 'left') {
            return (
                <div style={{ color: 'green' }}>
                    {cellProps.absColIndex}
                </div>
            );
        }

        // fixed header
        if (cellProps.tilePosition.vertical === 'header') {
            return (
                <div style={{ color: 'red' }}>
                    {cellProps.absColIndex}
                </div>
            );
        }

        // body
        return `${cellProps.absRowIndex}, ${cellProps.absColIndex}`;
    }}
</Grid>

Variable Width and Height

<Grid
    columnCount={1000}
    rowCount={10}
    columnWidth={columnIndex => columnIndex === 0 ? 50 : 100}
    rowHeight={rowIndex => rowIndex === 0 ? 80 : 40}
>
    {cellProps => (
        `${cellProps.absRowIndex}, ${cellProps.absColIndex}`
    )}
</Grid>

Grid Cell Render Props

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:

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.

alonrbar / react-tablize Goto Github PK

react-tablize's Introduction

react-tablize

Table

Table Examples

Terse syntax

Rows and cells syntax

Mixed syntax

Columns syntax

Table Props

Grid

Grid Examples

Simple Grid

Fixed Head and Columns

Variable Width and Height

Grid Cell Render Props

Prior art and motivation

Changelog

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent