Table

Columns, numbers and row actions

Numbers are right-aligned with tabular figures. Row actions sit in the last column.

<KbTable caption="Team members" rows={rows} rowKey={(r) => r.id} columns={columns}
  rowActions={(r) => <KbButton variant="ghost" size="sm" aria-label={`Remove ${r.name}`}>Remove</KbButton>} />

Identity cell and row open

The first column can hold an avatar, a name and a quiet line. With rowHref or onRowOpen the first cell becomes the real link or button and its hit area covers the row.

<KbTable caption="Contacts" rows={rows} rowKey={(r) => r.id} rowHref={(r) => `/admin/contacts/${r.id}`} rowOpenLabel={(r) => `Open ${r.name}`}
  columns={[{ key: "who", header: "Name", cell: (r) => <KbIdentityCell name={r.name} sub={r.role} /> }]} />

Empty

<KbTable caption="Pending invites" rows={[]} rowKey={(r) => r.id} columns={columns}
  empty="No pending invites. Invite a teammate above." />

When to use

• Use a table when each record has three or more comparable fields. For one or two, use a list.
• Keep headers short nouns in sentence case; they are also the labels when the table stacks.
• Give each row action a unique name, such as Revoke invite for ana@acme.com.
• Do not put controls in a header. Edit a complex row on its own page or in a dialog.

Import

import { KbTable } from "@/components/ui/KbTable";

<KbTable caption="Team members" rows={members} rowKey={(m) => m.id}
  columns={[{ key: "name", header: "Name", cell: (m) => m.name }]} />

Props

Keyboard and screen readers

• A real table with a caption, column headers with scope=col, and a hidden header for the actions column.
• When stacked, each value keeps its column header as a visible label.
• Status is a lozenge with words; a muted row is never the only cue.
• Row actions need unique accessible names.