Data Table

Tabel advanced dengan search, sorting 3-state, selectable rows, dan pagination bawaan.

import { DataTable } from "@naraya/ui";

Search + sort + pagination

Name	Team	Score	Status
Ayu Prameswari	NaraEdu	92	active
Raka Nugraha	NaraBiz	84	active
Nadia Putri	NaraAI	76	review
Bagas Mahendra	NaraData	88	active

<DataTable columns={columns} data={rows} searchable pageSize={4} />

Selectable rows

Name	Team	Score	Status
Ayu Prameswari	NaraEdu	92	active
Raka Nugraha	NaraBiz	84	active
Nadia Putri	NaraAI	76	review
Bagas Mahendra	NaraData	88	active

Selected rows: 0

<DataTable
  columns={columns}
  data={rows}
  selectable
  onSelectionChange={(selected) => console.log(selected)}
/>

Prop	Type	Default	Description
columns*	`DataTableColumn<T>[]`	—	Definisi kolom data table.
data*	`T[]`	—	Data baris.
searchable	`boolean`	`false`	Aktifkan toolbar pencarian.
selectable	`boolean`	`false`	Aktifkan checkbox selection.
pageSize	`number`	`10`	Jumlah row per halaman.
emptyMessage	`string`	`"Tidak ada data."`	Pesan saat hasil kosong.
onSelectionChange	`(selectedRows: T[]) => void`	—	Callback saat selection berubah.
getRowId	`(row, idx) => string`	—	ID unik baris untuk selection stability.

--bg-surface

Table/toolbar background

--border-subtle

Grid border/cell divider

--color-primary

Sort/selection accent

--text-main

Cell text color