Table

Table is a component that renders a table with a sticky header.

You can compose a table with the following components:

TableContainer
Table
THead
TBody
Tr
Th
Td

Those components work the same as their HTML counterparts.

id	name	email
1	John Doe	john@doe.com
2	John Doe	john@doe.com
3	John Doe	john@doe.com

import {TableContainer, Table, THead, Tr, Th, Td, TBody} from "swash/Table";
     const rows = [
         {
            id: 1,
            name: "John Doe",
            email: "john@doe.com",
         },
         {
            id: 2,
            name: "John Doe",
            email: "john@doe.com",
         },
         {
            id: 3,
            name: "John Doe",
            email: "john@doe.com",
         }
    ];
    const columns = Object.keys(rows[0]);

    export const Example = () => {
        return (
        <TableContainer>
            <Table>
                <THead>
                    <Tr>
                        {columns.map((column) => (
                            <Th key={column}>{column}</Th>
                        ))}
                    </Tr>
                </THead>
                <TBody>
                    {rows.map((data, index) => (
                        <Tr key={index}>
                            {columns.map((column, index) => (
                                <Td key={index}>{data[column]}</Td>
                            ))}
                        </Tr>
                    ))}
                </TBody>
            </Table>
        </TableContainer>
        )};
    }