Data Table

npx fivui add data-table

npm install @tanstack/react-table

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

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

const columns: ColumnDef<User>[] = [
  {
    accessorKey: "name",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Name" />
    ),
  },
  {
    accessorKey: "email", 
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Email" />
    ),
  },
  {
    accessorKey: "status",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Status" />
    ),
  },
]

const data: User[] = [
  { id: "1", name: "John Doe", email: "john@example.com", status: "active" },
  // ... more data
]

export function UserTable() {
  return (
    <DataTable 
      columns={columns} 
      data={data}
      searchColumn="email"
    />
  )
}

export function AdvancedUserTable() {
  return (
    <DataTable 
      columns={columns} 
      data={data}
      // Search configuration
      searchColumn="email"
      searchPlaceholder="Filter by email address..."
      showSearch={true}
      onSearch={(value) => console.log('Searching:', value)}
      
      // Pagination configuration
      showRowSelection={true}
      showRowsPerPage={true}
      showPageInfo={true}
      showFirstLastButtons={true}
      showPreviousNextButtons={true}
      pageSizeOptions={[5, 10, 25, 50, 100]}
      
      // Custom text
      rowSelectionText="users selected"
      rowsPerPageText="Users per page"
      pageInfoFormat={(current, total) => `${current} / ${total}`}
      
      // Event handlers
      onPageChange={(page) => console.log('Page:', page)}
      onPageSizeChange={(size) => console.log('Size:', size)}
    />
  )
}

// Basic sortable column
{
  accessorKey: "name",
  header: ({ column }) => (
    <DataTableColumnHeader column={column} title="Name" />
  ),
}

// Right-aligned column (for numbers)
{
  accessorKey: "amount",
  header: ({ column }) => (
    <DataTableColumnHeader 
      column={column} 
      title="Amount" 
      align="end" 
    />
  ),
}

// Non-sortable column
{
  accessorKey: "actions",
  header: ({ column }) => (
    <DataTableColumnHeader 
      column={column} 
      title="Actions" 
      canSort={false}
    />
  ),
}

// Non-hideable column
{
  accessorKey: "id",
  header: ({ column }) => (
    <DataTableColumnHeader 
      column={column} 
      title="ID" 
      canHide={false}
    />
  ),
}