Data Table

npx shadcn@latest add https://atomx.acau.net/r/data-table.json

import { DataTable } from '@/components/ui/data-table'
import type { ColumnDef } from '@tanstack/react-table'

type User = { id: string; name: string; email: string }

const columns: ColumnDef<User>[] = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
]

export default function Page() {
  return <DataTable data={users} columns={columns} />
}

<DataTable
  data={users}
  columns={columns}
  pageSizeOptions={[10, 25, 100]}
/>

const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 25 })

<DataTable
  data={users}
  columns={columns}
  pagination={pagination}
  onPaginationChange={setPagination}
  pageCount={totalPages}
/>

<DataTable data={users} columns={columns} enableMultiSort />

const columns: ColumnDef<User>[] = [
  { accessorKey: 'id', header: 'ID', enableSorting: false },
  { accessorKey: 'name', header: 'Name' },
]

const [sorting, setSorting] = React.useState<SortingState>([])

<DataTable
  data={users}
  columns={columns}
  sorting={sorting}
  onSortingChange={setSorting}
  manualSorting
/>

const [search, setSearch] = React.useState('')

<DataTable
  data={users}
  columns={columns}
  globalFilter={search}
  onGlobalFilterChange={setSearch}
  toolbarSlot={
    <input
      value={search}
      onChange={(e) => setSearch(e.target.value)}
      placeholder="Search…"
      className="h-8 w-64 rounded border px-2 text-sm"
    />
  }
/>

{ accessorKey: 'email', header: 'Email', enableColumnFilter: true }

<DataTable
  data={users}
  columns={columns}
  columnFilters={columnFilters}
  onColumnFiltersChange={setColumnFilters}
  manualFiltering
/>

<DataTable
  data={users}
  columns={columns}
  enableRowSelection="single"
  rowSelection={rowSelection}
  onRowSelectionChange={setRowSelection}
/>

<DataTable
  data={users}
  columns={columns}
  enableRowSelection
  rowSelection={rowSelection}
  onRowSelectionChange={setRowSelection}
/>

<DataTable
  data={users}
  columns={columns}
  enableRowSelection={(row) => !row.original.isLocked}
/>

<DataTable
  data={orders}
  columns={columns}
  renderSubRow={({ row, colSpan, onClose }) => (
    <div className="p-4">
      <h3 className="font-medium">Order {row.original.id} details</h3>
      <OrderLineItems items={row.original.items} />
      <button onClick={onClose}>Close</button>
    </div>
  )}
/>

<DataTable
  data={orders}
  columns={columns}
  renderSubRow={...}
  getRowCanExpand={(row) => row.original.items.length > 0}
/>

{ accessorKey: 'id', header: 'ID', enableHiding: false }

<DataTable
  data={users}
  columns={columns}
  columnVisibility={columnVisibility}
  onColumnVisibilityChange={setColumnVisibility}
/>

<DataTable
  data={users}
  columns={columns}
  enableColumnOrdering
  columnOrder={columnOrder}
  onColumnOrderChange={setColumnOrder}
/>

{ accessorKey: 'checkbox', enableResizing: false }

{ accessorKey: 'name', minSize: 80, maxSize: 400 }

const columns: ColumnDef<User>[] = [
  {
    accessorKey: 'name',
    header: 'Name',
    meta: { sticky: 'left' },
  },
  { accessorKey: 'email', header: 'Email' },
  {
    id: 'actions',
    header: 'Actions',
    meta: { sticky: 'right' },
    cell: ({ row }) => <ActionsMenu row={row} />,
  },
]

const columns: ColumnDef<User>[] = [
  {
    accessorKey: 'name',
    header: 'Name',
    meta: {
      editable: (field, row) => (
        <input
          {...field}
          className="w-full rounded border px-2 py-1 text-sm"
          autoFocus
        />
      ),
      // optionally gate editing per-row
      isEditable: (row) => row.original.status !== 'locked',
    },
  },
]

<DataTable
  data={users}
  columns={columns}
  onRowSubmit={async (row, values, form) => {
    try {
      await api.updateUser(row.original.id, values)
    } catch (err) {
      form.setError('name', { message: 'Name already taken' })
      throw err  // keeps cell in edit mode
    }
  }}
/>

<DataTable
  data={users}
  columns={columns}
  onRowClick={(row, event) => {
    router.push(`/users/${row.original.id}`)
  }}
/>

<DataTable
  data={users}
  columns={columns}
  onRowContextMenu={(row, event) => {
    event.preventDefault()
    openContextMenu({ row, x: event.clientX, y: event.clientY })
  }}
/>

{
  accessorKey: 'status',
  header: 'Status',
  meta: {
    onCellClick: (row, value, event) => {
      toggleStatus(row.original.id)
    },
  },
}

<DataTable
  data={users}
  columns={columns}
  enableRowPinning
  rowPinning={rowPinning}
  onRowPinningChange={setRowPinning}
/>

<DataTable
  data={users}
  columns={columns}
  enableRowPinning
  editingRowPin="top"
  onRowSubmit={handleSubmit}
/>

<DataTable
  data={users}
  columns={columns}
  cardBreakpoint="md"
/>

{
  accessorKey: 'name',
  header: 'Name',
  meta: { isPrimaryColumn: true },
}

<DataTable
  data={largeDataset}
  columns={columns}
  virtualized
  rowHeight={48}
/>