Skip to main content

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>
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>

Props​