DataTable

A full-featured, column-definition driven data table with client-side sorting, row selection with indeterminate header checkbox, and pagination.

Installation

npx @obi/ui add data-table

Preview

Paginator:

			Status
Alice Chen	Engineer	Platform	Active	2022-03-14	$145,000
Bob Ruiz	Designer	Product	Away	2021-07-01	$130,000
Carol Smith	Engineering Mgr	Platform	Active	2020-01-20	$165,000
Dave Park	Data Analyst	Analytics	Active	2023-05-10	$120,000
Eve Torres	Designer	Product	Active	2022-11-03	$128,000

Showing 1–5 of 12

Usage

'use client';

import { useState } from 'react';
import DataTable, { type ColumnDef } from '@/src/components/DataTable/DataTable';

interface Person { id: number; name: string; role: string; status: string; }

const COLUMNS: ColumnDef<Person>[] = [
  { key: 'name',   header: 'Name',   sortable: true },
  { key: 'role',   header: 'Role',   sortable: true },
  { key: 'status', header: 'Status', sortable: false },
];

const DATA: Person[] = [
  { id: 1, name: 'Alice Chen',  role: 'Engineer', status: 'Active' },
  { id: 2, name: 'Bob Ruiz',    role: 'Designer', status: 'Away'   },
  { id: 3, name: 'Carol Smith', role: 'Manager',  status: 'Active' },
];

export default function Example() {
  const [selected, setSelected] = useState<Person[]>([]);
  return (
    <DataTable<Person>
      data={DATA}
      columns={COLUMNS}
      keyField="id"
      selectable
      onSelectionChange={setSelected}
      pageSize={5}
    />
  );
}

Props

Name	Type	Default	Description
data	T[]	—	Array of data objects to display.
columns	ColumnDef<T>[]	—	Column definitions controlling headers, keys, sorting, and cell rendering.
keyField	keyof T & string	—	Property key used as a unique row identifier.
selectable	boolean	false	Prepends a checkbox column for row selection.
onSelectionChange	(selected: T[]) => void	undefined	Called with selected rows whenever selection changes.
pageSize	number	10	Rows per page. Set to 0 to show all rows.
emptyMessage	string	'No data'	Text shown when data is empty.
className	string	''	Additional classes on the root wrapper.