DataTable - Basic Features

import { DataTable, DataTableColumnHeader, createSelectionColumn } from '@hascanb/arf-ui-kit/datatable-kit'
import { ColumnDef } from '@tanstack/react-table'

type User = {
  id: string
  name: string
  email: string
  role: string
  status: string
}

const columns: ColumnDef<User>[] = [
  createSelectionColumn<User>(), // Checkbox column
  {
    accessorKey: 'name',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Name" />
    ),
    cell: ({ row }) => <div className="font-medium">{row.getValue('name')}</div>
  },
  {
    accessorKey: 'email',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Email" />
    )
  },
  {
    accessorKey: 'status',
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Status" />
    ),
    cell: ({ row }) => (
      <Badge variant={row.getValue('status') === 'Active' ? 'default' : 'secondary'}>
        {row.getValue('status')}
      </Badge>
    )
  }
]

export default function UsersPage() {
  const [selectedRows, setSelectedRows] = useState({})
  
  return (
    <DataTable
      data={users}
      columns={columns}
      enablePagination
      enableSorting
      enableGlobalFilter
      enableColumnVisibility
      enableRowSelection
      rowSelection={selectedRows}
      onRowSelectionChange={setSelectedRows}
      onRowClick={(row) => console.log('Clicked:', row.original)}
    />
  )
}