Avara UI
Avara UI

Table

A set of composable table primitives. You write the rows; the component supplies the structure, spacing and theming.
There is no column config and no required row shape. Whatever your API returns — nested objects, snake_case keys, _id instead of id — you map it straight into JSX. Nothing has to be flattened or transformed first.
Every example below is live. Click a sortable header, expand a row, or hover the right edge of a row to reveal its actions.

Soft variant

A plain read-only table in the admin-dashboard look — a rounded panel on a hairline ring, a tinted header band, calm dividers and soft row hover. No search, filters or paging: just the rows.

Setvariant"soft"
once on Table; the heading, header band, cells and dividers read it from context. Every tint is mixed from the table colour.
TablePerson
and TableBadge draw the avatar-and-email cell and the status pill, in any variant.
Table is the card. TableContent renders the scroll container and the <table> element. Everything else maps one-to-one onto the HTML table tags, so colSpan, scope and any other native attribute pass straight through.

Composable table

Maprows
straight into JSX — nested values like customer.email need no transformation.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Table

npx shadcn@latest add @algorize-ui/table

components/custom/blocks/TableBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Table to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

toggle-group is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add @algorize-ui/toggle-group

Examples

Minimal

Setvariant"minimal"
to drop the card wrapper so the table sits directly on the page.

Sortable headers

Setsortable
on a TableHead to render the sort affordance.
sortDirection
and onSort keep it fully controlled — the table never reorders your data behind your back.

Expandable rows

PairTableExpandToggle
with TableExpandedRow, both driven by your own open state.

Pagination

FillTableFooter
with your own pager. For pagination that is wired for you, use the Data Table.

Row actions

WrapTableRowActions
around your buttons to fade them in on row hover and on keyboard focus.

Comparison (soft)

The same soft table as a plan comparison: features down the side, plans across the top, ticks and limits centred under their headers.

align"center"
on both TableHead and TableCell lines the ticks and values up under each plan.

Density

Sizes

Setsize"sm" | "md" | "lg"
on Table — every descendant reads it from context, so cells and headers stay in step.

Features

Any data shape

No column config and no required row shape. Nested objects, unusual key names and computed cells all work without a transformation step.

Real table markup

Each primitive renders its native element, so colSpan, scope and aria attributes pass straight through and screen readers get a genuine table.

Themed by context

Variant, size and colour are set once on Table and read by every descendant, so a cell dropped three levels deep still matches.

Stateless by default

Sorting and expansion are controlled props. The table never reorders or hides your data on its own, so server-side sorting and paging drop in unchanged.

Best Practices & Guidelines

Reach for the Data Table instead

These primitives are deliberately stateless. If you need search, pagination, row selection and batch actions wired up for you, use the Data Table — it composes the very same primitives and adds a state provider.

Keep colSpan honest

TableEmpty and TableExpandedRow both need a colSpan that matches your real column count. Derive it from a variable rather than hard-coding it, so conditional columns cannot drift out of sync.

Props Reference

Components

ComponentRendersPurpose
TabledivThe card wrapper. Provides variant, size and colour by context.
TableHeadingdivTitle bar above the table. Children align to the right as an action slot.
TableContentdiv > tableHorizontal scroll container plus the table element.
TableHeadertheadPlain pass-through.
TableBodytbodyOptional staggered entrance animation.
TableRowtrBody row, or a header row with isHeader.
TableHeadthHeader cell, optionally sortable.
TableCelltdBody cell.
TableFooterdivFooter bar below the table — pagers, totals, bulk controls.
TableEmptytr > tdFull-width empty state row.
TableExpandedRowtr > tdAnimated detail panel beneath a row.
TableExpandTogglebuttonRotating chevron for the row above.
TableRowActionsdivReveals its buttons on row hover or keyboard focus (always visible in soft).
TableRowActionbuttonRound icon button for a row action; label is required, tone="danger" for deletes.
TableActionbuttonToolbar button in the table's look — variant primary, secondary or ghost.
TableBadgespanStatus pill with a dot (tone: neutral, success, warning, danger, info), or a tag with dot={false}.
TablePersondivAvatar (photo or initials), a name and a muted second line.

Table

PropTypeDefaultDescription
variant"default" | "minimal" | "glass" | "soft""default"Bordered card, bare table, frosted glass panel, or the admin-dashboard look (see Data Table for the full soft example).
size"sm" | "md" | "lg""md"Row density — cell padding and text size.
color"primary" | "indigo" | "rose" | "emerald" | "zinc" | (hex)"primary"Accent for selected rows and interactive affordances. Any #rrggbb works.

TableHead

PropTypeDefaultDescription
align"left" | "center" | "right""left"Text alignment.
sortablebooleanfalseRenders the header as a sort button.
sortDirection"asc" | "desc" | nullnullControlled — drives the chevron and aria-sort.
onSort() => void—Fired on click. You reorder the data.

TableRow, TableCell, TableBody

ComponentPropTypeDescription
TableRowisHeaderbooleanApplies header styling instead of body row styling.
TableRowselectedbooleanApplies the selected background and sets data-selected.
TableCellalign"left" | "center" | "right"Text alignment.
TableBodyanimatebooleanStaggered entrance (Web Animations API) for direct child rows. Off by default.
TableBodyanimateKeyReact.KeyChange it to replay the entrance — e.g. on sort or page change.

TableExpandedRow, TableEmpty, TableRowActions

ComponentPropTypeDescription
TableExpandedRowopenbooleanGrid-animates the panel open or closed.
TableExpandedRowcolSpannumberRequired. Must match your column count.
TableEmptycolSpannumberRequired. Defaults its text to “No data available.”
TableRowActionsalign"left" | "center" | "right"Horizontal alignment inside the cell. Defaults to "right".
TableRowActionsalwaysVisiblebooleanSkip the hover reveal and keep the buttons visible. Defaults to visible in the soft variant.
Every primitive also forwards its ref and accepts the native attributes of the element it renders.