Docs/DataTable

DataTable

Powerful table component with sorting, filtering, pagination, and search.

Usage

tsx

1import { DataTable } from '@storm-ds/ui'
2
3const columns = [
4  { key: 'name', label: 'Name', sortable: true },
5  { key: 'email', label: 'Email', searchable: true }
6]
7
8const data = [
9  { name: 'John', email: 'john@example.com' },
10  { name: 'Jane', email: 'jane@example.com' }
11]
12
13<DataTable columns={columns} data={data} />

Basic Table

Name	Email	Role
Alice Johnson	alice@example.com	Admin
Bob Smith	bob@example.com	Editor
Carol White	carol@example.com	Viewer
David Brown	david@example.com	Editor
Eve Davis	eve@example.com	Admin

With Sorting

Name	Email	Status	Role
Alice Johnson	alice@example.com	Active	Admin
Bob Smith	bob@example.com	Pending	Editor
Carol White	carol@example.com	Active	Viewer
David Brown	david@example.com	Inactive	Editor
Eve Davis	eve@example.com	Active	Admin

tsx

1<DataTable
2  columns={[
3    { key: 'name', label: 'Name', sortable: true },
4    { key: 'role', label: 'Role', sortable: true }
5  ]}
6  data={data}
7/>

Searchable

Name	Email	Status	Role
Alice Johnson	alice@example.com	Active	Admin
Bob Smith	bob@example.com	Pending	Editor
Carol White	carol@example.com	Active	Viewer
David Brown	david@example.com	Inactive	Editor
Eve Davis	eve@example.com	Active	Admin

tsx

1<DataTable columns={columns} data={data} searchable searchableFields={['name', 'email']} />

With Pagination

Name	Email	Status	Role
Alice Johnson	alice@example.com	Active	Admin
Bob Smith	bob@example.com	Pending	Editor
Carol White	carol@example.com	Active	Viewer
David Brown	david@example.com	Inactive	Editor
Eve Davis	eve@example.com	Active	Admin

12 results

1 / 3

tsx

1<DataTable columns={columns} data={data} pageSize={10} />

Full Featured

Name	Email	Status	Role
Alice Johnson	alice@example.com	Active	Admin
Bob Smith	bob@example.com	Pending	Editor
Carol White	carol@example.com	Active	Viewer
David Brown	david@example.com	Inactive	Editor
Eve Davis	eve@example.com	Active	Admin

12 results

1 / 3

Props

Prop	Type	Default	Description
columns	Column[]	-	Column definitions with key, label, sortable, searchable
data	Record<string, any>[]	-	Array of row data objects
pageSize	number	-	Rows per page (enables pagination)
searchable	boolean	false	Enable search bar
searchableFields	string[]	-	Fields to search across
onRowClick	(row: Record<string, any>) => void	-	Row click handler
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's DataTable for displaying and interacting with tabular data. Import: `import { DataTable } from '@storm-ds/ui'`. Mark with 'use client'. Props: columns (array with key/label/sortable/searchable), data (array of objects), pageSize (optional for pagination), searchable (boolean), searchableFields (array of column keys), onRowClick (handler), className. Features: sortable columns, search across specified fields, pagination, responsive. Columns array defines structure, each column can be marked sortable/searchable. Data array provides row data. PageSize enables pagination. Example: `<DataTable columns={[{key:'name',label:'Name',sortable:true}]} data={users} />`, `<DataTable columns={cols} data={data} searchable searchableFields={['name']} pageSize={10} onRowClick={handleClick} />`

Table

Calendar