Primitives

Table

Data table component for displaying structured information in rows and columns. Supports striped rows, hover highlighting, sortable columns, and compact mode.

Live Demo

Interactive Table (click headers to sort)

Name	Email	Role	Status
Alice Johnson	alice@example.com	Developer	Active
Bob Smith	bob@example.com	Designer	Active
Carol Williams	carol@example.com	Manager	Away
Dave Brown	dave@example.com	Developer	Offline

Installation

npm install @trinkui/react

Import

import { Table } from "@trinkui/react";

Usage

Name	Role	Status
Alice Johnson	Developer	Active
Bob Smith	Designer	Active
Carol Williams	Manager	Away
Dave Brown	Developer	Offline

<Table
  columns={[
    { key: "name", label: "Name" },
    { key: "role", label: "Role" },
    { key: "status", label: "Status", render: (val) => <Badge>{val}</Badge> },
  ]}
  data={[
    { name: "Alice Johnson", role: "Developer", status: "Active" },
    { name: "Bob Smith", role: "Designer", status: "Active" },
    { name: "Carol Williams", role: "Manager", status: "Away" },
    { name: "Dave Brown", role: "Developer", status: "Offline" },
  ]}
/>

Striped

Name	Role	Email
Alice	Developer	alice@example.com
Bob	Designer	bob@example.com
Carol	Manager	carol@example.com
Dave	Developer	dave@example.com

<Table striped columns={columns} data={data} />

Compact & Bordered

ID	Name	Value
001	Alpha	$1,200
002	Beta	$3,450
003	Gamma	$780

<Table compact bordered columns={columns} data={data} />

Table Props

Prop	Type	Default	Description
columns	TableColumn[]	--	Column definitions array
data	Record<string, unknown>[]	--	Row data array keyed by column key
striped	boolean	false	Apply alternating row background colors
hoverable	boolean	false	Highlight rows on hover
bordered	boolean	false	Show borders between columns
compact	boolean	false	Reduce cell padding for denser layouts

TableColumn Props

Prop	Type	Default	Description
key	string	--	Key that maps to the data field
label	string	--	Column header text
render	(value, row) => ReactNode	--	Custom cell renderer function
sortable	boolean	false	Enable sorting for this column
width	string \| number	--	Fixed column width (e.g. "120px" or "20%")

Accessibility

Uses semantic <table>, <thead>, <tbody>, <th>, and <td> elements.
Sortable column headers include aria-sort to indicate current sort direction.
Column headers use scope="col" for proper cell-to-header association.
Tables include a caption element when a title is provided.

Switch Tabs