Data Table

import type { ColumnDef } from '@tanstack/react-table'
import { DataTable, DataTableColumnHeader } from '@otfdashkit/ui'

type Row = { id: number; name: string; status: string; amount: number }

const tableData: Row[] = [
  { id: 1, name: 'Alice Johnson', status: 'Active', amount: 1200 },
  { id: 2, name: 'Bob Smith', status: 'Inactive', amount: 800 },
  { id: 3, name: 'Carol White', status: 'Active', amount: 3400 },
  { id: 4, name: 'David Lee', status: 'Pending', amount: 560 },
  { id: 5, name: 'Eve Davis', status: 'Active', amount: 2100 },
]

const tableColumns: ColumnDef<Row>[] = [
  { accessorKey: 'id', header: ({ column }) => <DataTableColumnHeader column={column} title="ID" /> },
  { accessorKey: 'name', header: ({ column }) => <DataTableColumnHeader column={column} title="Name" /> },
  { accessorKey: 'status', header: 'Status' },
  { accessorKey: 'amount', header: ({ column }) => <DataTableColumnHeader column={column} title="Amount" />, cell: ({ getValue }) => `$${(getValue() as number).toLocaleString()}` },
]

export function Example() {
  return (
    <DataTable columns={tableColumns} data={tableData} searchable searchColumn="name" pageSize={3} />
  )
}