Live Docs

Advanced /

stable

Data Table

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

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

Examples

Search + sort + pagination

NameTeamScoreStatus
Ayu PrameswariNaraEdu92active
Raka NugrahaNaraBiz84active
Nadia PutriNaraAI76review
Bagas MahendraNaraData88active
<DataTable columns={columns} data={rows} searchable pageSize={4} />

Selectable rows

NameTeamScoreStatus
Ayu PrameswariNaraEdu92active
Raka NugrahaNaraBiz84active
Nadia PutriNaraAI76review
Bagas MahendraNaraData88active

Selected rows: 0

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

Props

PropTypeDefaultDescription
columns*DataTableColumn<T>[]Definisi kolom data table.
data*T[]Data baris.
searchablebooleanfalseAktifkan toolbar pencarian.
selectablebooleanfalseAktifkan checkbox selection.
pageSizenumber10Jumlah row per halaman.
emptyMessagestring"Tidak ada data."Pesan saat hasil kosong.
onSelectionChange(selectedRows: T[]) => voidCallback saat selection berubah.
getRowId(row, idx) => stringID unik baris untuk selection stability.

Tokens Used

--bg-surface

Table/toolbar background

--border-subtle

Grid border/cell divider

--color-primary

Sort/selection accent

--text-main

Cell text color

Accessibility

  • Checkbox select-all hanya berlaku pada row di halaman aktif.
  • Header sortable harus diberi label yang jelas (nama kolom tidak ambigu).
  • Pastikan emptyMessage tetap informatif saat hasil filter kosong.