Table Examples

'use client'
 
import { Table, TableTextColumn } from '@/components/ui'
 
export default function UsersTable({ users }) {
  return (
    <Table data={users}>
      <TableTextColumn accessor="name" header="Name" sortable searchable />
      <TableTextColumn accessor="email" header="Email" searchable />
      <TableTextColumn accessor="role" header="Role" sortable />
    </Table>
  )
}

'use client'
 
import { Table, TableSelectColumn, TableTextColumn, TableActionsColumn, TableAction, Button } from '@/components/ui'
import { Plus, Edit, Trash, Eye } from 'lucide-react'
 
export default function PostsTable({ data, onCreate, onView, onEdit, onDelete }) {
  return (
    <>
      <Button onClick={onCreate}>
        <Plus className="mr-2 h-4 w-4" />
        Create Post
      </Button>
      <Table data={data}>
        <TableSelectColumn />
        <TableTextColumn accessor="title" header="Title" searchable />
        <TableTextColumn accessor="content" header="Content" />
        <TableActionsColumn>
          <TableAction icon={Eye} label="View" onClick={onView} />
          <TableAction icon={Edit} label="Edit" onClick={onEdit} />
          <TableAction icon={Trash} label="Delete" onClick={onDelete} variant="destructive" />
        </TableActionsColumn>
      </Table>
    </>
  )
}

<Table data={users} onSelectionChange={(rows) => console.log(rows)}>
  <TableSelectColumn />
  <TableTextColumn accessor="name" header="Name" />
</Table>