DataTable

Feature-rich data table with sorting, custom cells, and loading states.

import { DataTable } from "@ninna-ui/data-display"

pnpm add @ninna-ui/data-display

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the DataTable component in your application.

import { DataTable } from "@ninna-ui/data-display";

const columns = [
  { id: "name", header: "Name", accessorKey: "name", sortable: true },
  { id: "email", header: "Email", accessorKey: "email" },
];

export default function Example() {
  return <DataTable data={users} columns={columns} rowKey="id" />;
}

Basic

A sortable data table with column headers.

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

Striped

Alternating row colors for readability.

Name	Email	Role
Alice Johnson	alice@example.com	Admin
Bob Smith	bob@example.com	Editor
Carol White	carol@example.com	Viewer
Dave Brown	dave@example.com	Editor

Compact

Reduced padding for dense data.

Name	Email	Role
Alice Johnson	alice@example.com	Admin
Bob Smith	bob@example.com	Editor
Carol White	carol@example.com	Viewer
Dave Brown	dave@example.com	Editor

Custom Cells

Custom cell renderers for rich content like badges.

Name	Email	Status
Alice Johnson	alice@example.com	Active
Bob Smith	bob@example.com	Active
Carol White	carol@example.com	Inactive
Dave Brown	dave@example.com	Active

Advanced

Search, pagination, row actions, and status badges.

Showing 3 of 8 users
Name	Email	Role	Status
Alice Johnson	alice@example.com	Admin	Active
Bob Smith	bob@example.com	Editor	Active
Carol White	carol@example.com	Viewer	Inactive

API Reference

Complete list of props for the DataTable component.

DataTable

Prop	Type	Default	Description
`aria-label`	`string`	-	Accessible label for the table element (recommended for screen readers)
`data*`	`T[]`	-	Array of row data
`columns*`	`DataTableColumn<T>[]`	-	Column definitions
`rowKey*`	`keyof T`	-	Unique key field for rows
`striped`	`boolean`	`false`	Alternating row background colors
`compact`	`boolean`	`false`	Reduced cell padding
`bordered`	`boolean`	`false`	Show cell borders
`loading`	`boolean`	`false`	Show loading overlay
`emptyMessage`	`ReactNode`	-	Message when data array is empty
`caption`	`string`	-	Accessible table caption
`onSort`	`(state: SortState) => void`	-	Callback when sort changes
`className`	`string`	-	Additional CSS classes

DataTableColumn

Prop	Type	Default	Description
`id*`	`string`	-	Unique column identifier
`header*`	`string \| ReactNode`	-	Column header content
`accessorKey`	`keyof T`	-	Key to access row data
`cell`	`(row: T) => ReactNode`	-	Custom cell renderer
`sortable`	`boolean`	`false`	Whether the column is sortable

Accessibility

Renders a native <table> for full semantic support
Supports aria-label prop for labeling the table
Sortable columns use aria-sort to announce sort state
Sort buttons are keyboard accessible
Loading and empty states provide accessible feedback
Caption is rendered via <caption> for screen reader context when provided