@isi-ui7/data-table

@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)