Table

Server-safe semantic <table> in a scrolling card: header, body, footer and caption, striped rows, tinted selected rows, and sortable headers that set aria-sort and flip their arrow.

npx @kznlabs/labsui add table

Guild members · 0 selected
		Role
	Brooklyn Simmons	Bot	12,904	2022-11-30
	Jane Cooper	Admin	4,210	2023-02-11
	Wade Warren	Moderator	1,882	2023-08-29
	Esther Howard	Member	642	2024-01-04
	Cameron Williamson	Member	97	2024-06-17
Total			19,735

"use client";import { useState } from "react";import {  Table,  TableBody,  TableCell,  TableHead,  TableHeader,  TableRow,} from "@/components/ui/table";type Member = { name: string; messages: number };export function MembersTable({ members }: { members: Member[] }) {  const [dir, setDir] = useState<"ascending" | "descending">("descending");  const rows = [...members].sort((a, b) =>    dir === "ascending" ? a.messages - b.messages : b.messages - a.messages,  );  return (    <Table striped>      <TableHeader>        <TableRow>          <TableHead>Member</TableHead>          <TableHead            className="text-right"            sort={dir}            onSort={() =>              setDir(dir === "ascending" ? "descending" : "ascending")            }          >            Messages          </TableHead>        </TableRow>      </TableHeader>      <TableBody>        {rows.map((m) => (          <TableRow key={m.name}>            <TableCell className="font-medium">{m.name}</TableCell>            <TableCell className="text-right tabular-nums">              {m.messages}            </TableCell>          </TableRow>        ))}      </TableBody>    </Table>  );}

<Table>

A real <table> in a card that scrolls sideways on narrow screens (and is keyboard-scrollable then).

containerClassName
string
Classes for the scrolling card around the table.
stripeddefault false
boolean
Alternating row shading.

Prop	Type	Default
`containerClassName` Classes for the scrolling card around the table.	`string`	—
`striped` Alternating row shading.	`boolean`	`false`

Also accepts every <table> prop.

<TableHeader>

Also accepts every <thead> prop (none of its own).

<TableBody>

Also accepts every <tbody> prop (none of its own).

<TableFooter>

Also accepts every <tfoot> prop (none of its own).

<TableRow>

Pass data-state="selected" (or aria-selected) to tint a selected row.

Also accepts every <tr> prop (none of its own).

<TableHead>

onSort
() => void
Called when the header button is pressed. Requires sort.
sort
"ascending" | "descending" | "none"
Makes the column sortable: sets aria-sort and shows the direction arrow.

Prop	Type	Default
`onSort` Called when the header button is pressed. Requires `sort`.	`() => void`	—
`sort` Makes the column sortable: sets aria-sort and shows the direction arrow.	`"ascending" \| "descending" \| "none"`	—

Also accepts every <th> prop.

<TableCell>

Also accepts every <td> prop (none of its own).

<TableCaption>

Also accepts every <caption> prop (none of its own).

* required. Every component also takes className.