@table-utils/jsx-table
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

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

    Install

    npm i @table-utils/jsx-table

    DownloadsWeekly Downloads

    155

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    29.2 kB

    Total Files

    27

    Last publish

    Collaborators

    • avatar