Table

Table arranges data in rows and columns so people can scan, compare and act on each record.

Made up of Table, TableHeader, TableHeaderCell (sorting with aria-sort), TableBody, TableRow, TableCell, TableCellLayout, TableSelectionCell and TableCellActions. The example at the top is a complete DataTable with filtering, sorting, row selection, an action menu and pagination.

0 of 12 invoices selected

	Status
Alex Chenalex.chen@contoso.com	Paid	Oct 18, 2026	$2,490.00
Maria Garciamaria.garcia@contoso.com	Pending	Oct 17, 2026	$1,350.00
Sam Leesam.lee@contoso.com	Paid	Oct 15, 2026	$5,820.00
Priya Patelpriya.patel@contoso.com	Failed	Oct 14, 2026	$760.00
Jordan Kimjordan.kim@contoso.com	Paid	Oct 12, 2026	$3,150.00

Page 1 of 3 · 12 results

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport {  Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell,  TableCellLayout, TableSelectionCell, TableCellActions,} from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

File	Last modified
Q3 report.docx	2 hours ago
Project docs	Yesterday
Contract.pdf	3 days ago

Basic

TableCellLayout combines an icon with the main content.

Name	Role
Alex Chen	Engineer
Maria Garcia	Designer

Name	Role
Alex Chen	Engineer
Maria Garcia	Designer

Size

extra-small (24px) and small (34px); medium, the default, is 44px tall.

	Member
	Alex Chen
	Maria Garcia
	Sam Lee

Row selection & actions

A subtle TableSelectionCell shows its checkbox only on hover; TableCellActions shows buttons when the row is hovered or focused.

Member	Role
Alex Chen	Software engineer
Maria Garcia	Designer
Sam Lee	Product manager

Choosing columns

Table has no column definitions: keep the set of hidden column ids in state, render cells conditionally and use DataGridColumnPicker as the column button. A hideable: false column is always shown.

Usage

Align column headers with their data; align number columns to the end.
Allow sorting on columns people often compare; the header shows the sort direction.
Put row actions in a “…” Menu or in TableCellActions to keep the table compact.

Don't

Don't use Table for page layout.
Don't fit too many columns on narrow screens. Wrap the table in overflow-x-auto or hide secondary columns.
Don't show selected rows with background color alone. Always include a checkbox.

Props

Prop · Type	Default	Description
Table.size"extra-small" \| "small" \| "medium"	Default: "medium"	Row height 24 / 34 / 44px.
Table.sortableboolean	Default: false	Turns every TableHeaderCell into a sort button.
TableHeaderCell.sortDirection"ascending" \| "descending"	Default: —	Shows the ArrowSortUp/Down icon and sets aria-sort.
TableHeaderCell.sortable / onClickboolean / MouseEventHandler	Default: —	Turns sorting on / off for one column; onClick goes on the button in the header.
TableRow.selected / appearanceboolean / "none" \| "neutral" \| "brand"	Default: —	Background state of the row.
TableCellLayout.media / description / appearance / truncateReactNode / ReactNode / "primary" / boolean	Default: —	Cell layout: media + main content + description.
TableSelectionCell.checked / onCheckedChange / subtleboolean \| "mixed" / (checked) => void / boolean	Default: —	Row selection checkbox; inside TableHeader it becomes the select-all cell.

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.table

Key · Type	Default (English)	messagesVi
selectAllRowsstring aria-label của checkbox TableSelectionCell ở hàng tiêu đề.	Default (English)`"Select all rows"`	messagesVi`"Chọn tất cả hàng"`
selectRowstring aria-label của checkbox TableSelectionCell ở từng hàng.	Default (English)`"Select row"`	messagesVi`"Chọn hàng"`