react-tablize

react-tablize

Virtual table and grid components for React.

• TableView
  • Examples
  • Props
• GridView
  • Examples
  • Props
• Changelog

TableView

Table Examples

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>

Table Props

Name	Type	Default	Required	Description
isVirtual	boolean	true	no	Whether to use a virtual table (using react-window) or to use simple divs. Useful for performance comparison and optimization.
rowCount	number		yes	The number of rows in the table.
rowKey	(rowIndex: number) => React.Key		no	React key for each row.
dir	'rtl' | 'ltr'	'ltr'	no
className	string		no
style	React.CSSProperties		no
rowHeight	number | (rowIndex: number) => number	50	no	Row height in pixels.
emptyMessage	string	"No Items to Display"	no	What to display when there are no items.
overscanCount	number	20	no

GridView

Grid Examples

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>

Grid Props

Name	Type	Default	Required	Description
columnCount	number		yes
columnWidth	number | (columnIndex: number) => number		yes	Column width in pixels.
freezeColumns	number	0	no	Number of columns to freeze (always the first columns).
dir	'rtl' | 'ltr'	'ltr'	no
overscanRowsCount	number	1	no
overscanColumnsCount	number	1	no
useIsScrolling	boolean	false	no	Adds an additional isScrolling parameter to the children render function. This parameter can be used to show a placeholder row or column while the list is being scrolled. Note that using this parameter may impact performance.

Changelog

The changelog can be found here.

Changelog

0.10.0 - 2019-07-01

Added

• Allow standard div props on TableHead.

Fixed

• Fix support for table with no head.