lib-pajakio-v2 1.1.10 → 1.1.11

package/docs/specs/table-and-tabs.md

@@ -10,13 +10,379 @@ Props:
 | --- | --- | --- | --- |
 | `id` | `String` | `""` | ID table, dipakai jika `selectorId` kosong. |
 | `selectorId` | `String` | `""` | ID table untuk automation. Prioritas: `selectorId`, `id`, lalu ID instance otomatis `base-table-{instance}`. |
+| `sticky` | `Boolean` | `false` | Membuat kolom pertama sticky di kiri dan kolom terakhir sticky di kanan. |
+| `stickyLeft` | `Boolean` | `false` | Membuat hanya kolom pertama sticky di kiri. Ditulis `sticky-left` di template. |
+| `stickyRight` | `Boolean` | `false` | Membuat kolom terakhir sticky di kanan; bersama `stickyRightCount: 2`, mengunci dua kolom terakhir. Ditulis `sticky-right` di template. |
+| `stickyRightCount` | `Number` | `1` | Gunakan `2` bersama `stickyRight` untuk dua kolom sticky kanan pada table berbasis slot manual. Ditulis `:sticky-right-count="2"`. |
+| `responsive` | `Boolean` | `false` | Membungkus table dengan `div.base-table-wrapper` yang memiliki scroll horizontal. Jika `false`, table dirender langsung tanpa wrapper. |
+| `columns` | `Array` | `() => []` | Definisi kolom `{ key, title, draggable?, sortable?, width?, sticky?, align?, headerAlign? }`. `key` wajib unik; `width` berupa ukuran CSS, misalnya `"180px"`; `sticky` berupa `"left"` atau `"right"`. `align` dan `headerAlign` menerima `"left"`, `"right"`, atau `"center"`. Array kosong mempertahankan slot `thead` lama. |
+| `reorderable` | `Boolean` | `false` | Mengaktifkan drag handle untuk kolom kecuali `draggable: false`. `draggable: true` juga mengaktifkan handle per kolom tanpa prop ini. |
+| `storageKey` | `String` | `""` | Key localStorage khusus untuk urutan kolom. Jika kosong, memakai `base-table-columns:${selectorId || id || tableId}`. Ditulis `storage-key` di template. |
+| `disableStorage` | `Boolean` | `false` | Menonaktifkan pembacaan, penyimpanan, dan penghapusan preferensi localStorage. Ditulis `disable-storage` di template. |
+| `showFilter` | `Boolean` | `false` | Menampilkan `tr.base-table__filter-row` sebagai baris kedua di dalam `thead`, jika `columns` tidak kosong. |
+| `darkHeader` | `Boolean` | `false` | Header navy `#0a1c2f`, teks dan ikon putih. Ditulis `dark-header` di template. |
+
+Events:
+
+| Event | Payload | Keterangan |
+| --- | --- | --- |
+| `update:columns` | Array kolom baru | Urutan baru setelah drag/drop, reorder keyboard, pemulihan storage saat mounted, atau `resetColumnOrder()`. Gunakan `v-model:columns` untuk menyinkronkan parent. Array prop tidak dimutasi. |
+| `reorder-column` | `{ fromKey, toKey, side, columns }` | `side` adalah `"before"` atau `"after"` relatif terhadap kolom target. Tidak dipancarkan untuk operasi tanpa perubahan atau perpindahan yang ditolak. |
+| `sort-column` | `{ column, direction }` | Klik tombol sort mengganti arah `"asc"` / `"desc"`. Parent bertanggung jawab mengurutkan data. |
 
 Slots:
 
 | Slot | Keterangan |
 | --- | --- |
-| `thead` | Header row. |
-| `tbody` | Body row. |
+| `thead` | Isi header row lama berupa `th`; digunakan jika `columns` kosong. |
+| `header-{key}` | Isi header kolom spesifik, scoped `{ column }`; misalnya `#header-checkbox`. Tidak perlu membungkus dengan `th`. |
+| `header` | Fallback isi header untuk kolom tanpa slot `header-{key}`, scoped `{ column }`. Default menampilkan `column.title`. |
+| `filter-{key}` | Isi sel filter spesifik, scoped `{ column }`; misalnya `#filter-nofa` atau `#filter-date`. Tidak perlu membungkus dengan `td`. |
+| `filter` | Fallback isi filter untuk kolom tanpa slot `filter-{key}`, scoped `{ column }`. Default kosong. |
+| `tbody` | Isi baris body berupa `tr`, scoped `{ columns, columnStyle, stickyClass, columnClasses }`. `columns` mengikuti urutan header/filter dan menyertakan metadata `style` (body), `headerStyle` (header), `stickyClass`, dan `classes`. Helper menerima object kolom. Slot lama tanpa scope tetap didukung. |
+
+### Perataan Header Kolom
+
+Opsi `headerAlign` mengatur perataan header secara terpisah dari `align` untuk body. Keduanya menerima `"left"`, `"right"`, atau `"center"`. Jika `headerAlign` tidak didefinisikan, header mewarisi `align`; jika keduanya tidak didefinisikan, header rata kiri (`"left"`). Kolom dengan `key: "checkbox"` selalu memakai header rata tengah (`"center"`), termasuk jika `headerAlign` atau `align` diisi nilai lain.
+
+```js
+columns: [
+  { key: "nofa", title: "Nomor Faktur", headerAlign: "left" },
+  { key: "status", title: "Status", headerAlign: "center" },
+  { key: "total", title: "Total", align: "right" },
+  { key: "tax", title: "Pajak", headerAlign: "left", align: "right" },
+],
+```
+
+Pada contoh tersebut, header dan body `total` rata kanan, sedangkan header `tax` rata kiri dan body-nya rata kanan. Terapkan `column.style` atau helper `columnStyle(column)` pada sel body seperti contoh di bawah. Metadata `column.headerStyle` menyimpan style khusus header, termasuk lebar dan offset sticky; jangan gunakan metadata ini untuk body.
+
+Slot `thead` manual juga mendukung `<th align="right">`, `<th align="left">`, dan `<th align="center">` secara native, termasuk konten pembungkus `<div>` di dalamnya. Class utility `text-right` / `align-right`, `text-left` / `align-left`, serta `text-center` / `align-center` juga didukung pada `th`.
+
+```vue
+<base-table>
+  <template #thead>
+    <th align="left"><div>Nomor Faktur</div></th>
+    <th align="right"><div>Total</div></th>
+  </template>
+  <template #tbody>
+    <tr>
+      <td>010.000-26.00000001</td>
+      <td align="right">1.000.000</td>
+    </tr>
+  </template>
+</base-table>
+```
+
+### Header Dinamis Dan Filter
+
+```vue
+<base-table
+  v-model:columns="columns"
+  reorderable
+  dark-header
+  responsive
+  :show-filter="showFilter"
+  selector-id="invoice-table"
+  @sort-column="sortRows"
+>
+  <template #header-checkbox>
+    <input v-model="allSelected" type="checkbox" aria-label="Pilih semua faktur" />
+  </template>
+  <template #filter-checkbox>
+    <button type="button" @click="resetFilters">Reset</button>
+  </template>
+  <template #filter-nofa="{ column }">
+    <input v-model="filters.nofa" :aria-label="column.title" placeholder="Cari nomor faktur" />
+  </template>
+  <template #filter-date="{ column }">
+    <input v-model="filters.date" type="date" :aria-label="column.title" />
+  </template>
+  <template #filter="{ column }">
+    <!-- Fallback opsional untuk kolom lain. -->
+  </template>
+  <template #tbody="{ columns: orderedColumns, columnStyle, stickyClass }">
+    <tr v-for="row in filteredRows" :key="row.id">
+      <td
+        v-for="column in orderedColumns"
+        :key="column.key"
+        :class="column.stickyClass || stickyClass(column)"
+        :style="column.style || columnStyle(column)"
+      >
+        <input v-if="column.key === 'checkbox'" v-model="row.selected"
+               type="checkbox" :aria-label="'Pilih ' + row.nofa" />
+        <button v-else-if="column.key === 'action'" type="button"
+                @click="openInvoice(row)">Lihat</button>
+        <template v-else>{{ row[column.key] }}</template>
+      </td>
+    </tr>
+  </template>
+</base-table>
+```
+
+Definisi state parent (misalnya dalam `data()`):
+
+```js
+columns: [
+  { key: "checkbox", title: "Checkbox", width: "56px", sticky: "left", draggable: false },
+  { key: "nofa", title: "Nomor Faktur", width: "240px", draggable: true, sortable: true },
+  { key: "date", title: "Tanggal", width: "180px", sortable: true },
+  { key: "status", title: "Status Transaksi", width: "180px", sticky: "right", draggable: false, sortable: true },
+  { key: "action", title: "Aksi", width: "140px", sticky: "right", draggable: false },
+],
+showFilter: true,
+filters: { nofa: "", date: "" },
+```
+
+- Drag handle `drag_indicator` berukuran 16px mendukung fokus keyboard. Tekan `ArrowLeft` / `ArrowRight` untuk memindahkan kolom satu posisi. Fokus tetap pada handle yang dipindahkan.
+- Kolom `draggable: false` terkunci dan tidak dapat dilewati. Perpindahan antar-group sticky juga ditolak agar checkbox/aksi tetap pada posisinya.
+- Saat drag melewati separuh kiri/kanan header target, indikator `.base-table-column-drop-before::before` / `.base-table-column-drop-after::after` menunjukkan sisi drop, berwarna `#63b3ff` dengan lebar 3px.
+- Gunakan `columns` dari scoped slot `tbody`, bukan urutan array statis, agar body selalu sejajar. BaseTable tidak mengurutkan ulang DOM body yang ditulis manual.
+- Perubahan prop `columns` dari parent memperbarui definisi kolom dan menerapkan kembali urutan tersimpan. `update:columns` menyinkronkan parent; `reorder-column` hanya menandakan perpindahan oleh pengguna.
+- BaseTable hanya menyediakan tempat filter dan tombol sort; pencarian, reset, pemilihan tanggal, dropdown, serta sorting data dikelola parent. Contoh interaktif tersedia di `/table`.
+- Sel filter memakai background `#ecf0f3`, padding `6px 12px`, tinggi sekitar 50px, dan border bawah `1px solid #d4d7db`. `column.sticky` memasang class dan offset sticky pada header dan filter secara otomatis; pasang metadata `column.stickyClass` dan `column.style` pada sel body.
+- Filter kiri/kanan tetap sticky dengan background filter sendiri, termasuk saat hover. Header sticky tetap berwarna navy ketika `darkHeader` aktif.
+- Untuk satu kolom sticky per sisi, offset adalah nol. Untuk beberapa kolom, offset kanan menjumlahkan lebar kolom sticky di kanannya; offset kiri menjumlahkan lebar kolom sticky di kirinya. Helper `stickyRightOffset` dan `stickyLeftOffset` menghasilkan string dengan satuan px. Gunakan lebar angka dalam px atau string seperti `"140px"` untuk perhitungan offset yang konsisten.
+- Lebar yang tidak tersedia atau menggunakan satuan lain (misalnya `%` atau `rem`) memakai fallback `140px` dalam perhitungan offset, bukan hasil pengukuran DOM. Untuk beberapa kolom sticky, tentukan lebar px agar offset sesuai lebar sel sebenarnya.
+
+### Persistensi Urutan Kolom
+
+Urutan hasil drag & drop maupun reorder keyboard otomatis disimpan ke localStorage sebagai JSON array string `key`. Saat instance dibuat, BaseTable memulihkan urutan tanpa mengubah object definisi kolom. Saat mounted, `update:columns` dipancarkan jika pemulihan mengubah urutan prop, sehingga `v-model:columns` parent ikut sinkron.
+
+Key default adalah `base-table-columns:${selectorId || id || tableId}`, dengan `tableId` sebagai fallback ID instance otomatis. Gunakan `selector-id` atau `id` yang stabil dan unik per tabel agar preferensi tetap tepat setelah refresh; ID otomatis dapat berubah bila urutan pembuatan instance berubah. Prop `storage-key` mengganti key sepenuhnya, misalnya `storage-key="purchase-invoices:columns"`. Prop `disable-storage` mematikan persistensi.
+
+Key kolom yang sudah dihapus diabaikan. Kolom baru disisipkan mengikuti posisi definisi saat ini tanpa menghilangkan preferensi kolom lama. Grup sticky kiri tetap di awal, kolom non-sticky di tengah, dan grup sticky kanan di akhir. JSON tidak valid, storage yang tidak tersedia atau ditolak browser, serta lingkungan SSR/Node tidak menyebabkan tabel gagal dirender.
+
+Method publik `resetColumnOrder()` tersedia melalui ref komponen:
+
+```vue
+<base-table ref="invoiceTableRef" :columns="defaultColumns" selector-id="invoice-table" />
+<base-button variant="secondary" icon-left="restore"
+             @click="$refs.invoiceTableRef.resetColumnOrder()">
+  Reset Urutan Kolom
+</base-button>
+```
+
+Method ini menghapus entry storage, mengembalikan urutan ke salinan prop `columns` saat ini, dan memancarkan `update:columns`. Jika memakai `v-model:columns`, simpan definisi awal secara terpisah karena prop parent sudah mengikuti hasil reorder. Untuk kembali ke urutan awal, panggil `resetColumnOrder()`, lalu ganti array parent dengan salinan definisi awal. Demo Faktur Pembelian di `/table` menerapkan alur ini melalui tombol **Reset Urutan Kolom**.
+
+### Dua Kolom Sticky Kanan
+
+Array `columns` pada contoh di atas mengunci Status Transaksi dan Aksi tanpa perlu prop `stickyRight`. Tempatkan kedua kolom di ujung kanan. Status memakai `right: 140px`, sedangkan Aksi memakai `right: 0px`. Lebar Aksi menjadi nilai CSS custom property `--base-table-sticky-right-2-offset` pada table, yang dipasang pada mode responsive maupun non-responsive.
+
+Slot `tbody` menerima salinan kolom dengan `style` (lebar, min-width, dan offset) serta `stickyClass`. Class `sticky-right` menandai seluruh grup kanan; `sticky-right-2` menandai kolom kedua dari kanan, `sticky-right--outer` menandai kolom paling kiri grup, dan `sticky-right--last` menandai kolom paling kanan. Metadata dihitung ulang mengikuti urutan kolom dan tidak mengubah array prop.
+
+Untuk table dengan slot manual, gunakan prop berikut:
+
+```vue
+<base-table
+  :sticky-right="true"
+  :sticky-right-count="2"
+  responsive
+  style="min-width: 1200px; --base-table-sticky-right-2-offset: 140px"
+>
+  <template #thead>
+    <th>Nomor Faktur</th>
+    <th style="width: 180px; min-width: 180px">Status Transaksi</th>
+    <th style="width: 140px; min-width: 140px">Aksi</th>
+  </template>
+  <template #tbody>
+    <tr>
+      <td>010.000-26.00000001</td>
+      <td>Upload Sukses</td>
+      <td style="width: 140px; min-width: 140px">...</td>
+    </tr>
+  </template>
+</base-table>
+```
+
+Alternatif tanpa prop, pasang `sticky-right-2` dan `sticky-right` pada `th` dan `td` yang bersesuaian:
+
+```html
+<!-- Header -->
+<th class="sticky-right-2" style="width: 180px; min-width: 180px">Status Transaksi</th>
+<th class="sticky-right" style="width: 140px; min-width: 140px">Aksi</th>
+<!-- Body -->
+<td class="sticky-right-2">Upload Sukses</td>
+<td class="sticky-right" style="width: 140px; min-width: 140px">...</td>
+```
+
+Class `sticky-col-right-2` adalah alias `sticky-right-2`. Untuk slot manual, offset default kolom kedua adalah `140px`; jika lebar kolom Aksi berbeda, sesuaikan `--base-table-sticky-right-2-offset` pada table dan lebar sel Aksi. Border kiri `1px solid #d4d7db` dan shadow hanya berada pada kolom terluar grup (Status), sedangkan Aksi memakai `border-left: none` dan `box-shadow: none`. Garis pemisah vertikal antar-kolom sticky dihilangkan agar grup tampil menyatu sebagai satu panel, termasuk pada header, filter, body, dan baris anak accordion. Header dan filter sticky memakai `z-index: 4`, body memakai `z-index: 2`.
+
+### Kolom Sticky
+
+Gunakan `sticky responsive` untuk checkbox di kiri dan aksi di kanan:
+
+```vue
+<base-table sticky responsive style="min-width: 1200px">
+  <template #thead>
+    <th>Checkbox</th>
+    <th>Nomor Faktur</th>
+    <th>Lawan Transaksi</th>
+    <th>Aksi</th>
+  </template>
+  <template #tbody>
+    <tr :class="{ selected: selected }">
+      <td><form-checkbox v-model="selected" :value="true" size="small" /></td>
+      <td>010.000-26.00000001</td>
+      <td>PT Contoh Indonesia</td>
+      <td><base-icon iconName="more_horiz" /></td>
+    </tr>
+  </template>
+</base-table>
+```
+
+Prop parsial dapat dipakai terpisah atau bersamaan. `sticky` selalu mengaktifkan kedua sisi:
+
+```vue
+<base-table sticky-left responsive>...</base-table>
+<base-table sticky-right responsive>...</base-table>
+<base-table sticky-left sticky-right responsive>...</base-table>
+```
+
+Untuk memilih cell secara manual, pasang class pada `th` dan `td` yang bersesuaian:
+
+```vue
+<base-table responsive style="min-width: 1200px">
+  <template #thead>
+    <th class="sticky-left">Checkbox</th>
+    <th>Nomor Faktur</th>
+    <th class="sticky-right">Aksi</th>
+  </template>
+  <template #tbody>
+    <tr>
+      <td class="sticky-left">...</td>
+      <td>010.000-26.00000001</td>
+      <td class="sticky-right">...</td>
+    </tr>
+  </template>
+</base-table>
+```
+
+Catatan styling dan integrasi:
+
+- Alias class cell: `sticky-col-left`, `sticky-col-right`, dan `sticky-col-right-2`. Class `is-sticky` pada BaseTable mengaktifkan kedua kolom tepi seperti prop `sticky`.
+- Mode sticky memakai `border-collapse: separate` dan `border-spacing: 0` untuk menjaga border cell saat scroll. Tanpa sticky, table tetap memakai `border-collapse: collapse`.
+- Cell sticky memiliki background putih, `z-index: 2`, dan header sticky `z-index: 4`. Background mengikuti baris hover (`#f5f6f7`); baris `.selected` atau baris dengan checkbox checked memakai `#ebf2f9`, termasuk saat hover. Warna ini adalah warna solid dari `#3e7dc01a` di atas putih, sehingga konten kolom non-sticky tidak tembus melalui sel sticky saat scroll horizontal.
+- Pembatas memakai `#d4d7db`. Shadow kanan `-4px 0 8px rgba(0, 0, 0, 0.05)` berada pada kolom terluar grup sticky. Untuk satu kolom kanan, shadow berada pada kolom terakhir; untuk dua kolom, shadow berpindah ke kolom kedua dari kanan. Sisi kiri memakai shadow yang dicerminkan.
+- Untuk dua kolom sticky kiri dengan class table `base-table--sticky-left-2` atau penanda cell `sticky-left--outer` / `sticky-left-2` pada kolom kedua, kolom pertama memakai `border-right: none` dan `box-shadow: none`. Hanya kolom kedua memiliki border kanan `1px solid #d4d7db` dan shadow `4px 0 8px rgba(0, 0, 0, 0.05)`, sehingga tidak ada garis pemisah di dalam panel sticky kiri pada header, filter, body, maupun baris anak accordion. Aturan ini hanya mengatur pembatas; offset kiri tetap mengikuti metadata `columns` atau style manual.
+- Wrapper memiliki `width: 100%`, `overflow-x: auto`, `position: relative`, touch scrolling, dan scrollbar tipis berwarna `#cbd5e1 #f8fafc`.
+- `responsive` tidak memaksa lebar kolom. Atur `min-width` table atau cell sesuai konten agar tabel lebar dapat di-scroll. Class dan style dari consumer tetap diterapkan pada table.
+- Tanpa `responsive`, sediakan container scroll sendiri bila diperlukan. Sticky mengikuti ancestor scroll terdekat.
+- Class manual `sticky-left` dan `sticky-right` memakai offset nol. `sticky-right-2` memakai offset dari `--base-table-sticky-right-2-offset` dengan fallback `140px`. Beberapa kolom kiri manual tetap membutuhkan offset `left` tambahan; array `columns` menghitungnya otomatis.
+- Semua prop Boolean default `false` dan `columns` default array kosong, sehingga pemakaian lama tetap tanpa wrapper, tanpa sticky, dan memakai slot `thead`.
+
+### Baris Collapsible / Accordion Riwayat
+
+`BaseTable` menyediakan styling accordion melalui slot `tbody`, bukan prop data atau state expand internal. Parent menyimpan `expandedRows`, menyediakan `history`, dan merender child tepat setelah parent-nya. Contoh berikut membuka baris pertama secara default:
+
+```vue
+<template>
+  <div>
+    <button type="button" @click="expandAll">Buka Semua</button>
+    <button type="button" @click="expandedRows = []">Tutup Semua</button>
+  </div>
+  <base-table :columns="columns" responsive style="min-width: 680px">
+    <template #tbody="{ columns: orderedColumns, columnStyle, stickyClass }">
+      <template v-for="row in rows" :key="row.id">
+        <tr :class="{ selected: row.selected }">
+          <td
+            v-for="column in orderedColumns"
+            :key="column.key"
+            :data-column-key="column.key"
+            :class="column.stickyClass || stickyClass(column)"
+            :style="column.style || columnStyle(column)"
+          >
+            <span v-if="column.key === 'checkbox'" class="base-table-checkbox-cell">
+              <button
+                v-if="row.history?.length"
+                type="button"
+                class="base-table-expand-btn"
+                :aria-expanded="expandedRows.includes(row.id)"
+                :aria-label="`${expandedRows.includes(row.id) ? 'Tutup' : 'Buka'} riwayat ${row.nofa}`"
+                :title="expandedRows.includes(row.id) ? 'Tutup riwayat' : 'Buka riwayat'"
+                @click="toggleRow(row)"
+              >
+                <base-icon
+                  :icon-name="expandedRows.includes(row.id) ? 'keyboard_arrow_down' : 'keyboard_arrow_right'"
+                  :width="20"
+                  :height="20"
+                  color="#247AC0"
+                />
+              </button>
+              <span v-else class="base-table-expand-btn--placeholder" aria-hidden="true" />
+              <input v-model="row.selected" type="checkbox" :aria-label="`Pilih ${row.nofa}`" />
+            </span>
+            <template v-else>{{ row[column.key] }}</template>
+          </td>
+        </tr>
+        <template v-if="expandedRows.includes(row.id)">
+          <tr
+            v-for="history in row.history"
+            :key="`${row.id}-${history.id}`"
+            class="accordion-child base-table__row-child"
+          >
+            <td
+              v-for="column in orderedColumns"
+              :key="column.key"
+              :data-column-key="column.key"
+              :class="column.stickyClass || stickyClass(column)"
+              :style="column.style || columnStyle(column)"
+            >
+              <template v-if="column.key !== 'checkbox'">{{ history[column.key] }}</template>
+            </td>
+          </tr>
+        </template>
+      </template>
+    </template>
+  </base-table>
+</template>
+
+<script>
+import { BaseIcon, BaseTable } from "lib-pajakio-v2";
+import "lib-pajakio-v2/dist/lib-pajakio-v2.css";
+
+export default {
+  components: { BaseIcon, BaseTable },
+  data() {
+    return {
+      columns: [
+        { key: "checkbox", title: "", width: "72px", sticky: "left", draggable: false },
+        { key: "nofa", title: "Nomor Bukti Potong", width: "240px" },
+        { key: "status", title: "Status", width: "180px", sticky: "right", draggable: false },
+      ],
+      expandedRows: ["bupot-1"],
+      rows: [
+        {
+          id: "bupot-1", nofa: "Belum Tersedia", status: "Upload Gagal", selected: false,
+          history: [{ id: "history-1", nofa: "26000HQ0A", status: "Upload Sukses" }],
+        },
+        { id: "bupot-2", nofa: "26000HPZH", status: "Upload Sukses", selected: false },
+      ],
+    };
+  },
+  methods: {
+    toggleRow(row) {
+      if (!row.history?.length) return;
+      this.expandedRows = this.expandedRows.includes(row.id)
+        ? this.expandedRows.filter(id => id !== row.id)
+        : [...this.expandedRows, row.id];
+    },
+    expandAll() {
+      this.expandedRows = this.rows.filter(row => row.history?.length).map(row => row.id);
+    },
+  },
+};
+</script>
+```
+
+- Gunakan ID parent yang unik dan stabil. `nofa` juga dapat dipakai jika unik; beberapa dokumen dengan nilai `"Belum Tersedia"` harus memakai ID berbeda. Gunakan key child yang unik dalam satu parent.
+- `.base-table-checkbox-cell` mengelompokkan chevron 20px dan checkbox dengan gap 4px. Lebar kolom `72px` memberi ruang keduanya. Jangan pasang class ini langsung pada `td`, agar layout table dan sticky tetap normal.
+- Baris tanpa history memakai `.base-table-expand-btn--placeholder` berukuran 20px, tersembunyi dan tidak menerima interaksi, agar checkbox tetap sejajar. Klik chevron tidak mengubah pilihan checkbox.
+- Tombol native dengan `type="button"` mendukung Enter/Space dan tidak melakukan submit form. Pasang `aria-expanded`, label, serta tooltip sesuai state. Warna ikon `#247AC0`; hover tombol `#f0f7fd` dan fokus keyboard memiliki outline biru.
+- Pasang `accordion-child`, `base-table__row-child`, atau `base-table__row-detail` pada `tr` child; ketiganya alias styling yang sama. Sel child memakai font 13px, warna `#526474`, dan border bawah `1px solid #eef2f6`.
+- Background child normal `#f8fafc`, hover `#f1f6fb`, dan `.selected` atau baris dengan checkbox checked `#e5edf6`, termasuk saat hover. `--base-table-sticky-background` diwariskan dari baris ke sel sehingga background sticky kiri, kanan, dan kedua dari kanan tetap sinkron saat scroll horizontal. Warna selected child juga solid (tanpa transparansi), sehingga konten di belakang sel sticky tidak tembus. Tidak perlu memberi background putih atau custom property per sel.
+- Parent dan child harus mengulang `columns` dari scoped slot dan menerapkan `column.style || columnStyle(column)` serta `column.stickyClass || stickyClass(column)` pada setiap `td`. Ini menjaga urutan dan offset kiri/kanan tetap sejajar setelah reorder. Sel checkbox/aksi child boleh kosong, tetapi jangan dihilangkan karena jumlah kolom harus sama.
+- Terapkan filter dan sort pada array parent, bukan array yang sudah di-flatten dengan history. Render history milik parent yang lolos filter tepat di bawahnya; jangan masukkan history ke hitungan pagination atau pilihan semua. State expand tetap tersimpan walaupun parent sementara tersembunyi oleh filter.
+- `expandAll()` di atas membuka semua parent yang memiliki history, termasuk yang sedang terfilter; `expandedRows = []` menutup semuanya. Demo `/table` menyediakan tombol toggle Buka Semua / Tutup Semua serta contoh filter, sort, dan sticky kiri/kanan.
 
 ## `TablePagination`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lib-pajakio-v2",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "private": false,
   "main": "./dist/lib-pajakio-v2.common.js",
   "scripts": {

package/src/assets/style/_tooltip.scss

@@ -0,0 +1,40 @@
+.library-tooltip {
+  position: relative;
+  z-index: 99;
+}
+.library-tooltip:before {
+  display: block;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  transform: translate3d(0,-10px,0);
+  transition: all .15s ease-in-out;
+}
+.library-tooltip:after {
+  display: none;
+  content: none;
+}
+.library-tooltip:before {
+  background: #FFFFFF;
+  border: 1px solid #D4D7DB;
+  border-radius: 6px;
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+  box-shadow: 0px 1px 6px 0px #0B3C5D1F;
+  color: #272B30;
+  content: attr(data-title);
+  font-family: 'Open Sans', sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0em;
+  padding: 4px 6px;
+  top: calc(100% + 4px);
+  left: 0;
+  max-width: 300px;
+  width: max-content;
+}
+.library-tooltip:hover:before {
+  opacity: 1;
+  transform: translate3d(0,0,0);
+}

package/src/assets/style/base.scss

@@ -1,4 +1,5 @@
 @use '_color.scss' as *;
+@use '_tooltip.scss';
 @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800");
 
 body,
@@ -955,47 +956,7 @@ $lineH: 10;
   cursor: not-allowed;
 }
 
-// TOOLTIP
-.library-tooltip {
-  position: relative;
-  z-index: 99;
-}
-.library-tooltip:before,
-.library-tooltip:after {
-  display: block;
-  opacity: 0;
-  pointer-events: none;
-  position: absolute;
-  transform: translate3d(0,-10px,0);
-  transition: all .15s ease-in-out;
-}
-.library-tooltip:after {
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid rgba(0,0,0,.75); 
-  border-left: 6px solid transparent;
-  content: "";
-  height: 0;
-  top: 20px;
-  left: 20px;
-  width: 0;
-}
-.library-tooltip:before {
-  background: rgba(0,0,0,.75);
-  border-radius: 2px;
-  color: #fff;
-  content: attr(data-title);
-  font-size: 14px;
-  padding: 6px 10px;
-  top: 26px;
-  max-width: 300px;
-  width: max-content;
-  font-weight: 300;
-}
-.library-tooltip:hover::after,
-.library-tooltip:hover:before {
-  opacity: 1;
-  transform: translate3d(0,0,0);
-}
+// TOOLTIP styles are loaded from _tooltip.scss above.
 
 // BOS-SHADOW
 .box-shadow {
@@ -1005,34 +966,124 @@ $lineH: 10;
 }
 
 // BADGE
-.tstatus {
-  padding: 3px 8px;
+.tstatus,
+.status-badge {
   border-radius: 4px;
+  display: inline-block;
+  font-family: "Open Sans", sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 2px 4px;
+  white-space: nowrap;
   width: fit-content;
 
-  &-grey {
-    background: #b3b3b4;
-    color: #FFFFFF;
+  &.tstatus-grey,
+  &.status-badge--neutral {
+    background: #d4d7db;
+    color: #383e45;
+  }
+
+  &.tstatus-yellow,
+  &.status-badge--warning {
+    background: #fde8b3;
+    color: #805b00;
+  }
+
+  &.tstatus-red,
+  &.status-badge--danger {
+    background: #f6c0bc;
+    color: #701811;
   }
 
-  &-yellow {
-    background: #ffa000;
-    color: #FFFFFF;
+  &.tstatus-green,
+  &.status-badge--success {
+    background: #b7e5ce;
+    color: #08542f;
   }
 
-  &-blue {
-    background: #3e7dc0;
-    color: #FFFFFF;
+  &.tstatus-blue,
+  &.status-badge--blue {
+    background: #b8e5f6;
+    color: #095571;
   }
 
-  &-red {
-    background: #d32f2f;
-    color: #FFFFFF;
+  &.status-badge--with-icon,
+  &.tstatus--with-icon {
+    align-items: center;
+    border: 1px solid transparent;
+    display: inline-flex;
+    overflow: hidden;
+    padding: 0;
+
+    .status-badge__icon,
+    .tstatus__icon {
+      align-items: center;
+      display: inline-flex;
+      justify-content: center;
+      padding: 4px;
+    }
+
+    .status-badge__text,
+    .tstatus__text {
+      font-weight: 700;
+      line-height: 1;
+      padding: 2px 4px;
+    }
   }
 
-  &-green {
-    background: #43A047;
-    color: #FFFFFF;
+  &.status-badge--with-icon,
+  &.tstatus--with-icon {
+    &.tstatus-yellow,
+    &.status-badge--warning {
+      border-color: #805b00;
+
+      .status-badge__icon,
+      .tstatus__icon {
+        background: #805b00;
+        color: #fde8b3;
+      }
+
+      .status-badge__text,
+      .tstatus__text {
+        background: #fde8b3;
+        color: #805b00;
+      }
+    }
+
+    &.tstatus-red,
+    &.status-badge--danger {
+      border-color: #701811;
+
+      .status-badge__icon,
+      .tstatus__icon {
+        background: #701811;
+        color: #f6c0bc;
+      }
+
+      .status-badge__text,
+      .tstatus__text {
+        background: #f6c0bc;
+        color: #701811;
+      }
+    }
+
+    &.tstatus-green,
+    &.status-badge--success {
+      border-color: #08542f;
+
+      .status-badge__icon,
+      .tstatus__icon {
+        background: #08542f;
+        color: #b7e5ce;
+      }
+
+      .status-badge__text,
+      .tstatus__text {
+        background: #b7e5ce;
+        color: #08542f;
+      }
+    }
   }
 }
 
@@ -1141,4 +1192,4 @@ $lineH: 10;
   100% {
     transform: translateY(0) scaleX(1) scaleY(1);
   }
-}
+}