Table

Semantic HTML table with styled header, body, and optional footer rows.

Examples

Clean table with header and body rows.

Alternating row background for improved scannability.

Each row has contextual edit and delete actions.

Checkbox column for multi-row selection.

Click column headers to toggle ascending / descending sort.

Table with a summary footer row.

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

import { Table } from "@rokle/components";

import { Table } from "@rokle/components";

export function Example() {
  return <Table />;
}

Prop	Type	Default	Description
columns	{ key: string; header: string }[]	-	Column definitions.
data	Record<string, unknown>[]	-	Row data array.
caption	string	-	Accessible table caption.