Komponen / Tampilan data
DataTable
Tabel ERP untuk daftar dokumen (PO, invoice) dan tabel item dokumen: angka rata kanan, urut, seleksi baris, sel editable, pohon, baris total, keadaan kosong & memuat, dan paginasi.
Import
tsx
import { DataTable, type DataTableColumn, type DataTableSort } from '@divistant/circca-react';Props · DataTable
Generik: DataTable<T>. Juga menerima atribut <div> untuk wadah luar (ref ke wadah). Pengurutan & paginasi data dilakukan pemanggil/server.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| columns | DataTableColumn<T>[] | — | Definisi kolom (lihat DataTableColumn). |
| rows | T[] | — | Baris yang ditampilkan (sudah diurutkan/dipaginasi). |
| getRowId | (row: T) => string | — | Id unik per baris untuk key, seleksi, dan pohon. |
| getRowLabel | (row: T) => string | — | Nama baris untuk pembaca layar, mis. "PO-2026-0148" → "Pilih PO-2026-0148". |
| caption | ReactNode | — | Judul tabel (<caption>), juga label wadah gulir. Wajib caption ATAU aria-label. |
| captionHidden | boolean | false | Caption hanya untuk pembaca layar (judul sudah tampil di Card/PageHeader). |
| aria-label | string | — | Nama tabel bila tanpa caption. |
| density | 'default' | 'compact' | 'default' | Tinggi baris 32 (Body/Default) atau 28 (Callout/Default) — properti Figma "Density". |
| sort | DataTableSort | null | — | Urutan aktif { key, direction: "asc" | "desc" } (terkendali). |
| onSortChange | (sort: DataTableSort | null) => void | — | Klik header sortable: naik → turun → tanpa urutan. |
| selected | string[] | — | Id baris terpilih. Bersama onSelectedChange menampilkan kolom checkbox (lebar 40). |
| onSelectedChange | (ids: string[]) => void | — | Perubahan seleksi. Checkbox header memilih/membatalkan semua baris yang tampil (indeterminate bila sebagian). |
| onRowClick | (row: T, event) => void | — | Klik baris sebagai pintasan mouse; klik pada tautan/tombol/kontrol di sel diabaikan. |
| getSubRows | (row: T) => T[] | undefined | — | Anak baris untuk tabel pohon. |
| expanded / defaultExpanded / onExpandedChange | string[] / string[] / (ids) => void | — | Id baris pohon yang terbuka (terkendali atau tidak). |
| treeColumn | string | — | Kunci kolom berisi tombol buka/tutup. Bawaan kolom pertama. |
| totals | Partial<Record<string, ReactNode>> | — | Nilai baris total per kunci kolom (DataTable/TotalRow). |
| totalsLabel | ReactNode | 'Total' | Label baris total; membentang sampai kolom pertama yang punya nilai. |
| onAddRow | () => void | — | Tampilkan baris "Tambah item" (DataTable/AddRow) di akhir tabel item. |
| addRowLabel | ReactNode | 'Tambah item' | Label baris tambah. |
| stickyHeader | boolean | false | Header menempel saat digulir. Perlu maxHeight. |
| maxHeight | number | string | — | Tinggi maksimum area gulir. |
| minWidth | number | string | — | Lebar minimum tabel; di layar sempit tabel digulir horizontal, bukan dijepit. |
| loading | boolean | false | Tampilkan baris Skeleton dan aria-busy. |
| loadingRows | number | 5 | Jumlah baris Skeleton. |
| emptyState | ReactNode | — | Isi saat tidak ada baris. Bawaan EmptyState Compact "Belum ada data". |
| framed | boolean | false | Bingkai kartu (radius 12, garis 0.5) untuk tabel yang berdiri sendiri di halaman daftar. |
| footer | ReactNode | — | Isi di bawah tabel di dalam bingkai — biasanya <DataTable.Pagination>. |
| tableClassName | string | — | Kelas tambahan untuk elemen <table>. |
| className | string | — | Kelas tambahan untuk wadah luar. |
Props · DataTableColumn<T>
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| key | string | — | Kunci unik; juga kunci urut & totals. Bawaan isi sel = row[key]. |
| header | ReactNode | — | Judul kolom. Kolom uang menyebut mata uang: "Nilai (Rp)". |
| cell | (row: T, ctx: { index, depth }) => ReactNode | — | Isi kustom: tautan, StateLabel Small, Avatar + nama, Input/AmountInput, IconButton. |
| type | 'text' | 'number' | 'editable' | 'actions' | 'text' | number = rata kanan + tabular-nums (angka mentah diformat formatNumber); editable = padding 2 untuk kontrol Small; actions = kolom 40 untuk IconButton Ghost Small, judul hanya untuk pembaca layar. |
| align | 'start' | 'end' | — | Perataan. Bawaan end untuk number. |
| width | number | string | — | Lebar kolom, sekaligus lebar minimum. |
| sortable | boolean | false | Header bisa diklik untuk mengurutkan (aria-sort otomatis). |
| rowHeader | boolean | false | Sel pengenal baris (<th scope="row">), mis. No. PO. |
| hideHeader | boolean | — | Judul kolom hanya untuk pembaca layar (otomatis untuk actions). |
Props · DataTable.Pagination
Juga diekspor sebagai DataTablePagination. Menerima atribut <nav>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| page | number | — | Halaman aktif (mulai 1). |
| pageSize | number | — | Baris per halaman. |
| total | number | — | Total baris di semua halaman — menghasilkan "1–20 dari 142" dan "Halaman 1 dari 8". |
| onPageChange | (page: number) => void | — | Halaman sebelumnya/berikutnya. |
| onPageSizeChange | (size: number) => void | — | Bila diisi, "Baris per halaman" (Select Small) tampil. Kembalikan ke halaman 1. |
| pageSizeOptions | number[] | [10, 20, 50, 100] | Pilihan baris per halaman. |
| range | ReactNode | — | Teks rentang kustom, mis. "1–10 dari 142 · nilai di halaman ini Rp 1.502.450.000". |
Sumber
Kode komponen ada di packages/react/src/components/data-table. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.