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 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.
keyScroll	boolean	true	no	Enables table scrolling using the PageUp, PageDown, Home and End keys.
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
isVirtual	boolean	true	no	Whether to use a set of virtual tables (using react-window) or simple divs. Useful for performance comparison and optimization.
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

Changelog

The changelog can be found here.

Changelog

0.15.0 - 2019-10-07

Added

• RowAutoSize for non-virtual TableViews.

Changed

• Internal code changes.
• Human readable class names.

Fixed

• Better support older browsers when isVirtual is false.
• Fix TableView RTL support.

Removed

• BREAKING: Remove the isScrolling support.