Data Table

Copyimport { ColumnDef } from "@tanstack/react-table"
 
import { DataTable } from "@/components/ui/data-table"

Copytype User = {
  id: string
  name: string
  email: string
}
 
const columns: ColumnDef<User>[] = [
  { accessorKey: "name", header: "Name" },
  { accessorKey: "email", header: "Email" },
]
 
const data: User[] = [
  { id: "1", name: "John", email: "john@example.com" },
  { id: "2", name: "Jane", email: "jane@example.com" },
]
 
return <DataTable columns={columns} data={data} />

Copyimport { DataTableColumnHeader } from "@/components/ui/data-table"
 
const columns: ColumnDef<Task>[] = [
  {
    accessorKey: "title",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Title" />
    ),
  },
]

Copyimport { DataTable, FacetedFilterConfig } from "@/components/ui/data-table"
 
const facetedFilters: FacetedFilterConfig[] = [
  {
    column: "status",
    title: "Status",
    options: [
      { label: "Todo", value: "todo" },
      { label: "Done", value: "done" },
    ],
  },
]
 
return (
  <DataTable columns={columns} data={data} facetedFilters={facetedFilters} />
)

Copyconst columns: ColumnDef<Payment>[] = [
  {
    accessorKey: "email",
    header: "Email",
  },
  {
    accessorKey: "amount",
    header: () => <div className="text-right">Amount</div>,
    cell: ({ row }) => {
      const amount = parseFloat(row.getValue("amount"))
      const formatted = new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
      }).format(amount)
      return <div className="text-right font-medium">{formatted}</div>
    },
  },
]

Copyimport { Checkbox } from "@/components/ui/checkbox"
 
// In your columns array:
{
  id: "select",
  header: ({ table }) => (
    <Checkbox
      checked={table.getIsAllPageRowsSelected()}
      onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
    />
  ),
  cell: ({ row }) => (
    <Checkbox
      checked={row.getIsSelected()}
      onCheckedChange={(value) => row.toggleSelected(!!value)}
    />
  ),
  enableSorting: false,
  enableHiding: false,
}

Copyconst [sorting, setSorting] = useState<SortingState>([])
const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 })
 
return (
  <DataTable
    columns={columns}
    data={data}
    sorting={sorting}
    onSortingChange={setSorting}
    pagination={pagination}
    onPaginationChange={setPagination}
  />
)

Copyimport { SortingState } from "@tanstack/react-table"
import { parseAsInteger, parseAsJson, useQueryState } from "nuqs"
 
export function UsersTable({ data, columns }) {
  const [page, setPage] = useQueryState("page", parseAsInteger.withDefault(0))
  const [pageSize, setPageSize] = useQueryState(
    "size",
    parseAsInteger.withDefault(10)
  )
  const [sorting, setSorting] = useQueryState<SortingState>(
    "sort",
    parseAsJson<SortingState>().withDefault([])
  )
 
  return (
    <DataTable
      columns={columns}
      data={data}
      pagination={{ pageIndex: page, pageSize }}
      onPaginationChange={(state) => {
        setPage(state.pageIndex)
        setPageSize(state.pageSize)
      }}
      sorting={sorting}
      onSortingChange={setSorting}
    />
  )
}