Table

Installation

npx shadcn@latest add @emstein-ui/table

Usage

import { Table, type EmsteinUITableColumn } from "@/components/emstein-ui/table"

type User = {
  id: string
  name: string
  email: string
  score: number
}

const columns: EmsteinUITableColumn<User>[] = [
  { key: "name", label: "Name", type: "text" },
  { key: "email", label: "Email", type: "longText" },
  { key: "score", label: "Score", type: "number", align: "right" },
]

export function UsersTable({ users }: { users: User[] }) {
  return <Table data={users} columns={columns} getRowId={(user) => user.id} />
}

Pass data and columns; virtualization, sorting, and resizing work out of the box. Each column's type picks a sensible width, and every preset can be overridden. See column widths.

Sorting and resizing

Click anywhere in a sortable header cell to switch between ascending and descending order. The first sortable column starts sorted ascending; use initialSort to pick another column, or initialSort={false} to start unsorted.

Hover a header to reveal its resize divider, then drag. A column trades width with its neighbor, so the table keeps its overall width while you resize. Turn either feature off for the whole table with sortable and resizable, or per column with the same keys.

Scroll modes

By default, rows are virtualized against the window: the table grows with its content and the page scrolls. Set scrollMode="table" to render inside a fixed-height scroll container instead, as in the preview above.

<Table
  data={rows}
  columns={columns}
  scrollMode="table"
  tableHeight={480}
/>

Examples

Row selection

Pass selection to add a checkbox column. Control it with selectedRows and onSelectedRowsChange, or pass defaultSelectedRows and let the table manage it. Ids come from getRowId.

Footer

Set footer on a column to render a summary row. Pass a value, or a function that receives the full data and the currently rendered rows.

Primitives

Render Table without data and columns and you get a plain table with the same primitives as shadcn/ui, so existing table markup keeps working after you switch.

Column widths

Every column type sets a starting width, a minimum width, and a grow factor. When the container is wider than the columns, the extra space is shared in proportion to grow. When it is narrower, columns keep their minimum widths and the table scrolls horizontally.

Override any preset per column with width, minWidth, and grow.

const columns: EmsteinUITableColumn<Payout>[] = [
  { key: "name", label: "Name", type: "text" },
  // Takes three shares of any extra space.
  { key: "description", label: "Description", type: "longText", grow: 3 },
  // Fixed at 140px: never grows, still resizable.
  { key: "net", label: "Net", type: "currency", align: "right", width: 140, grow: false },
]

API Reference

Table

Column

Columns are typed as EmsteinUITableColumn<TData>.

Selection

The selection prop is typed as EmsteinUITableSelection. Pass an empty object for uncontrolled selection with nothing selected.