On this page

Table

A responsive table component.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/table

Lineage

Shadcn
Docs
Spoke

Anatomy

import {
	Table,
	TableHeader,
	TableBody,
	TableFooter,
	TableHead,
	TableRow,
	TableCell,
	TableCaption,
} from "@/components/ui/table"

export default () => (
	<Table>
		<TableCaption />
		<TableHeader>
			<TableRow>
				<TableHead />
			</TableRow>
		</TableHeader>
		<TableBody>
			<TableRow>
				<TableCell />
			</TableRow>
		</TableBody>
		<TableFooter>
			<TableRow>
				<TableCell />
			</TableRow>
		</TableFooter>
	</Table>
)

Spoke utility classes

ClassFallback chainDescription
--table-bordervar(--border)Border colour for table
--table-row-hoveroklch(var(--muted) / 50%)Colour for row hover table variant
--table-row-selectedvar(--muted)Colour for row selected table variant
--table-footeroklch(var(--muted) / 50%)Colour for footer table variant
--table-head-foregroundvar(--foreground)Text/icon colour for head table variant
--table-captionvar(--muted-foreground)Colour for caption table variant