react-tablize

react-tablize

Virtual table and grid components for React.

• TableView
• GridView

TableView

Terse syntax

const people: Person[];

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

Rows and cells syntax

const people: Person[];

<TableView 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>
</TableView>

Mixed syntax

const people: Person[];

<TableView 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>
</TableView>

Columns syntax

const people: Person[];

<TableView 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>

</TableView>

GridView

Simple Grid

<GridView
    columnCount={1000}
    columnWidth={100}
>
    <GridView.Body
        rowCount={10}
        rowHeight={40}
    >
        {({ rowIndex, columnIndex }) => (
            <GridView.Cell>
                {rowIndex}, {columnIndex}
            </GridView.Cell>
        )}
    </GridView.Body>
</GridView>

Frozen Head and Columns

<GridView
    columnCount={1000}
    columnWidth={100}
    freezeColumns={1}
>

    <GridView.Head>
        {({ columnIndex }) => (
            <GridView.Cell>
                {columnIndex}
            </GridView.Cell>
        )}
    </GridView.Head>

    <GridView.Body
        rowCount={10}
        rowHeight={40}
    >
        {({ rowIndex, columnIndex }) => (
            <GridView.Cell>
                {rowIndex}, {columnIndex}
            </GridView.Cell>
        )}
    </GridView.Body>
</GridView>

Variable Width and Height

<GridView
    columnCount={1000}
    columnWidth={columnIndex => columnIndex === 0 ? 50 : 100}
>

    <GridView.Head>
        {({ columnIndex }) => (
            <GridView.Cell>
                {columnIndex}
            </GridView.Cell>
        )}
    </GridView.Head>

    <GridView.Body
        rowCount={10}
        rowHeight={rowIndex => rowIndex === 0 ? 80 : 40}
    >
        {({ rowIndex, columnIndex }) => (
            <GridView.Cell>
                {rowIndex}, {columnIndex}
            </GridView.Cell>
        )}
    </GridView.Body>
</GridView>

Changelog

0.6.1 - 2019-06-06

Changed

• Upgrade to react-window@1.8.2 and remove hacks from GridView.syncScroll.

Fixed

• Fix support for grid with no head.