(React) JSX Table

A simple, accessible table view.

Why

Serves as a base component for creating interactive data grids and other kind of complex tables.

Install

npm i @table-utils/jsx-table

Usage

Although this table is written in React, it's only the table view. No interaction, no hooks, just simple functions and accessibility props. Due to the simplicity, it's trivial to port to other JSX libraries like Preact, Hyperapp, Crank, Solid, etc.

Basics

import { Table } from '@table-utils/jsx-table';

function App() {
    return (
        <Table>
            <Table.Head>
                <Table.HeadRow>
                    <Table.HeadCell>Name</Table.HeadCell>
                    <Table.HeadCell>Age</Table.HeadCell>
                </Table.HeadRow>
            </Table.Head>
            <Table.Body>
                <Table.Row>
                    <Table.Cell>John Doe</Table.Cell>
                    <Table.Cell>28</Table.Cell>
                </Table.Row>
            </Table.Body>
        </Table>
    );
}

div tables

JSX table support representing the table as other JSX types or DOM nodes, too via the as prop:

import { Table } from '@table-utils/jsx-table';

const as = 'div';

function App() {
    return (
        <Table as={as}>
            <Table.Head as={as}>
                <Table.HeadRow as={as}>
                    <Table.HeadCell as={as}>Name</Table.HeadCell>
                    <Table.HeadCell as={as}>Age</Table.HeadCell>
                </Table.HeadRow>
            </Table.Head>
            <Table.Body as={as}>
                <Table.Row as={as}>
                    <Table.Cell as={as}>John Doe</Table.Cell>
                    <Table.Cell as={as}>28</Table.Cell>
                </Table.Row>
            </Table.Body>
        </Table>
    );
}

We can also create higher-order functions and make this process a whole lot easier. This works because JSX Table exposes elements as statics on the function which are enumerable.

import { Table as JSXTable } from '@table-utils/jsx-table';

const Table = Object.keys(JSXTable).reduce((acc, key) => {
    acc[key] = props => {
        return React.createElement(JSXTable[key], {
            ...props,
            as: 'div',
        });
    };

    return acc;
}, {});

function App() {
    // use as before, but without `as` :)
}

Preact

The preact docs have fantastic docs on how to make the jump from React to Preact. If you're in the process of migrating from React to Preact then you can use aliases to make that happen.

If you're taking a gander at JSX table and are writing your app with Preact, then you're in luck! JSX table doesn't use anything specific to React and has zero dependencies; therefore, it's recommended to transpile JSX from React.createElement to hyperscript via babel. See JSX transpiling section for more details and common scenarios.

JSX Transpiling

As mentioned, JSX table is written with React in mind; however, with modern tooling it's incredibly easy to make the move to Preact, Crank, or some other JSX stack.

a11y & WCAG

DOM nodes other than table tr, td, etc... have the correct ARIA roles attached; however additional props are required to ensure table accessibility. Here's a helpful matrix:

Prop	Value	Required	Description	Alternatives
aria-label	string	No	Describes the purpose of the table	caption
aria-labelledby	id	When caption is used	Link a caption to the table
aria-describedby	id	When caption is used	Link a caption to the table
aria-sort	none \| ascending \| descending \| other	When columns have a sort direction	Indicates sort direction of column
aria-rowcount	number >= -1	Only when some rows are hidden/paginated	Indicates the total number of rows
{aria-rowindex}(https://www.digitala11y.com/aria-rowindex/)	number >= 0	Only when some rows are hidden/paginated	Indicates the current row

role="grid"

JSX table is a template for representing tabular data and building complex, interactive grids or tree grids. For more info on creating dynamic grids and maintaining WCAG-compliance, see the MDN docs for a good starting point: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role

Another great resource is: https://www.digitala11y.com/grid-role/