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

Loading...

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

Loading...

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