Data/Data Table

DataTable

A full-featured data table with sortable columns, search, pagination, row selection, and custom cell rendering. Client-side and server-side data modes supported.

import { DataTable } from "@animui/ui"

Live preview

Click column headers to sort.

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

NameAlice Johnson

Emailalice@example.com

RoleAdmin

StatusActive

NameBob Smith

Emailbob@example.com

RoleEditor

StatusInactive

NameCarol White

Emailcarol@example.com

RoleViewer

StatusActive

NameDavid Brown

Emaildavid@example.com

RoleEditor

StatusActive

Props

Prop	Type	Default	Description
`columns`	`ColumnDef[]`	—	Column definitions: key, header, sortable, cell (for custom cell rendering).
`data`	`Record<string, unknown>[]`	—	Array of row objects. Each object's keys map to column keys.
`searchable`	`boolean`	`true`	Adds a search input that filters rows across all columns.
`pageSize`	`number`	`10`	Number of rows per page. Set to 0 to disable pagination.
`searchPlaceholder`	`string`	`"Search…"`	Placeholder text in the search input.
`onRowClick`	`(row: Record<string, unknown>) => void`	—	Called when a row is clicked.
`loading`	`boolean`	`false`	Shows a loading spinner while data is being fetched.
`emptyMessage`	`string`	`"No results found."`	Message shown when data is empty or no rows match the search.
`toolbar`	`React.ReactNode`	—	Custom toolbar slot rendered to the right of the search input.
`mobileLayout`	`"cards" \| "scroll"`	`"cards"`	How the table renders on mobile — card list or horizontal scroll.
`rowClassName`	`(row) => string`	—	Function that returns additional classes for each row.
`caption`	`string`	—	Accessible caption for the table (screen reader only).
`className`	`string`	—	Additional classes on the table wrapper.