iconiq
—Open GitHub

Table

Composable table primitives with animated sort helpers, layout-preserving rows, and the same minimal data-grid styling as the original demo.

Open in
Ada Lovelace
Engineer
Active
$4,200
Alan Turing
Researcher
Active
$5,800
Grace Hopper
Architect
Pending
$3,100
Linus Torvalds
Maintainer
Archived
$2,750
Margaret Hamilton
Lead
Active
$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 custom layouts stay aligned.
classNamestring
Merged onto the root wrapper 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.
Semantic roles default to a div-based table structure (`table`, `rowgroup`, `row`, `columnheader`, and `cell`) so the installed primitive is more accessible without changing the visual layout.

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

Top shell for the header area. It preserves the original top border before the first row.
childrenReactNode
Required
Usually one header TableRow.
classNamestring
Merged onto the header wrapper.

TableBody

2 props

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 row primitive used for both header and body layouts.
variant"header" | "body"
Defaultbody
Header rows skip mount and exit motion, while body rows use the original spring-based row transitions.
indexnumber
Default0
Optional row index used to apply a subtle stagger to body row entry motion.
hoverableboolean
When true, body rows keep the original muted hover wash. Defaults to false for header rows and true for body rows.
classNamestring
Merged onto the row shell for spacing or color overrides.
Motion div propsComponentPropsWithoutRef<typeof motion.div>
Additional motion.div 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

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.
classNamestring
Merged onto the header cell wrapper.

TableCell

3 props

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 caption line 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

2 props

Animated empty-state block for zero-result or no-data states inside TableBody.
childrenReactNode
Required
Empty-state copy or a richer no-data message.
Motion div propsComponentPropsWithoutRef<typeof motion.div>
You can still override animate, initial, transition, or className when customizing the empty state.

TableSortButton

5 props

Optional header helper that preserves the original label-plus-chevron treatment and direction animation.
activeboolean
Defaultfalse
Strengthens the icon opacity and enables the active sort direction treatment.
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.
childrenReactNode
Required
Visible sort label.
classNamestring
Merged onto the button wrapper.

Notes

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