npm package: @isi-ui7/data-table
Description: Server-side DataTable with cursor pagination and context menus for banking applications.
Latest version: 0.1.6

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

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

## Penggunaan

```tsx
"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`:

```ts
// 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

```bash
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)