@rozie-ui/data-table-lit 0.7.3 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-lit",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -46,7 +46,7 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@rozie/runtime-lit": "^0.10.0"
+    "@rozie/runtime-lit": "^0.10.1"
   },
   "peerDependencies": {
     "lit": "^3.2",

package/src/Column.ts

@@ -54,6 +54,14 @@ export default class Column extends SignalWatcher(LitElement) {
    * The table-core aggregation for this column inside a group-header cell. Either a built-in name string — `'sum'` | `'min'` | `'max'` | `'extent'` | `'mean'` | `'median'` | `'unique'` | `'uniqueCount'` | `'count'` — or a custom function `(columnId, leafRows, childRows) => any` (defensively wrapped by the parent so a throw cannot crash grouping). Null → no aggregation (the group-header cell renders as a placeholder).
    */
   @property({ type: String, attribute: 'aggregation-fn' }) aggregationFn: string | (((...args: any[]) => any) | null) = null;
+  /**
+   * The table-core filter rule for this column. Either a built-in name string (e.g. `'arrIncludesSome'`, `'equalsString'`) or a custom function `(value, filterValue, row) => boolean`, where `row` is the original data object. Null → table-core's auto rule for the column's value type.
+   */
+  @property({ type: String, attribute: 'filter-fn' }) filterFn: string | (((...args: any[]) => any) | null) = null;
+  /**
+   * The table-core sort rule for this column. Either a built-in name string (e.g. `'alphanumeric'`, `'basic'`) or a custom ascending comparator `(a, b, rowA, rowB) => number` over the cell values, with the original data objects as `rowA` / `rowB`. Null → table-core's auto rule for the column's value type.
+   */
+  @property({ type: String, attribute: 'sorting-fn' }) sortingFn: string | (((...args: any[]) => any) | null) = null;
   /**
    * Whether this column's cells are editable (opt-in). Default `false` → the column is read-only and the display↔editor branch never mounts an editor. Bind `:editable="true"` (a bare attr only coerces on Vue+Lit).
    */
@@ -96,7 +104,9 @@ private get registry() { return this.__rozieCtxConsumer_data_table_columns.value
   }
 
   updated(changedProperties: Map<string, unknown>): void {
-    if (this.__rozieFirstUpdateDone && (changedProperties.has('id') || changedProperties.has('field') || changedProperties.has('header') || changedProperties.has('sortable') || changedProperties.has('filterable') || changedProperties.has('pinned') || changedProperties.has('width') || changedProperties.has('expandable') || changedProperties.has('groupable') || changedProperties.has('aggregationFn') || changedProperties.has('editable') || changedProperties.has('editor') || changedProperties.has('editorOptions') || changedProperties.has('validate'))) { const __watchVal = (() => [this.id, this.field, this.header, this.sortable, this.filterable, this.pinned, this.width, this.expandable, this.groupable, this.aggregationFn, this.editable, this.editor, this.editorOptions, this.validate])(); (() => {
+    if (this.__rozieFirstUpdateDone && (changedProperties.has('id') || changedProperties.has('field') || changedProperties.has('header') || changedProperties.has('sortable') || changedProperties.has('filterable') || changedProperties.has('pinned') || changedProperties.has('width') || changedProperties.has('expandable') || changedProperties.has('groupable') || changedProperties.has('aggregationFn') || changedProperties.has('filterFn') || changedProperties.has('sortingFn') || changedProperties.has('editable') || changedProperties.has('editor') || changedProperties.has('editorOptions') || changedProperties.has('validate'))) { const __watchVal = (() => [this.id, this.field, this.header, this.sortable, this.filterable, this.pinned, this.width, this.expandable, this.groupable, this.aggregationFn, this.filterFn, this.sortingFn, this.editable, this.editor, this.editorOptions, this.validate])(); (() => {
+      this.latestFilterFn = this.filterFn;
+      this.latestSortingFn = this.sortingFn;
       if (this.reg) this.reg.registerColumn(this.colId(), this.buildSpec());
     })(); }
     this.__rozieFirstUpdateDone = true;
@@ -141,31 +151,57 @@ private get registry() { return this.__rozieCtxConsumer_data_table_columns.value
   // REQ-30) and the $onMount registration never double-register the column.
   registered = false;
 
+  // Stable trampolines for custom filterFn/sortingFn. An inline arrow is a new identity every
+  // consumer render; registering it directly would defeat the registerColumn equivalence guard
+  // (a function compares by source, but table-core would hold a stale closure). The spec holds
+  // ONE trampoline per column that always calls the latest function, refreshed in the re-register
+  // watch below BEFORE the equivalence check. A mutable top-level `let` (a ref on React).
+  // table-core reads `autoRemove` / `resolveFilterValue` OFF the filter function itself, so the
+  // filter trampoline carries stable forwarders that read the CURRENT latestFilterFn (absent on
+  // the consumer's fn => table-core's own defaults: never auto-remove, value passes through).
+  latestFilterFn: any = null;
+
+  latestSortingFn: any = null;
+
+  filterTrampoline: any = Object.assign((...args: any[]) => typeof this.latestFilterFn === 'function' ? this.latestFilterFn(...args) : true, {
+  autoRemove: (value: any, column: any) => typeof this.latestFilterFn === 'function' && typeof this.latestFilterFn.autoRemove === 'function' ? this.latestFilterFn.autoRemove(value, column) : false,
+  resolveFilterValue: (value: any) => typeof this.latestFilterFn === 'function' && typeof this.latestFilterFn.resolveFilterValue === 'function' ? this.latestFilterFn.resolveFilterValue(value) : value
+});
+
+  sortingTrampoline = (...args: any[]) => typeof this.latestSortingFn === 'function' ? this.latestSortingFn(...args) : 0;
+
   // the column SPEC builder — shared by the $onMount register and the late-context
   // $onUpdate below. Carries METADATA ONLY (no cell/header render callbacks — D-A moved
   // per-cell rendering to the parent's #cell/#header scoped slot, dispatched by columnId).
   colId = () => this.id !== '' ? this.id : this.field;
 
-  buildSpec = () => ({
-  id: this.colId(),
-  field: this.field !== '' ? this.field : this.colId(),
-  header: this.header,
-  sortable: this.sortable,
-  filterable: this.filterable,
-  pinned: this.pinned,
-  width: this.width,
-  // Expandable-rows reserved metadata (phase 50, D-04) — carried via the parent registry.
-  expandable: this.expandable,
-  // Grouping + aggregation metadata (phase 50, reqs 4-7, D-05) — carried via the parent
-  // registry; the parent resolves aggregationFn onto the ColumnDef (defensive-wrapping a
-  // custom fn) and filters groupableColumns by `groupable`.
-  groupable: this.groupable,
-  aggregationFn: this.aggregationFn,
-  // Editable-cell config (Phase 51) — carried into ColumnDef.meta via the parent
-  // registry (the existing per-column metadata path; NO parallel registry).
-  editable: this.editable,
-  editor: this.editor,
-  editorOptions: this.editorOptions,
-  validate: this.validate
-});
+  buildSpec = () => {
+  // Seed the trampolines' targets at first registration (Lit props may not exist earlier).
+  this.latestFilterFn = this.filterFn;
+  this.latestSortingFn = this.sortingFn;
+  return {
+    id: this.colId(),
+    field: this.field !== '' ? this.field : this.colId(),
+    header: this.header,
+    sortable: this.sortable,
+    filterable: this.filterable,
+    pinned: this.pinned,
+    width: this.width,
+    // Expandable-rows reserved metadata (phase 50, D-04) — carried via the parent registry.
+    expandable: this.expandable,
+    // Grouping + aggregation metadata (phase 50, reqs 4-7, D-05) — carried via the parent
+    // registry; the parent resolves aggregationFn onto the ColumnDef (defensive-wrapping a
+    // custom fn) and filters groupableColumns by `groupable`.
+    groupable: this.groupable,
+    aggregationFn: this.aggregationFn,
+    filterFn: typeof this.filterFn === 'function' ? this.filterTrampoline : this.filterFn,
+    sortingFn: typeof this.sortingFn === 'function' ? this.sortingTrampoline : this.sortingFn,
+    // Editable-cell config (Phase 51) — carried into ColumnDef.meta via the parent
+    // registry (the existing per-column metadata path; NO parallel registry).
+    editable: this.editable,
+    editor: this.editor,
+    editorOptions: this.editorOptions,
+    validate: this.validate
+  };
+};
 }