On this page

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@latest

Includes @ninna-ui/core. CSS setup required.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.

Live preview/ Default

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.

Live preview/ Default

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.

Live preview/ Default

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.

Live preview/ Default

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.

Live preview/ Default

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