Data Table

A data table built on top of the Table primitive with client-side sorting, text filtering, row selection, column visibility, and pagination, using plain React state.

Data Table Examples

Installation

# The data table is composed from existing primitives, already installed at:
# src/components/ui/shadcn/table.tsx
# src/components/ui/shadcn/checkbox.tsx
# src/components/ui/shadcn/dropdown-menu.tsx

Usage

'use client'

import * as React from 'react'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/shadcn/table'

type Payment = { id: string; email: string; amount: number }

export function DataTableDemo({ data }: { data: Payment[] }) {
  const [filter, setFilter] = React.useState('')

  const filtered = data.filter((row) =>
    row.email.toLowerCase().includes(filter.toLowerCase())
  )

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Email</TableHead>
          <TableHead className="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {filtered.map((row) => (
          <TableRow key={row.id}>
            <TableCell>{row.email}</TableCell>
            <TableCell className="text-right">{row.amount}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Components