DataTable

Data Display

Block

Powerful table component with sorting, searching, pagination, and row selection.

Built With

1 component

This block uses the following UI components from the design system:

Checkbox

Preview

Complete table with search, sorting, pagination, 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

Simple Table

Basic table without search or pagination

Project	Tasks	Completed	Status
Marketing Strategy	42	38	Active
Content Pipeline	28	25	Active
Product Launch	56	12	Active
Team Operations	15	15	Completed

Minimal Header

Table without header background color

Project	Tasks	Completed	Status
Marketing Strategy	42	38	Active
Content Pipeline	28	25	Active
Product Launch	56	12	Active
Team Operations	15	15	Completed

Selectable Rows

Table with row selection enabled

Project	Tasks	Completed	Status
Marketing Strategy	42	38	Active
Content Pipeline	28	25	Active
Product Launch	56	12	Active
Team Operations	15	15	Completed

Props

DataTable component API reference

Prop	Type	Default	Description
`columns`	`DataTableColumn[]`	—	Array of column definitions (required)
`data`	`T[]`	—	Array of data objects (required)
`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
`headerBg`	`boolean`	`true`	Show header background
`actions`	`DataTableAction[]`	—	Array of row actions
`onSelectionChange`	`(selected: T[]) => void`	—	Callback when selection changes
`className`	`string`	—	Additional CSS classes

Column Definition

interface DataTableColumn {
 key: string // Data key to display
 label: string // Column header label
 sortable?: boolean // Enable sorting (default: true)
 render?: (value: any, row: T) => ReactNode // Custom cell renderer
}

Action Definition

interface DataTableAction {
 label: string // Action label (tooltip)
 icon: ReactNode // Icon to display
 onClick: (row: T, index: number) => void // Click handler
}

Usage

Import and implementation example

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

export default function Example() {
 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),
 },
 ]

 return (
 <DataTable
 columns={columns}
 data={users}
 selectable
 searchable
 pagination
 pageSize={10}
 actions={actions}
 onSelectionChange={(selected) => console.log(selected)}
 />
 )
}

Features

Built-in functionality

Sorting: Click column headers to sort
Search: Filter rows by any column
Pagination: Navigate through large datasets
Row selection: Single and multi-select
Custom renderers: Rich content in cells
Row actions: Icon buttons per row
Header variants: With or without background
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses semantic table elementColumn headers use th with scopeSelection checkboxes have aria-label

Keyboard Navigation

Key	Action
`Tab`	Navigate interactive elements
`Space`	Toggle row selection
`Enter`	Activate action buttons

Notes

Search input is labeled
Pagination controls are keyboard accessible
Sort state is communicated to screen readers
Selection count is announced

Related Components

DataGrid Editable Table Financial Table