iconiq
—Open GitHub

Table

Structured data table for rows, columns, and comparisons.

Ada LovelaceEngineerActive$4,200
Alan TuringResearcherActive$5,800
Grace HopperArchitectPending$3,100
Linus TorvaldsMaintainerArchived$2,750
Margaret HamiltonLeadActive$6,400
5 of 5 entries

Installation

npx shadcn@latest add @iconiq/table

Props

Table

3 props

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.

Notes

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

2 props

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

2 props

Native table head wrapper for the column labels and sort controls.
childrenReactNode
Required
Usually one header TableRow.
classNamestring
Merged onto the header wrapper.

TableBody

2 props

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.

Notes

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

TableRow

5 props

Motion-enabled native table row used for both header and body layouts.
variant"header" | "body"
Defaultbody
Header rows skip mount and exit motion, while body rows keep the original motion defaults.
indexnumber
Default0
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.

Notes

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

3 props

Native header cell wrapper for labels, sort buttons, and right-aligned controls.
align"left" | "right"
Defaultleft
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

3 props

Native body cell wrapper for row content, status pills, numeric values, and row actions.
align"left" | "right"
Defaultleft
Controls left or right alignment for the cell content.
childrenReactNode
Required
Rendered cell content.
classNamestring
Merged onto the cell wrapper.

TableCaption

2 props

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

3 props

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

5 props

Optional header helper with a larger hit area, clearer active state, and direction animation.
activeboolean
Defaultfalse
Strengthens the visual treatment and enables the active sort direction state for the parent column header.
direction"asc" | "desc"
Defaultasc
Rotates the chevron when the current active sort direction is descending.
align"left" | "right"
Defaultleft
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.

Notes

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