@table-utils/jsx-table/dist-web/index.js

A simple, accessible table view.

import { createElement } from 'react';
import { jsx } from 'react/jsx-runtime';

const TableBody = ({ as = 'tbody', ...rest }) => {
    return createElement(as, {
        role: as !== 'tbody' ? 'rowgroup' : undefined,
        ...rest,
    });
};

const TableHead = ({ as = 'thead', ...rest }) => {
    return createElement(as, {
        role: as !== 'thead' ? 'rowgroup' : undefined,
        ...rest,
    });
};

const TableRow = ({ as = 'tr', children, ...rest }) => {
    return createElement(as, {
        role: as !== 'tr' ? 'row' : undefined,
        ...rest,
    }, children);
};

const TableCell = ({ as = 'td', ...rest }) => {
    return createElement(as, {
        role: as !== 'td' ? 'cell' : undefined,
        ...rest,
    });
};

const TableHeadCell = ({ as = 'th', sortable, ...rest }) => {
    const native = as === 'th';
    const sort = rest['aria-sort'];
    return createElement(as, {
        role: !native ? 'columnheader' : undefined,
        ...rest,
        'aria-sort': !native && sortable ? 'none' : sort,
    });
};

const TableHeadRow = TableRow;

const TableFoot = ({ as = 'tfoot', ...rest }) => {
    return jsx(TableBody, Object.assign({ as: as, role: as !== 'tfoot' ? 'rowgroup' : undefined }, rest), void 0);
};

const Table = ({ as = 'table', ...rest }) => {
    return createElement(as, {
        role: as !== 'table' ? 'table' : undefined,
        ...rest,
    });
};
Table.Body = TableBody;
Table.Head = TableHead;
Table.HeadRow = TableHeadRow;
Table.HeadCell = TableHeadCell;
Table.Row = TableRow;
Table.Cell = TableCell;
Table.Foot = TableFoot;

export { Table, TableBody, TableCell, TableFoot, TableHead, TableHeadCell, TableHeadRow, TableRow };
//# sourceMappingURL=index.js.map