Table

Structured data table for rows, columns, and comparisons.

Installation

npx shadcn@latest add @iconiq/table

Props

Table

Root provider for the animated table primitives. It sets the shared column template so header and body rows stay aligned.

childrenReactNode

Required

Compose TableHeader, TableBody, TableRow, TableHead, TableCell, and optional helper primitives inside the root.

columnsstring

Default "minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)"

Shared grid-template-columns value applied to every header and body row so the native table semantics still keep the custom grid layout aligned.

classNamestring

Merged onto the native table element when you need to adjust width, spacing, or placement.

The canonical JSX export is `Table`, and the lowercase `table` alias still ships for backward compatibility.

The file also exports `TABLE_DEFAULT_COLUMNS`, `TableAlign`, `TableRowVariant`, and `TableSortDirection` for stronger TypeScript reuse in app code.

The registry component no longer owns demo data, search state, or add/remove actions. Those behaviors are expected to live in app code.

The installed primitive now renders a native table, header, body, rows, and cells while preserving the original grid-driven layout API.

TableToolbar

Optional layout helper for the control row above the table, matching the original spacing and alignment treatment.

childrenReactNode

Required

Usually a search field, actions, filters, or bulk controls placed above the table.

classNamestring

Merged onto the toolbar wrapper.

TableHeader

Native table head wrapper for the column labels and sort controls.

childrenReactNode

Required

Usually one header TableRow.

classNamestring

Merged onto the header wrapper.

TableBody

Native table body wrapper that adds LayoutGroup and AnimatePresence so row insertions, removals, and reordering stay animated.

childrenReactNode

Required

One or more TableRow elements, plus optional TableEmpty when no rows are visible.

classNamestring

Merged onto the body wrapper.

Exit animations for removed rows only run when body rows are rendered as direct children of TableBody.

TableRow

Motion-enabled native table row used for both header and body layouts.

variant"header" | "body"

Default body

Header rows skip mount and exit motion, while body rows keep the original motion defaults.

indexnumber

Default 0

Optional row index used to apply a subtle stagger to body row entry motion.

hoverableboolean

When true, body rows get the muted hover wash. Defaults to false so informational rows do not imply clickability.

classNamestring

Merged onto the row shell for spacing or color overrides.

Motion tr propsComponentPropsWithoutRef<typeof motion.tr>

Additional motion.tr props such as layout, transition, whileHover, and exit can still be passed directly.

Every row reads the shared columns string from Table and applies it as grid-template-columns.

Rows expose `data-slot="table-row"`, plus `data-variant` and `data-hoverable`, which makes local styling overrides easier after installation.

TableHead

Native header cell wrapper for labels, sort buttons, and right-aligned controls.

align"left" | "right"

Default left

Controls left or right alignment for the header cell content.

childrenReactNode

Required

Header label or a custom control such as TableSortButton. When used with TableSortButton, the column header also receives the correct aria-sort state.

classNamestring

Merged onto the header cell wrapper.

TableCell

Native body cell wrapper for row content, status pills, numeric values, and row actions.

align"left" | "right"

Default left

Controls left or right alignment for the cell content.

childrenReactNode

Required

Rendered cell content.

classNamestring

Merged onto the cell wrapper.

TableCaption

Low-emphasis native table caption below the table, matching the original entry count styling.

childrenReactNode

Required

Caption copy, summary text, or count information.

classNamestring

Merged onto the caption paragraph.

TableEmpty

Animated empty-state row for zero-result or no-data states inside TableBody.

childrenReactNode

Required

Empty-state copy or a richer no-data message.

colSpannumber

Overrides the automatically derived column span when the empty row should cover a different number of columns.

Motion tr propsComponentPropsWithoutRef<typeof motion.tr>

You can still override animate, initial, transition, or className when customizing the empty state row.

TableSortButton

Optional header helper with a larger hit area, clearer active state, and direction animation.

activeboolean

Default false

Strengthens the visual treatment and enables the active sort direction state for the parent column header.

direction"asc" | "desc"

Default asc

Rotates the chevron when the current active sort direction is descending.

align"left" | "right"

Default left

Keeps the sort button aligned with the header cell it lives in, including full-width right-aligned targets.

childrenReactNode

Required

Visible sort label.

classNamestring

Merged onto the button wrapper.

The helper defaults to type='button', so it stays safe inside forms.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion, lucide-react.

This page lives in the Components section, but the install itself is the shared Iconiq table primitive rather than a Radix or Base UI table wrapper.

The provider switch is shown for section consistency, but both Radix UI and Base UI options are disabled because there is only one table install on this page.

The generated registry file is /r/table.json.