DataTable

Ready

A powerful table component with sorting, searching, pagination, and row selection.

Full Featured Table

Complete table with search, sorting, pagination, row selection, and actions

Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	User	Active
Charlie Brown	charlie@example.com	User	Inactive
Diana Prince	diana@example.com	Manager	Active
Ethan Hunt	ethan@example.com	User	Active

Showing 1 to 5 of 8

Simple Table

Basic table without search or pagination

Product	Category	Price	Stock
MacBook Pro	Laptops	$2,499	12
iPhone 15	Phones	$999	48
iPad Air	Tablets	$599	24
AirPods Pro	Audio	$249	67

Minimal Table

Table without header background color

Product	Category	Price	Stock
MacBook Pro	Laptops	$2,499	12
iPhone 15	Phones	$999	48
iPad Air	Tablets	$599	24
AirPods Pro	Audio	$249	67

Selectable Rows

Table with row selection enabled

Product	Category	Price	Stock
MacBook Pro	Laptops	$2,499	12
iPhone 15	Phones	$999	48
iPad Air	Tablets	$599	24
AirPods Pro	Audio	$249	67

API Reference

Props and configuration options

DataTable Props

Prop	Type	Default	Description
columns	DataTableColumn[]	required	Array of column definitions
data	T[]	required	Array of data objects
selectable	boolean	false	Enable row selection
searchable	boolean	true	Enable search functionality
pagination	boolean	true	Enable pagination
pageSize	number	5	Number of rows per page
actions	DataTableAction[]	[]	Array of row actions
className	string	-	Additional CSS classes
onSelectionChange	function	-	Callback when selection changes

Column Definition

Property	Type	Required	Description
key	string	Yes	Data key to display
label	string	Yes	Column header label
sortable	boolean	No	Enable sorting (default: true)
render	function	No	Custom cell renderer

Action Definition

Property	Type	Required	Description
label	string	Yes	Action label (tooltip)
icon	ReactNode	Yes	Icon to display
onClick	function	Yes	Click handler (row, index)

Usage Example

How to use the DataTable component

import { DataTable } from '@/components/ui/data-table'
import { Edit2, Trash2 } from 'lucide-react'
import { Badge } from '@/components/ui/badge'

const columns = [
  { key: 'name', label: 'Name' },
  { key: 'email', label: 'Email' },
  {
    key: 'status',
    label: 'Status',
    render: (value) => (
      <Badge variant={value === 'Active' ? 'success' : 'default'}>
        {value}
      </Badge>
    ),
  },
]

const actions = [
  {
    label: 'Edit',
    icon: <Edit2 className="w-4 h-4" />,
    onClick: (row) => console.log('Edit', row),
  },
  {
    label: 'Delete',
    icon: <Trash2 className="w-4 h-4" />,
    onClick: (row) => console.log('Delete', row),
  },
]

<DataTable
  columns={columns}
  data={users}
  selectable
  searchable
  pagination
  pageSize={10}
  actions={actions}
/>