TableHeader

The TableHeader component is analogous to DOM thead. It can support a variant in the header when either table-light or table-dark are set as the class.

Result

Header 1	Header 2	Header 3	Header 4
Cell 1	Cell 2	Cell 3	Cell 4
Cell 1	Cell 2	Cell 3	Cell 4
Cell 1	Cell 2	Cell 3	Cell 4
Cell 1	Cell 2	Cell 3	Cell 4

Live Editor

<Table> <TableHeader variant="light"> <TableRow> <TableCell>Header 1</TableCell> <TableCell>Header 2</TableCell> <TableCell>Header 3</TableCell> <TableCell>Header 4</TableCell> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>Cell 1</TableCell> <TableCell>Cell 2</TableCell> <TableCell>Cell 3</TableCell> <TableCell>Cell 4</TableCell> </TableRow> <TableRow> <TableCell>Cell 1</TableCell> <TableCell>Cell 2</TableCell> <TableCell>Cell 3</TableCell> <TableCell>Cell 4</TableCell> </TableRow> <TableRow> <TableCell>Cell 1</TableCell> <TableCell>Cell 2</TableCell> <TableCell>Cell 3</TableCell> <TableCell>Cell 4</TableCell> </TableRow> <TableRow> <TableCell>Cell 1</TableCell> <TableCell>Cell 2</TableCell> <TableCell>Cell 3</TableCell> <TableCell>Cell 4</TableCell> </TableRow> </TableBody> </Table>

<Table>
    <TableHeader variant="light">
        <TableRow>
            <TableCell>Header 1</TableCell>
            <TableCell>Header 2</TableCell>
            <TableCell>Header 3</TableCell>
            <TableCell>Header 4</TableCell>
        </TableRow>
    </TableHeader>

    <TableBody>
        <TableRow>
            <TableCell>Cell 1</TableCell>
            <TableCell>Cell 2</TableCell>
            <TableCell>Cell 3</TableCell>
            <TableCell>Cell 4</TableCell>
        </TableRow>
        <TableRow>
            <TableCell>Cell 1</TableCell>
            <TableCell>Cell 2</TableCell>
            <TableCell>Cell 3</TableCell>
            <TableCell>Cell 4</TableCell>
        </TableRow>
        <TableRow>
            <TableCell>Cell 1</TableCell>
            <TableCell>Cell 2</TableCell>
            <TableCell>Cell 3</TableCell>
            <TableCell>Cell 4</TableCell>
        </TableRow>
        <TableRow>
            <TableCell>Cell 1</TableCell>
            <TableCell>Cell 2</TableCell>
            <TableCell>Cell 3</TableCell>
            <TableCell>Cell 4</TableCell>
        </TableRow>
    </TableBody>
</Table>

Result

Header 1	Header 2	Header 3	Header 4
Cell 1	Cell 2	Cell 3	Cell 4
Cell 1	Cell 2	Cell 3	Cell 4
Cell 1	Cell 2	Cell 3	Cell 4
Cell 1	Cell 2	Cell 3	Cell 4

Live Editor

<Table> <TableHeader variant="dark"> <TableRow> <TableCell>Header 1</TableCell> <TableCell>Header 2</TableCell> <TableCell>Header 3</TableCell> <TableCell>Header 4</TableCell> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>Cell 1</TableCell> <TableCell>Cell 2</TableCell> <TableCell>Cell 3</TableCell> <TableCell>Cell 4</TableCell> </TableRow> <TableRow> <TableCell>Cell 1</TableCell> <TableCell>Cell 2</TableCell> <TableCell>Cell 3</TableCell> <TableCell>Cell 4</TableCell> </TableRow> <TableRow> <TableCell>Cell 1</TableCell> <TableCell>Cell 2</TableCell> <TableCell>Cell 3</TableCell> <TableCell>Cell 4</TableCell> </TableRow> <TableRow> <TableCell>Cell 1</TableCell> <TableCell>Cell 2</TableCell> <TableCell>Cell 3</TableCell> <TableCell>Cell 4</TableCell> </TableRow> </TableBody> </Table>

<Table>
    <TableHeader variant="dark">
        <TableRow>
            <TableCell>Header 1</TableCell>
            <TableCell>Header 2</TableCell>
            <TableCell>Header 3</TableCell>
            <TableCell>Header 4</TableCell>
        </TableRow>
    </TableHeader>

    <TableBody>
        <TableRow>
            <TableCell>Cell 1</TableCell>
            <TableCell>Cell 2</TableCell>
            <TableCell>Cell 3</TableCell>
            <TableCell>Cell 4</TableCell>
        </TableRow>
        <TableRow>
            <TableCell>Cell 1</TableCell>
            <TableCell>Cell 2</TableCell>
            <TableCell>Cell 3</TableCell>
            <TableCell>Cell 4</TableCell>
        </TableRow>
        <TableRow>
            <TableCell>Cell 1</TableCell>
            <TableCell>Cell 2</TableCell>
            <TableCell>Cell 3</TableCell>
            <TableCell>Cell 4</TableCell>
        </TableRow>
        <TableRow>
            <TableCell>Cell 1</TableCell>
            <TableCell>Cell 2</TableCell>
            <TableCell>Cell 3</TableCell>
            <TableCell>Cell 4</TableCell>
        </TableRow>
    </TableBody>
</Table>

Props

Name	Type	Default Value	Required	Description
key	Key		No
radius	"rounded" | "square"		No
ref	Ref<HTMLTableSectionElement>		No