@isi-ui7/data-table

Server-side data table untuk aplikasi perbankan berbasis Carbon — pagination, search, sort, context menu per baris, dan integrasi modal.

Fitur

• Pagination server-side: next, prev, first, last dengan cursor (topData/bottomData)
• Search per kolom dan multi-kolom alternatif
• Sort kolom ascending/descending
• Context menu per baris: sumber lokal (static) atau remote (API)
• Integrasi showPage() dari @isi-ui7/modal-manager untuk membuka halaman detail/form
• Format kolom: String, Number, Int, Float, Bool, DateTime (numeral.js + dayjs)
• Mode embeddable untuk penggunaan di dalam LookupInput
• Custom toolbar actions (misal tombol Tambah)

Instalasi

pnpm add @isi-ui7/data-table @isi-ui7/modal-manager @carbon/react @carbon/icons-react react react-dom

Penggunaan

"use client";
import { ServerDataTable, useServerTable } from "@isi-ui7/data-table";
import { useModal } from "@isi-ui7/modal-manager";

export function NasabahTable() {
  const modal = useModal();
  const table = useServerTable();

  return (
    <ServerDataTable
      apiPath="/api/nasabah"
      showSearch
      columns={{
        noNasabah: { title: "No. Nasabah", width: 140 },
        nama: { title: "Nama Nasabah" },
        tanggalBuka: { title: "Tgl Buka", displayFormat: "DD/MM/YYYY" },
        saldo: { title: "Saldo", displayFormat: "0,0" },
      }}
      popupMenu={{
        src: "remote",
        apiPath: "/api/nasabah/menu",
        pages: { detail: DetailPage, edit: EditPage },
        modalContext: modal,
      }}
      onRowClick={(row) => console.log(row)}
    />
  );
}

API Contract

Backend harus menerima I_DataTblRequest (POST) dan mengembalikan I_DataTblResponse:

// Request
{
  reqType: "next" | "prev" | "first" | "last" | "apply",
  searchColumn?: string,
  searchText?: string,
  sortColumn?: { columnName: string; ascending?: boolean },
  topData?: Record<string, unknown>,   // cursor baris teratas
  bottomData?: Record<string, unknown>, // cursor baris terbawah
  pageSize?: number,
}

// Response
{
  data: Record<string, unknown>[],
  columnTypes: { [field]: "String"|"Number"|"Int"|"Float"|"Bool"|"DateTime" },
  allowNext: boolean,
  allowPrev: boolean,
  altSortColumns: string[],
  altSearchColumns: string[],
}

Props — ServerDataTable

| Nama | Tipe | Wajib | Deskripsi | | --- | --- | --- | --- | | apiPath | string | ya | POST endpoint yang menerima I_DataTblRequest | | columns | Record<string, I_DataTblColumn> | tidak | Definisi kolom (key = field response) | | showSearch | boolean | tidak | Tampilkan search toolbar. Default: false | | navStyle | "button" \| "link" \| "none" | tidak | Gaya tombol paginasi. Default: "button" | | pageSizes | number[] | tidak | Pilihan ukuran halaman. Default: [10,15,20,25,50] | | popupMenu | object | tidak | Context menu per baris (local atau remote) | | onRowClick | (row) => void | tidak | Callback saat baris diklik | | toolbarActions | ReactNode | tidak | Aksi tambahan di toolbar kanan (misal tombol Tambah) | | embeddable | boolean | tidak | Mode kompak tanpa toolbar/paginasi. Default: false | | compact | boolean | tidak | Gunakan Carbon size="sm". Default: false | | className | string | tidak | CSS class tambahan |

I_DataTblColumn

| Nama | Tipe | Deskripsi | | --- | --- | --- | | title | string | Label header kolom | | displayFormat | string | Format numeral.js (Number/Int/Float) atau dayjs (DateTime) | | width | number | Lebar kolom dalam px |

A11y

• Table menggunakan <caption> dan scope header yang sesuai (dari Carbon DataTable)
• Context menu menggunakan Carbon OverflowMenu dengan keyboard navigation

Scripts

pnpm build      # Build ke dist/
pnpm lint       # ESLint
pnpm test       # Vitest
pnpm typecheck  # TypeScript check

Catatan

• Peer deps: React/ReactDOM >=18, @carbon/react >=1.97, @carbon/icons-react >=11.0, @isi-ui7/modal-manager
• Komponen menggunakan "use client" — hanya untuk Next.js App Router
• Format DateTime menggunakan dayjs, format Number/Int/Float menggunakan numeral.js (keduanya dibundle)