Table

Tables do not yet exist as a component of the library, because tables as HTML elements are quite primitive, and it is in their presentation or implementation details that one table can be differentiated from another.

The consideration of a table library with its own APIs to handle pagination, sorting, filtering, rearrangements and other features is being weighed for inclusion in the component library in the future; however, there is no currently available timeline for when this will happen, and it is not under active development at this time.

Be aware that any data intended to be displayed within a table, with additional functionality such as pagination, sorting and filtering etc., will require logic to be implemented for each particular scenario; the library cannot handle this automatically. As an example:

• ● A sort function needs to have knowledge of which values to compare for sorting, and the same is true for filtering.
• ● For pagination, a decision must be made about where the pagination is carried out, ideally in the back-end (BE), and then just displayed in the front-end (FE).

If these features are essential for your situation, you may choose to implement the required functionality; as it will need to be created anyway, the library API could simply sort based on your sorting algorithm and provide a sorted copy of the original set of data to a standard table element, as a quick way to get the desired result in the interim.

How do I implement a table component?

The following example outlines how to implement a basic table component using existing components from the component library, such as the DropdownMenu component. Styling by TailwindCSS is automatically applied so you can easily ensure that your table component looks consistent with the rest of the designs.

If you would like to add a shadow to your table component, use the shadow-md class for the wrapping container.

Live Editor

// You can play with code, with HTML tags and text as much as you want! interface Item { name: string; } interface ColumnAction { handler: (item: Item) => void; title: string; } interface TableProps { items: Item[]; columns: string[]; actions: ColumnAction[]; } const Table: React.FunctionComponent< TableProps & JSX.IntrinsicElements['table'] > = ({ items, className, columns, actions, ...rest }) => { const hasActions = React.useMemo( () => actions && actions.length > 0 && items.length > 0, [actions, items] ); return ( <div className="relative overflow-x-auto shadow-md sm:rounded-lg table-example"> <table className="w-full font-black text-sm text-left bg-athens"> {columns && ( <thead className="text-xs uppercase"> <tr> {columns.length > 0 && columns.map((column, key) => ( <th scope="col" className="px-6 py-3" key={key}> {column} </th> ))} {hasActions && ( <th scope="col" className="px-6 py-3"> <span className="sr-only">Actions</span> </th> )} </tr> </thead> )} <tbody> {items.map((item, key) => ( <tr key={key} className="text-mirage border-t border-mirage hover:bg-hover-grey"> <th scope="row" className="px-6 py-4 font-medium whitespace-nowrap"> {item.name} </th> {/* Iterate over your item properties here */} <td className="px-6 py-4">Some property</td> <td className="px-6 py-4"> <ActionDropdown actions={actions} items={items} row={key} /> </td> </tr> ))} </tbody> </table> </div> ); }; const ActionDropdown = ({ actions, items, row, }: { actions: ColumnAction[]; items: Item[]; row: number; }) => { const [show, setShow] = React.useState(false); const buttonRef = React.useRef<HTMLButtonElement>(null); const toggleDropdown = () => setShow((currentState) => !currentState); const chevronDownClassName = show ? 'hidden' : ''; const chevronUpClassName = show ? '' : 'hidden'; return ( <div className="flex justify-end"> <button role="button" ref={buttonRef} onClick={toggleDropdown} aria-haspopup="menu" aria-expanded={show} className="flex" > Actions <ChevronDown24 className={chevronDownClassName} />{' '} <ChevronUp24 className={chevronUpClassName} /> </button> {show && ( <DropdownMenu id="Sample" anchorRef={buttonRef} closeOnClick onClose={() => setShow(false)} className="z-10" > {actions.map((action, i) => ( <DropdownMenuItem as="button" key={i} onClick={(evt: any) => action.handler(items[row])} > {action.title} </DropdownMenuItem> ))} </DropdownMenu> )} </div> ); }; const items: Item[] = [ { name: "Let's keep moving!" }, { name: 'Lorem' }, { name: 'Ipsum' }, { name: 'Dolor' }, { name: 'Sit' }, { name: 'Amet' }, ]; const columns = ['column #1', 'column #2']; const tableRowActions: ColumnAction[] = [ { handler: (index) => console.log(index), title: 'Action #1', }, { handler: (index) => console.log(index), title: 'Action #2', }, { handler: (index) => console.log(index), title: 'Action #3', } ]; render(<Table items={items} columns={columns} actions={tableRowActions} />)

// You can play with code, with HTML tags and text as much as you want!
    interface Item {
        name: string;
    }
    interface ColumnAction {
        handler: (item: Item) => void;
        title: string;
    }
    interface TableProps {
        items: Item[];
        columns: string[];
        actions: ColumnAction[];
    }
    const Table: React.FunctionComponent<
        TableProps & JSX.IntrinsicElements['table']
        > = ({ items, className, columns, actions, ...rest }) => {
        const hasActions = React.useMemo(
            () => actions && actions.length > 0 && items.length > 0,
            [actions, items]
        );
        return (
            <div className="relative overflow-x-auto shadow-md sm:rounded-lg table-example">
            <table className="w-full font-black text-sm text-left bg-athens">
                {columns && (
                <thead className="text-xs uppercase">
                    <tr>
                    {columns.length > 0 &&
                        columns.map((column, key) => (
                        <th scope="col" className="px-6 py-3" key={key}>
                            {column}
                        </th>
                        ))}
                    {hasActions && (
                        <th scope="col" className="px-6 py-3">
                            <span className="sr-only">Actions</span>
                        </th>
                    )}
                    </tr>
                </thead>
                )}
                <tbody>
                {items.map((item, key) => (
                        <tr key={key} className="text-mirage border-t border-mirage hover:bg-hover-grey">
                            <th scope="row" className="px-6 py-4 font-medium whitespace-nowrap">
                                {item.name}
                            </th>
                            {/* Iterate over your item properties here */}
                            <td className="px-6 py-4">Some property</td>
                            <td className="px-6 py-4">
                                <ActionDropdown actions={actions} items={items} row={key} />
                            </td>
                        </tr>
                        ))}
                    </tbody>
                </table>
            </div>
            );
        };
        const ActionDropdown = ({
            actions,
            items,
            row,
        }: {
            actions: ColumnAction[];
            items: Item[];
            row: number;
        }) => {
            const [show, setShow] = React.useState(false);
            const buttonRef = React.useRef<HTMLButtonElement>(null);
            const toggleDropdown = () => setShow((currentState) => !currentState);
            const chevronDownClassName = show ? 'hidden' : '';
            const chevronUpClassName = show ? '' : 'hidden';
            return (
                <div className="flex justify-end">
                    <button
                        role="button"
                        ref={buttonRef}
                        onClick={toggleDropdown}
                        aria-haspopup="menu"
                        aria-expanded={show}
                        className="flex"
                    >
                        Actions <ChevronDown24 className={chevronDownClassName} />{' '}
                        <ChevronUp24 className={chevronUpClassName} />
                </button>
                {show && (
                    <DropdownMenu
                        id="Sample"
                        anchorRef={buttonRef}
                        closeOnClick
                        onClose={() => setShow(false)}
                        className="z-10"
                    >
                        {actions.map((action, i) => (
                        <DropdownMenuItem
                            as="button"
                            key={i}
                            onClick={(evt: any) => action.handler(items[row])}
                        >
                            {action.title}
                        </DropdownMenuItem>
                    ))}
                    </DropdownMenu>
                )}
            </div>
        );
    };
    const items: Item[] = [
        { name: "Let's keep moving!" },
        { name: 'Lorem' },
        { name: 'Ipsum' },
        { name: 'Dolor' },
        { name: 'Sit' },
        { name: 'Amet' },
    ];
    const columns = ['column #1', 'column #2'];
    const tableRowActions: ColumnAction[] = [
        {
            handler: (index) => console.log(index),
            title: 'Action #1',
        },
        {
            handler: (index) => console.log(index),
            title: 'Action #2',
        },
        {
            handler: (index) => console.log(index),
            title: 'Action #3',
        }
    ];
    render(<Table items={items} columns={columns} actions={tableRowActions} />)

Result