bank20baht-ui 0.1.5 → 0.1.6

package/dist/components/primitives/baht-table.d.ts

@@ -20,6 +20,13 @@ export type CellRenderer = (value: unknown, row: Record<string, unknown>) => unk
  *
  *   t.cursorMode = true; t.hasNext = true; t.hasPrev = false;
  *   t.addEventListener('baht-cursor-change', (e) => fetchPage(e.detail.direction));
+ *
+ * `visibleColumns` picks + orders a subset of `columns` client-side (no
+ * refetch) — pair it with <baht-multiselect> as the chooser UI:
+ *
+ *   picker.field = { key: 'cols', options: Object.entries(t.columns).map(([key, label]) => ({ key, label })) };
+ *   picker.value = t.visibleColumns;           // omit/empty = show all columns
+ *   picker.addEventListener('baht-input', (e) => t.visibleColumns = e.detail.value);
  */
 export declare class BahtTable extends BahtElement {
     /** Rows of the CURRENT page. */
@@ -40,6 +47,8 @@ export declare class BahtTable extends BahtElement {
     clickable: boolean;
     /** Custom cell renderers by column key (functions — a property, never JSON). */
     renderers: Record<string, CellRenderer>;
+    /** Subset + order of `columns` to render; empty/omitted = show all. */
+    visibleColumns: string[];
     page: number;
     totalPages: number;
     /** Switch the footer to Prev/Next (cursor-based API, no total count). */

package/dist/custom-elements.json

@@ -8348,7 +8348,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Server-side data table. `items` is ONE page of rows — the component never\nslices or fetches; on `baht-page-change` the host fetches the next page and\nre-feeds `items`/`page`. While that fetch runs, set `loading` to show\nskeleton rows.\n\n  const t = document.querySelector('baht-table');\n  t.columns = { name: 'Name', created_at: 'Created' };\n  t.items = pageRows;                 // current page only\n  t.loading = false; t.page = 1; t.totalPages = 12;\n  t.addEventListener('baht-page-change', (e) => fetchPage(e.detail.page));\n  t.addEventListener('baht-row-click', (e) => open(e.detail.id));\n\nSet `cursor-mode` for cursor-based APIs (no total count) — the footer\nbecomes a Prev/Next pair gated by `has-next`/`has-prev`, and the host\nlistens for `baht-cursor-change` instead of `baht-page-change`:\n\n  t.cursorMode = true; t.hasNext = true; t.hasPrev = false;\n  t.addEventListener('baht-cursor-change', (e) => fetchPage(e.detail.direction));",
+          "description": "Server-side data table. `items` is ONE page of rows — the component never\nslices or fetches; on `baht-page-change` the host fetches the next page and\nre-feeds `items`/`page`. While that fetch runs, set `loading` to show\nskeleton rows.\n\n  const t = document.querySelector('baht-table');\n  t.columns = { name: 'Name', created_at: 'Created' };\n  t.items = pageRows;                 // current page only\n  t.loading = false; t.page = 1; t.totalPages = 12;\n  t.addEventListener('baht-page-change', (e) => fetchPage(e.detail.page));\n  t.addEventListener('baht-row-click', (e) => open(e.detail.id));\n\nSet `cursor-mode` for cursor-based APIs (no total count) — the footer\nbecomes a Prev/Next pair gated by `has-next`/`has-prev`, and the host\nlistens for `baht-cursor-change` instead of `baht-page-change`:\n\n  t.cursorMode = true; t.hasNext = true; t.hasPrev = false;\n  t.addEventListener('baht-cursor-change', (e) => fetchPage(e.detail.direction));\n\n`visibleColumns` picks + orders a subset of `columns` client-side (no\nrefetch) — pair it with <baht-multiselect> as the chooser UI:\n\n  picker.field = { key: 'cols', options: Object.entries(t.columns).map(([key, label]) => ({ key, label })) };\n  picker.value = t.visibleColumns;           // omit/empty = show all columns\n  picker.addEventListener('baht-input', (e) => t.visibleColumns = e.detail.value);",
           "name": "BahtTable",
           "members": [
             {
@@ -8462,6 +8462,15 @@
               "default": "{}",
               "description": "Custom cell renderers by column key (functions — a property, never JSON)."
             },
+            {
+              "kind": "field",
+              "name": "visibleColumns",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "Subset + order of `columns` to render; empty/omitted = show all."
+            },
             {
               "kind": "field",
               "name": "page",

package/dist/index.js

@@ -1,7 +1,7 @@
-import { t as v, defaultValue as _t, applyFlags as ee, resolveViewFields as Ut, validateField as zt, evaluate as pe, resolveNext as ce } from "./engine.js";
+import { t as f, defaultValue as _t, applyFlags as ee, resolveViewFields as Ut, validateField as Kt, evaluate as pe, resolveNext as ce } from "./engine.js";
 import { approvalFields as dr, evalCondition as ur, evalValueExpr as br, flagEnabled as vr, getCatalog as fr, readRef as mr, setCatalog as yr, setLocale as $r, walkPath as gr } from "./engine.js";
 import { LitElement as de, nothing as h, html as n, svg as E } from "lit";
-import { property as l, query as tt, customElement as p, state as b } from "lit/decorators.js";
+import { property as l, query as tt, customElement as p, state as v } from "lit/decorators.js";
 import { live as B } from "lit/directives/live.js";
 import { ifDefined as O } from "lit/directives/if-defined.js";
 var ue = Object.defineProperty, et = (t, e, r, a) => {
@@ -226,7 +226,7 @@ Rt([
 xt = Rt([
   p("baht-code")
 ], xt);
-var _e = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, z = (t, e, r, a) => {
+var _e = Object.defineProperty, xe = Object.getOwnPropertyDescriptor, K = (t, e, r, a) => {
   for (var s = a > 1 ? void 0 : a ? xe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
   return a && s && _e(e, r, s), s;
@@ -285,39 +285,39 @@ let I = class extends c {
     </nav>`;
   }
 };
-z([
+K([
   l({ type: Number })
 ], I.prototype, "page", 2);
-z([
+K([
   l({ type: Number, attribute: "total-pages" })
 ], I.prototype, "totalPages", 2);
-z([
+K([
   l()
 ], I.prototype, "variant", 2);
-z([
+K([
   l({ type: Number })
 ], I.prototype, "siblings", 2);
-z([
+K([
   l({ type: Boolean, attribute: "has-next" })
 ], I.prototype, "hasNext", 2);
-z([
+K([
   l({ type: Boolean, attribute: "has-prev" })
 ], I.prototype, "hasPrev", 2);
-I = z([
+I = K([
   p("baht-pagination")
 ], I);
-var Oe = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, y = (t, e, r, a) => {
+var Oe = Object.defineProperty, Pe = Object.getOwnPropertyDescriptor, m = (t, e, r, a) => {
   for (var s = a > 1 ? void 0 : a ? Pe(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
   return a && s && Oe(e, r, s), s;
 };
-let f = class extends c {
+let b = class extends c {
   constructor() {
-    super(...arguments), this.items = [], this.columns = {}, this.loading = !1, this.error = !1, this.errorMessage = "Couldn't load data. Try again.", this.emptyMessage = "No records yet.", this.showIndex = !0, this.indexOffset = 0, this.skeletonRows = 10, this.rowKey = "", this.clickable = !0, this.renderers = {}, this.page = 1, this.totalPages = 1, this.cursorMode = !1, this.hasNext = !1, this.hasPrev = !1;
+    super(...arguments), this.items = [], this.columns = {}, this.loading = !1, this.error = !1, this.errorMessage = "Couldn't load data. Try again.", this.emptyMessage = "No records yet.", this.showIndex = !0, this.indexOffset = 0, this.skeletonRows = 10, this.rowKey = "", this.clickable = !0, this.renderers = {}, this.visibleColumns = [], this.page = 1, this.totalPages = 1, this.cursorMode = !1, this.hasNext = !1, this.hasPrev = !1;
   }
   get columnKeys() {
-    const t = Object.keys(this.columns);
-    return t.length > 0 ? t : this.items.length > 0 ? Object.keys(this.items[0]) : [];
+    const t = Object.keys(this.columns), e = t.length > 0 ? t : this.items.length > 0 ? Object.keys(this.items[0]) : [];
+    return this.visibleColumns.length === 0 ? e : this.visibleColumns.filter((r) => e.includes(r));
   }
   labelFor(t) {
     return this.columns[t] ?? t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase());
@@ -388,60 +388,63 @@ let f = class extends c {
     </div>`;
   }
 };
-y([
+m([
   l({ attribute: !1 })
-], f.prototype, "items", 2);
-y([
+], b.prototype, "items", 2);
+m([
   l({ attribute: !1 })
-], f.prototype, "columns", 2);
-y([
+], b.prototype, "columns", 2);
+m([
   l({ type: Boolean })
-], f.prototype, "loading", 2);
-y([
+], b.prototype, "loading", 2);
+m([
   l({ type: Boolean })
-], f.prototype, "error", 2);
-y([
+], b.prototype, "error", 2);
+m([
   l({ attribute: "error-message" })
-], f.prototype, "errorMessage", 2);
-y([
+], b.prototype, "errorMessage", 2);
+m([
   l({ attribute: "empty-message" })
-], f.prototype, "emptyMessage", 2);
-y([
+], b.prototype, "emptyMessage", 2);
+m([
   l({ type: Boolean, attribute: "show-index" })
-], f.prototype, "showIndex", 2);
-y([
+], b.prototype, "showIndex", 2);
+m([
   l({ type: Number, attribute: "index-offset" })
-], f.prototype, "indexOffset", 2);
-y([
+], b.prototype, "indexOffset", 2);
+m([
   l({ type: Number, attribute: "skeleton-rows" })
-], f.prototype, "skeletonRows", 2);
-y([
+], b.prototype, "skeletonRows", 2);
+m([
   l({ attribute: "row-key" })
-], f.prototype, "rowKey", 2);
-y([
+], b.prototype, "rowKey", 2);
+m([
   l({ type: Boolean })
-], f.prototype, "clickable", 2);
-y([
+], b.prototype, "clickable", 2);
+m([
+  l({ attribute: !1 })
+], b.prototype, "renderers", 2);
+m([
   l({ attribute: !1 })
-], f.prototype, "renderers", 2);
-y([
+], b.prototype, "visibleColumns", 2);
+m([
   l({ type: Number })
-], f.prototype, "page", 2);
-y([
+], b.prototype, "page", 2);
+m([
   l({ type: Number, attribute: "total-pages" })
-], f.prototype, "totalPages", 2);
-y([
+], b.prototype, "totalPages", 2);
+m([
   l({ type: Boolean, attribute: "cursor-mode" })
-], f.prototype, "cursorMode", 2);
-y([
+], b.prototype, "cursorMode", 2);
+m([
   l({ type: Boolean, attribute: "has-next" })
-], f.prototype, "hasNext", 2);
-y([
+], b.prototype, "hasNext", 2);
+m([
   l({ type: Boolean, attribute: "has-prev" })
-], f.prototype, "hasPrev", 2);
-f = y([
+], b.prototype, "hasPrev", 2);
+b = m([
   p("baht-table")
-], f);
+], b);
 var Ce = Object.defineProperty, De = Object.getOwnPropertyDescriptor, R = (t, e, r, a) => {
   for (var s = a > 1 ? void 0 : a ? De(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
@@ -660,7 +663,7 @@ Lt([
   l({ type: Number })
 ], W.prototype, "duration", 2);
 Lt([
-  b()
+  v()
 ], W.prototype, "entries", 2);
 W = Lt([
   p("baht-toast")
@@ -720,7 +723,7 @@ ft([
   tt(".baht-tooltip-anchor")
 ], S.prototype, "anchorEl", 2);
 ft([
-  b()
+  v()
 ], S.prototype, "dismissed", 2);
 S = ft([
   p("baht-tooltip")
@@ -763,7 +766,7 @@ at([
   l({ type: Boolean })
 ], A.prototype, "dismissible", 2);
 at([
-  b()
+  v()
 ], A.prototype, "dismissed", 2);
 A = at([
   p("baht-alert")
@@ -839,7 +842,7 @@ it([
   l()
 ], T.prototype, "label", 2);
 it([
-  b()
+  v()
 ], T.prototype, "hover", 2);
 T = it([
   p("baht-rating")
@@ -1061,10 +1064,10 @@ lt([
 U = lt([
   p("baht-filter")
 ], U);
-var ze = Object.defineProperty, Ke = Object.getOwnPropertyDescriptor, Dt = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Ke(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var Ke = Object.defineProperty, ze = Object.getOwnPropertyDescriptor, Dt = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? ze(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && ze(e, r, s), s;
+  return a && s && Ke(e, r, s), s;
 };
 let pt = class extends c {
   constructor() {
@@ -1310,7 +1313,7 @@ kt([
   l({ type: Boolean })
 ], q.prototype, "multiple", 2);
 kt([
-  b()
+  v()
 ], q.prototype, "openSet", 2);
 q = kt([
   p("baht-accordion")
@@ -1392,7 +1395,7 @@ var ns = Object.getOwnPropertyDescriptor, hs = (t, e, r, a) => {
     (o = t[i]) && (s = o(s) || s);
   return s;
 };
-let Kt = class extends g {
+let zt = class extends g {
   renderControl() {
     return n`<input
       class="baht-control baht-control--text"
@@ -1411,9 +1414,9 @@ let Kt = class extends g {
     />`;
   }
 };
-Kt = hs([
+zt = hs([
   p("baht-input")
-], Kt);
+], zt);
 var ps = Object.getOwnPropertyDescriptor, cs = (t, e, r, a) => {
   for (var s = a > 1 ? void 0 : a ? ps(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = o(s) || s);
@@ -1697,7 +1700,7 @@ let X = class extends g {
       try {
         e.push(await this.uploader(r));
       } catch {
-        this.uploadError = v("uploadFailed");
+        this.uploadError = f("uploadFailed");
       } finally {
         this.uploadingCount -= 1;
       }
@@ -1724,10 +1727,10 @@ let X = class extends g {
         aria-describedby=${this.describedBy}
         @change=${(t) => this.onPick(t)}
       />
-      ${this.uploadingCount > 0 ? n`<p class="baht-file-status" role="status">${v("uploading")}</p>` : h}
+      ${this.uploadingCount > 0 ? n`<p class="baht-file-status" role="status">${f("uploading")}</p>` : h}
       ${this.uploadError ? n`<p class="baht-error" role="alert">${this.uploadError}</p>` : h}
       ${this.rejectedNames.length > 0 ? n`<p class="baht-error baht-file-rejected" role="alert">
-              ${v("fileRejectedTooLarge", { names: this.rejectedNames.join(", ") })}
+              ${f("fileRejectedTooLarge", { names: this.rejectedNames.join(", ") })}
             </p>` : h}
       ${this.refs.map(
       (t) => n`<span class="baht-file-chip">
@@ -1736,8 +1739,8 @@ let X = class extends g {
           ${this.disabled || this.readonly ? h : n`<button
                 type="button"
                 class="baht-file-remove"
-                aria-label=${v("removeFile")}
-                title=${v("removeFile")}
+                aria-label=${f("removeFile")}
+                title=${f("removeFile")}
                 @click=${() => this.emitRefs(this.refs.filter((e) => e !== t))}
               >
                 ✕
@@ -1750,13 +1753,13 @@ gt([
   l({ attribute: !1 })
 ], X.prototype, "uploader", 2);
 gt([
-  b()
+  v()
 ], X.prototype, "uploadingCount", 2);
 gt([
-  b()
+  v()
 ], X.prototype, "uploadError", 2);
 gt([
-  b()
+  v()
 ], X.prototype, "rejectedNames", 2);
 X = gt([
   p("baht-file")
@@ -2004,10 +2007,10 @@ wt([
 Z = wt([
   p("baht-error-state")
 ], Z);
-var zs = Object.defineProperty, Ks = Object.getOwnPropertyDescriptor, K = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? Ks(e, r) : e, i = t.length - 1, o; i >= 0; i--)
+var Ks = Object.defineProperty, zs = Object.getOwnPropertyDescriptor, z = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? zs(e, r) : e, i = t.length - 1, o; i >= 0; i--)
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
-  return a && s && zs(e, r, s), s;
+  return a && s && Ks(e, r, s), s;
 };
 let M = class extends c {
   constructor() {
@@ -2076,25 +2079,25 @@ let M = class extends c {
     </div>`;
   }
 };
-K([
+z([
   l({ attribute: !1 })
 ], M.prototype, "value", 2);
-K([
+z([
   l({ attribute: "key-placeholder" })
 ], M.prototype, "keyPlaceholder", 2);
-K([
+z([
   l({ attribute: "value-placeholder" })
 ], M.prototype, "valuePlaceholder", 2);
-K([
+z([
   l({ attribute: "add-label" })
 ], M.prototype, "addLabel", 2);
-K([
+z([
   l({ type: Boolean })
 ], M.prototype, "disabled", 2);
-K([
-  b()
+z([
+  v()
 ], M.prototype, "rows", 2);
-M = K([
+M = z([
   p("baht-keyvalue-editor")
 ], M);
 var Hs = Object.defineProperty, Js = Object.getOwnPropertyDescriptor, w = (t, e, r, a) => {
@@ -2102,7 +2105,7 @@ var Hs = Object.defineProperty, Js = Object.getOwnPropertyDescriptor, w = (t, e,
     (o = t[i]) && (s = (a ? o(e, r, s) : o(s)) || s);
   return a && s && Hs(e, r, s), s;
 };
-let Ws = 0, m = class extends c {
+let Ws = 0, y = class extends c {
   constructor() {
     super(...arguments), this.label = "Reference", this.value = "", this.display = "", this.placeholder = "", this.disabled = !1, this.invalid = !1, this.href = "", this.lookupLabel = "Look up records", this.debounce = 200, this.fetcher = null, this.open = !1, this.term = "", this.options = [], this.loading = !1, this.activeIndex = -1, this.listboxId = `baht-refpicker-list-${++Ws}`, this.fetchSeq = 0, this.onDocMousedown = (t) => {
       this.contains(t.target) || this.close();
@@ -2236,55 +2239,55 @@ let Ws = 0, m = class extends c {
 };
 w([
   l()
-], m.prototype, "label", 2);
+], y.prototype, "label", 2);
 w([
   l()
-], m.prototype, "value", 2);
+], y.prototype, "value", 2);
 w([
   l()
-], m.prototype, "display", 2);
+], y.prototype, "display", 2);
 w([
   l()
-], m.prototype, "placeholder", 2);
+], y.prototype, "placeholder", 2);
 w([
   l({ type: Boolean })
-], m.prototype, "disabled", 2);
+], y.prototype, "disabled", 2);
 w([
   l({ type: Boolean })
-], m.prototype, "invalid", 2);
+], y.prototype, "invalid", 2);
 w([
   l()
-], m.prototype, "href", 2);
+], y.prototype, "href", 2);
 w([
   l({ attribute: "lookup-label" })
-], m.prototype, "lookupLabel", 2);
+], y.prototype, "lookupLabel", 2);
 w([
   l({ type: Number })
-], m.prototype, "debounce", 2);
+], y.prototype, "debounce", 2);
 w([
   l({ attribute: !1 })
-], m.prototype, "fetcher", 2);
+], y.prototype, "fetcher", 2);
 w([
-  b()
-], m.prototype, "open", 2);
+  v()
+], y.prototype, "open", 2);
 w([
-  b()
-], m.prototype, "term", 2);
+  v()
+], y.prototype, "term", 2);
 w([
-  b()
-], m.prototype, "options", 2);
+  v()
+], y.prototype, "options", 2);
 w([
-  b()
-], m.prototype, "loading", 2);
+  v()
+], y.prototype, "loading", 2);
 w([
-  b()
-], m.prototype, "activeIndex", 2);
+  v()
+], y.prototype, "activeIndex", 2);
 w([
   tt("input")
-], m.prototype, "inputEl", 2);
-m = w([
+], y.prototype, "inputEl", 2);
+y = w([
   p("baht-reference-picker")
-], m);
+], y);
 const le = {
   text: "baht-input",
   email: "baht-input",
@@ -2376,8 +2379,8 @@ let Mt = class extends g {
           ${e ? n`<button
                 type="button"
                 class="baht-repeater-remove"
-                aria-label=${v("removeRow")}
-                title=${v("removeRow")}
+                aria-label=${f("removeRow")}
+                title=${f("removeRow")}
                 @click=${() => this.removeRow(s)}
               >
                 ✕
@@ -2390,7 +2393,7 @@ let Mt = class extends g {
             ?disabled=${this.disabled || r}
             @click=${() => this.addRow()}
           >
-            + ${this.field.addLabel ?? v("addRow")}
+            + ${this.field.addLabel ?? f("addRow")}
           </button>`}
     </div>`;
   }
@@ -2414,7 +2417,7 @@ let vt = class extends c {
     const t = this.variant === "sidebar";
     return n`<ol
       class="baht-steps ${t ? "baht-steps--sidebar" : ""}"
-      aria-label=${v("step", { current: this.current + 1, total: this.steps.length })}
+      aria-label=${f("step", { current: this.current + 1, total: this.steps.length })}
     >
       ${this.steps.map((e, r) => {
       const a = r < this.current ? "done" : r === this.current ? "current" : "todo";
@@ -2543,7 +2546,7 @@ let P = class extends c {
       const s = this.stateFor(a);
       if (!s.visible) continue;
       const i = s.required === !!a.required ? a : { ...a, required: s.required };
-      t.push(...zt(i, this.valueFor(a), this.registry, e));
+      t.push(...Kt(i, this.valueFor(a), this.registry, e));
     }
     this.errors = t;
     const r = { valid: t.length === 0, errors: t };
@@ -2573,7 +2576,7 @@ let P = class extends c {
     const e = this.stateFor(t);
     if (!e.visible) return [];
     const r = this.getData(), a = e.required === !!t.required ? t : { ...t, required: e.required };
-    return zt(a, this.valueFor(t), this.registry, r);
+    return Kt(a, this.valueFor(t), this.registry, r);
   }
   /** `validateOn: 'blur'` — validate just the field the user left, same as
    * how errors are shown elsewhere (merged into `this.errors`, painted by
@@ -2638,10 +2641,10 @@ D([
   l({ type: Boolean })
 ], P.prototype, "readonly", 2);
 D([
-  b()
+  v()
 ], P.prototype, "edits", 2);
 D([
-  b()
+  v()
 ], P.prototype, "errors", 2);
 P = D([
   p("baht-form")
@@ -2772,7 +2775,7 @@ let $ = class extends c {
     if (!e || e.kind !== "approval") return;
     const r = e.approval ?? {}, a = String(((u = this.data[e.formName]) == null ? void 0 : u.comment) ?? ""), s = r.comment ?? "optional";
     if ((s === "required" || s === "requireOnReject" && t === "rejected") && a.trim() === "") {
-      this.approvalError = v("commentRequired");
+      this.approvalError = f("commentRequired");
       return;
     }
     this.approvalError = null, this.data = {
@@ -2835,7 +2838,7 @@ let $ = class extends c {
     const e = ((a = t.approval) == null ? void 0 : a.comment) ?? "optional", r = this.summaryForms(t);
     return n`<div class="baht-approval">
       <div class="baht-approval-summary">
-        ${r.length === 0 ? n`<p class="baht-approval-empty">${v("nothingToReview")}</p>` : r.map(
+        ${r.length === 0 ? n`<p class="baht-approval-empty">${f("nothingToReview")}</p>` : r.map(
       (i) => n`<section class="baht-approval-group">
                   <h4 class="baht-approval-group-title">${i.formName}</h4>
                   <baht-form
@@ -2849,7 +2852,7 @@ let $ = class extends c {
       </div>
       ${e !== "hidden" ? n`<label class="baht-approval-comment">
             <span class="baht-approval-comment-label">
-              ${v("comment")}${e === "required" ? v("commentRequiredSuffix") : ""}
+              ${f("comment")}${e === "required" ? f("commentRequiredSuffix") : ""}
             </span>
             <textarea
               rows="3"
@@ -2869,7 +2872,7 @@ let $ = class extends c {
     const e = t.kind === "approval", r = this.visibleForms, a = r.findIndex((o) => o.formName === t.formName);
     return n`<div class="baht-workflow" data-step=${t.formName}>
       <div class="baht-visually-hidden" role="status">
-        ${v("step", { current: a + 1, total: r.length })}
+        ${f("step", { current: a + 1, total: r.length })}
       </div>
       ${this.showSteps ? n`<baht-steps
               .steps=${r.map((o) => o.formName)}
@@ -2886,23 +2889,23 @@ let $ = class extends c {
           ></baht-form>`}
       <div class="baht-workflow-nav">
         ${this.showBack && this.history.length > 0 ? n`<button type="button" class="baht-button baht-button--back" @click=${() => this.back()}>
-              ${this.backLabel ?? v("back")}
+              ${this.backLabel ?? f("back")}
             </button>` : h}
         ${e ? n`<button
                 type="button"
                 class="baht-button baht-button--reject"
                 @click=${() => this.decide("rejected")}
               >
-                ${((s = t.approval) == null ? void 0 : s.rejectLabel) ?? v("reject")}
+                ${((s = t.approval) == null ? void 0 : s.rejectLabel) ?? f("reject")}
               </button>
               <button
                 type="button"
                 class="baht-button baht-button--next baht-button--approve"
                 @click=${() => this.decide("approved")}
               >
-                ${((i = t.approval) == null ? void 0 : i.approveLabel) ?? v("approve")}
+                ${((i = t.approval) == null ? void 0 : i.approveLabel) ?? f("approve")}
               </button>` : n`<button type="button" class="baht-button baht-button--next" @click=${() => this.next()}>
-              ${this.isLast ? this.submitLabel ?? v("submit") : this.nextLabel ?? v("next")}
+              ${this.isLast ? this.submitLabel ?? f("submit") : this.nextLabel ?? f("next")}
             </button>`}
       </div>
     </div>`;
@@ -2942,16 +2945,16 @@ _([
   l({ attribute: "steps-variant" })
 ], $.prototype, "stepsVariant", 2);
 _([
-  b()
+  v()
 ], $.prototype, "data", 2);
 _([
-  b()
+  v()
 ], $.prototype, "derived", 2);
 _([
-  b()
+  v()
 ], $.prototype, "current", 2);
 _([
-  b()
+  v()
 ], $.prototype, "approvalError", 2);
 $ = _([
   p("baht-workflow")
@@ -2976,7 +2979,7 @@ export {
   X as BahtFile,
   U as BahtFilter,
   P as BahtForm,
-  Kt as BahtInput,
+  zt as BahtInput,
   M as BahtKeyvalueEditor,
   Q as BahtLink,
   j as BahtList,
@@ -2989,7 +2992,7 @@ export {
   Qt as BahtRadio,
   C as BahtRange,
   T as BahtRating,
-  m as BahtReferencePicker,
+  y as BahtReferencePicker,
   Mt as BahtRepeater,
   qt as BahtSection,
   Wt as BahtSelect,
@@ -2997,7 +3000,7 @@ export {
   Ot as BahtSpinner,
   dt as BahtStatChart,
   vt as BahtSteps,
-  f as BahtTable,
+  b as BahtTable,
   St as BahtText,
   Ht as BahtTextarea,
   It as BahtTimeline,
@@ -3023,7 +3026,7 @@ export {
   Ut as resolveViewFields,
   yr as setCatalog,
   $r as setLocale,
-  v as t,
-  zt as validateField,
+  f as t,
+  Kt as validateField,
   gr as walkPath
 };

package/dist/react.d.ts

@@ -111,6 +111,7 @@ declare module 'react' {
                 items?: Record<string, unknown>[];
                 columns?: Record<string, string>;
                 renderers?: Record<string, CellRenderer>;
+                visibleColumns?: string[];
                 loading?: boolean;
                 error?: boolean;
                 'error-message'?: string;

package/dist/vscode.html-custom-data.json

@@ -583,7 +583,7 @@
     },
     {
       "name": "baht-table",
-      "description": "Server-side data table. `items` is ONE page of rows — the component never\nslices or fetches; on `baht-page-change` the host fetches the next page and\nre-feeds `items`/`page`. While that fetch runs, set `loading` to show\nskeleton rows.\n\n  const t = document.querySelector('baht-table');\n  t.columns = { name: 'Name', created_at: 'Created' };\n  t.items = pageRows;                 // current page only\n  t.loading = false; t.page = 1; t.totalPages = 12;\n  t.addEventListener('baht-page-change', (e) => fetchPage(e.detail.page));\n  t.addEventListener('baht-row-click', (e) => open(e.detail.id));\n\nSet `cursor-mode` for cursor-based APIs (no total count) — the footer\nbecomes a Prev/Next pair gated by `has-next`/`has-prev`, and the host\nlistens for `baht-cursor-change` instead of `baht-page-change`:\n\n  t.cursorMode = true; t.hasNext = true; t.hasPrev = false;\n  t.addEventListener('baht-cursor-change', (e) => fetchPage(e.detail.direction));\n---\n\n\n### **Events:**\n - **baht-row-click**",
+      "description": "Server-side data table. `items` is ONE page of rows — the component never\nslices or fetches; on `baht-page-change` the host fetches the next page and\nre-feeds `items`/`page`. While that fetch runs, set `loading` to show\nskeleton rows.\n\n  const t = document.querySelector('baht-table');\n  t.columns = { name: 'Name', created_at: 'Created' };\n  t.items = pageRows;                 // current page only\n  t.loading = false; t.page = 1; t.totalPages = 12;\n  t.addEventListener('baht-page-change', (e) => fetchPage(e.detail.page));\n  t.addEventListener('baht-row-click', (e) => open(e.detail.id));\n\nSet `cursor-mode` for cursor-based APIs (no total count) — the footer\nbecomes a Prev/Next pair gated by `has-next`/`has-prev`, and the host\nlistens for `baht-cursor-change` instead of `baht-page-change`:\n\n  t.cursorMode = true; t.hasNext = true; t.hasPrev = false;\n  t.addEventListener('baht-cursor-change', (e) => fetchPage(e.detail.direction));\n\n`visibleColumns` picks + orders a subset of `columns` client-side (no\nrefetch) — pair it with <baht-multiselect> as the chooser UI:\n\n  picker.field = { key: 'cols', options: Object.entries(t.columns).map(([key, label]) => ({ key, label })) };\n  picker.value = t.visibleColumns;           // omit/empty = show all columns\n  picker.addEventListener('baht-input', (e) => t.visibleColumns = e.detail.value);\n---\n\n\n### **Events:**\n - **baht-row-click**",
       "attributes": [
         { "name": "loading", "values": [] },
         { "name": "error", "values": [] },

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "bank20baht-ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1452,7 +1452,7 @@
         },
         {
           "name": "baht-table",
-          "description": "Server-side data table. `items` is ONE page of rows — the component never\nslices or fetches; on `baht-page-change` the host fetches the next page and\nre-feeds `items`/`page`. While that fetch runs, set `loading` to show\nskeleton rows.\n\n  const t = document.querySelector('baht-table');\n  t.columns = { name: 'Name', created_at: 'Created' };\n  t.items = pageRows;                 // current page only\n  t.loading = false; t.page = 1; t.totalPages = 12;\n  t.addEventListener('baht-page-change', (e) => fetchPage(e.detail.page));\n  t.addEventListener('baht-row-click', (e) => open(e.detail.id));\n\nSet `cursor-mode` for cursor-based APIs (no total count) — the footer\nbecomes a Prev/Next pair gated by `has-next`/`has-prev`, and the host\nlistens for `baht-cursor-change` instead of `baht-page-change`:\n\n  t.cursorMode = true; t.hasNext = true; t.hasPrev = false;\n  t.addEventListener('baht-cursor-change', (e) => fetchPage(e.detail.direction));\n---\n\n\n### **Events:**\n - **baht-row-click**",
+          "description": "Server-side data table. `items` is ONE page of rows — the component never\nslices or fetches; on `baht-page-change` the host fetches the next page and\nre-feeds `items`/`page`. While that fetch runs, set `loading` to show\nskeleton rows.\n\n  const t = document.querySelector('baht-table');\n  t.columns = { name: 'Name', created_at: 'Created' };\n  t.items = pageRows;                 // current page only\n  t.loading = false; t.page = 1; t.totalPages = 12;\n  t.addEventListener('baht-page-change', (e) => fetchPage(e.detail.page));\n  t.addEventListener('baht-row-click', (e) => open(e.detail.id));\n\nSet `cursor-mode` for cursor-based APIs (no total count) — the footer\nbecomes a Prev/Next pair gated by `has-next`/`has-prev`, and the host\nlistens for `baht-cursor-change` instead of `baht-page-change`:\n\n  t.cursorMode = true; t.hasNext = true; t.hasPrev = false;\n  t.addEventListener('baht-cursor-change', (e) => fetchPage(e.detail.direction));\n\n`visibleColumns` picks + orders a subset of `columns` client-side (no\nrefetch) — pair it with <baht-multiselect> as the chooser UI:\n\n  picker.field = { key: 'cols', options: Object.entries(t.columns).map(([key, label]) => ({ key, label })) };\n  picker.value = t.visibleColumns;           // omit/empty = show all columns\n  picker.addEventListener('baht-input', (e) => t.visibleColumns = e.detail.value);\n---\n\n\n### **Events:**\n - **baht-row-click**",
           "doc-url": "",
           "attributes": [
             {
@@ -1555,6 +1555,11 @@
                 "description": "Custom cell renderers by column key (functions — a property, never JSON).",
                 "type": "Record<string, CellRenderer>"
               },
+              {
+                "name": "visibleColumns",
+                "description": "Subset + order of `columns` to render; empty/omitted = show all.",
+                "type": "string[]"
+              },
               { "name": "page", "type": "number" },
               { "name": "totalPages", "type": "number" },
               {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bank20baht-ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "description": "JSON-driven form + workflow engine. Send JSON in, get an interactive form out.",
   "license": "MIT",