A simple, accessible table view.

Usage no npm install needed!

<script type="module">
  import tableUtilsJsxTable from 'https://cdn.skypack.dev/@table-utils/jsx-table';


(React) JSX Table

A simple, accessible table view.


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


npm i @table-utils/jsx-table


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.


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

function App() {
    return (
                    <Table.Cell>John Doe</Table.Cell>

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.Body as={as}>
                <Table.Row as={as}>
                    <Table.Cell as={as}>John Doe</Table.Cell>
                    <Table.Cell as={as}>28</Table.Cell>

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], {
            as: 'div',

    return acc;
}, {});

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


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


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/