Browse components

Table

Data table with sortable headers (flipping chevron arrows), rows that glide into their new order, hover and selection states with animated checkboxes and a sticky blurred header.

September invoices

INV-1044	Ines Duarteines@lumen.co	Overdue	$2,990
INV-1046	Ava Rossiava@fable.studio	Pending	$1,640
INV-1042	Maya Chenmaya@acme.app	Paid	$1,250
INV-1048	Zoe Martinzoe@kite.app	Overdue	$890
INV-1045	Sam Okaforsam@orbit.dev	Paid	$735
INV-1043	Leo Parkleo@northwind.io	Pending	$480
INV-1047	Noah Bergnoah@pine.so	Paid	$320

Open

selectable

stickyHeader

Installation

npx shadcn@latest add @glint-ui/table

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/table.json

Usage

import { Table } from "@/components/ui/table";

<Table
  maxHeight={320}
  rows={invoices}
  columns={[
    { key: "customer", header: "Customer", sortable: true },
    { key: "amount", header: "Amount", sortable: true, align: "right" },
  ]}
/>

Props

Prop	Type	Default	Description
selectable	boolean	true	Checkbox column with select-all.
stickyHeader	boolean	true	Keep the header visible while scrolling (with maxHeight).
columns	ReactNode	—	{ key, header, sortable?, align?, cell?, sortValue? }[]
rows	ReactNode	—	Row objects; each needs a unique `id`.
maxHeight	ReactNode	—	Scroll container height (number px or CSS length).
defaultSort	ReactNode	—	{ key, direction: "asc" \| "desc" } or null.
selected	ReactNode	—	Selected row ids (controlled, with onSelectionChange).
className	string	—	Extra classes for the root element.