Data TableNew

Preview

Setup

Usage

Describe the columns and pass your rows. Out of the box the table searches, filters, sorts and pages for you.

import { DataTable, type DataTableColumn } from "@/components/ui/data-table"

type User = { id: number; name: string; role: string; joined: string }

const columns: DataTableColumn<User>[] = [
  { key: "name", header: "Name", sortable: true, sticky: "left" },
  { key: "role", header: "Role", sortable: true },
  { key: "joined", header: "Joined", align: "right" },
]

export function Users({ users }: { users: User[] }) {
  return (
    <DataTable
      data={users}
      columns={columns}
      rowKey={(user) => user.id}
      title="Team"
      searchable
      filters={[{ key: "role", label: "Role", options: ["Admin", "Editor", "Viewer"] }]}
    />
  )
}

Custom cells

cell renders anything. Sorting and search still use the raw value, or value if you need something else, such as a date as a number.

{
  key: "joined",
  header: "Joined",
  sortable: true,
  value: (user) => new Date(user.joined).getTime(),
  cell: (user) => <time dateTime={user.joined}>{formatDate(user.joined)}</time>,
}

Tabs, dates, selection and columns

Every part of the toolbar is opt-in, so turn on only what your page needs.

<DataTable
  data={orders}
  columns={columns}
  rowKey={(order) => order.id}
  tabs={{ key: "status", options: ["Pending", "In transit", "Delivered"] }}
  dateRange={{ key: "shippedAt", label: "Any ship date" }}
  selectable
  onSelectionChange={(ids) => setSelectedIds(ids)}
  columnToggle
  pageSizeOptions={[10, 25, 50]}
/>

• tabs shows one value of a field at a time, with an "All" tab first.
• dateRange keeps rows whose field falls in the range. Values can be Dates, timestamps or ISO strings.
• selectable adds a checkbox to each row and one in the header for the page. Picks survive paging, searching and filtering, so pass rowKey.
• columnToggle adds a menu to show and hide columns. Pinned columns always stay.

Bulk delete and row actions

While rows are picked, a bar slides in over the header with the count, Delete and Clear. Delete asks first; deleting every row also asks you to type delete. Remove the rows from your data in onDeleteRows.

Give each row a ⋯ menu with RowActions. It takes the same entries as the Menubar, so labels, separators, icons and red destructive items all work, and it opens above the row when there's no room below.

import { ConfirmDialog, DataTable, RowActions } from "@/components/ui/data-table"

<DataTable
  data={services}
  rowKey={(s) => s.id}
  selectable
  rowNoun={["service", "services"]}
  onDeleteRows={(rows) => removeServices(rows.map((s) => s.id))}
  columns={[
    ...columns,
    {
      key: "actions",
      header: <span className="sr-only">Actions</span>,
      sticky: "right",
      cell: (s) => (
        <RowActions
          label={`Actions for ${s.name}`}
          items={[
            { label: "Redeploy", onSelect: () => redeploy(s.id) },
            { type: "separator" },
            { label: "Delete", destructive: true, onSelect: () => setDeleting(s) },
          ]}
        />
      ),
    },
  ]}
/>

ConfirmDialog is exported too, so a single-row Delete can ask the same way.

Server-side data

Set manual when your API does the work. The table shows data as it is and tells you what changed: search waits 300ms after typing stops, and every change returns to page 1.

<DataTable
  manual
  data={page.rows}
  pageCount={page.pageCount}
  page={pageNumber}
  onPageChange={setPageNumber}
  onSearchChange={setQuery}
  onFiltersChange={setFilters}
  onSortChange={setSort}
  onTabChange={setStatus}
  onDateRangeChange={setDates}
  onPageSizeChange={setPageSize}
  loading={isFetching}
  columns={columns}
  searchable
/>

Props

Columns

Accessibility

• A real table with th scope="col"; sorted columns announce aria-sort
• Sort controls are buttons, so headers sort from the keyboard
• Filters, the columns menu and row selection use real checkboxes; Escape or a click outside closes menus
• Tabs come from Sliding Tabs, so arrow keys move between them
• Selected rows set aria-selected, and the page checkbox reports a mixed state when some rows are picked
• The selection bar is a labelled toolbar and announces the count as it changes
• The confirmation is a modal alertdialog: focus stays inside, starts on Cancel, and Escape cancels
• Row menus are real menus: arrow keys, Home, End and Escape work, and focus returns to the ⋯ button
• Pagination is a labelled nav, and the current page has aria-current
• Loading rows set aria-busy on the table body