DataTable

Purpose

DataTable is a full-featured table component for displaying and interacting with tabular data:

• Column sorting (client or server-side)
• Column filtering
• Pagination (page-based or cursor-based)
• Row selection with bulk actions
• Column visibility and reordering
• CSV export
• Density options

When to use

Use DataTable for:

• Admin lists with many records
• Data that needs sorting, filtering, or pagination
• Tables with row selection for bulk operations
• Server-side paginated data

For simpler needs, see SimpleSortableTable.

Basic usage

import { DataTable, type DTColumn } from '@/shared/ui/components/table/DataTable'

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

const columns: DTColumn<User>[] = [
  {
    id: 'name',
    header: 'Name',
    cell: (row) => row.name,
    sortable: true,
  },
  {
    id: 'email',
    header: 'Email',
    cell: (row) => row.email,
    sortable: true,
  },
  {
    id: 'status',
    header: 'Status',
    cell: (row) => <Badge>{row.status}</Badge>,
    filter: {
      type: 'select',
      options: [
        { label: 'Active', value: 'active' },
        { label: 'Inactive', value: 'inactive' },
      ],
    },
  },
]

export function UserTable({ users }: { users: User[] }) {
  return (
    <DataTable
      columns={columns}
      data={users}
      enableRowSelection
      onRowSelectionChange={(selected) => console.log('Selected:', selected)}
      pageSizeOptions={[10, 25, 50]}
    />
  )
}

Props

DataTableProps

Prop	Type	Default	Description
columns	DTColumn<T>[]	Required	Column definitions
data	T[]	Required	Data array
isLoading	boolean	false	Show loading state
isError	boolean	false	Show error state
paginationMode	'page' | 'cursor'	'page'	Pagination strategy
pageSizeOptions	number[]	[10, 25, 50]	Page size options
onPaginationChange	(update) => void	-	Pagination change handler
onSortingChange	(sorting) => void	-	Sorting change handler
onColumnFiltersChange	(filters) => void	-	Filter change handler
onRowSelectionChange	(rows) => void	-	Selection change handler
enableRowSelection	boolean	false	Enable row checkboxes
rowActions	(row) => ReactNode	-	Row action buttons
emptyState	ReactNode	-	Custom empty state
density	'compact' | 'regular'	'regular'	Row density

DTColumn

Property	Type	Description
id	string	Unique column identifier
header	ReactNode	Column header content
cell	(row: T) => ReactNode	Cell renderer
sortable	boolean	Enable sorting
sortId	string	Server-side sort field
visible	boolean	Initial visibility
width	number	Initial width in px
filter	FilterConfig	Column filter configuration

Filter types

filter: { type: 'text', placeholder?: string }
filter: { type: 'select', options: Array<{ label: string, value: string }> }
filter: { type: 'date-range' }

---

SimpleSortableTable

Purpose

A lighter table component built on TanStack Table for simple sortable tables without the full DataTable feature set.

When to use

Use SimpleSortableTable when you need:

• Client-side sorting only
• No pagination or filtering
• Simpler API with TanStack Table column definitions

Basic usage

import { SimpleSortableTable } from '@/shared/ui/components/table/SimpleSortableTable'
import { type ColumnDef } from '@tanstack/react-table'

type Task = { id: string; title: string; priority: number }

const columns: ColumnDef<Task>[] = [
  {
    accessorKey: 'title',
    header: 'Title',
  },
  {
    accessorKey: 'priority',
    header: 'Priority',
    enableSorting: true,
  },
]

export function TaskTable({ tasks }: { tasks: Task[] }) {
  return (
    <SimpleSortableTable
      columns={columns}
      data={tasks}
      onRowClick={(task) => console.log('Clicked:', task)}
    />
  )
}

Props

Prop	Type	Default	Description
columns	ColumnDef<T>[]	Required	TanStack Table column definitions
data	T[]	Required	Data array
initialSort	SortingState	[]	Initial sort state
density	'compact' | 'spacious'	'spacious'	Row density
onRowClick	(row: T) => void	-	Row click handler
className	string	-	Additional CSS class