@egose/shadcn-theme-ng-tw 0.6.0 → 0.6.2

package/data-table/fesm2022/data-table.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component, model, output, signal, linkedSignal, effect, NgModule } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, model, output, signal, linkedSignal, effect, untracked, NgModule } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { HlmButton } from '@egose/shadcn-theme-ng-tw/button';
 import { HlmCard, HlmCardContent } from '@egose/shadcn-theme-ng-tw/card';
@@ -368,7 +368,7 @@ class EgDataTableViewOptions {
       type="button"
       [hlmDropdownMenuTrigger]="_menu"
     >
-      <ng-icon hlm name="lucideSettings2" />
+      <ng-icon hlm size="sm" name="lucideSettings2" />
       View
     </button>
     <ng-template #_menu>
@@ -406,7 +406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
       type="button"
       [hlmDropdownMenuTrigger]="_menu"
     >
-      <ng-icon hlm name="lucideSettings2" />
+      <ng-icon hlm size="sm" name="lucideSettings2" />
       View
     </button>
     <ng-template #_menu>
@@ -518,6 +518,16 @@ class EgDataTable {
     /** Client rows, or a server page slice when `manualPagination` is set (`null` while loading). */
     data = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /**
+     * Pure stable identity callback, e.g. `(record) => record.id`. Return a unique
+     * string per entity, independent of position, and keep the callback reference stable.
+     * Selection survives refreshes only for IDs still in the supplied rows (after
+     * `filterRows`); server selection is limited to the loaded slice. Without this
+     * callback, IDs are positional and replacing the rows clears selection.
+     * Changing the callback clears selection. Update data immutably.
+     */
+    getRowId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "getRowId" }] : /* istanbul ignore next */ []));
     /** When true, `data` is a server page slice and the table uses TanStack `manualPagination`. Sorting and filtering are then display-only: the slice is shown as-is while `sortingChange` / `filterChange` (`columnFiltersChange`) notify the caller to refetch. */
     manualPagination = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "manualPagination" }] : /* istanbul ignore next */ []));
@@ -550,7 +560,7 @@ class EgDataTable {
     ...(ngDevMode ? [{ debugName: "filterColumnId" }] : /* istanbul ignore next */ []));
     filterPlaceholder = input('Filter...', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
-    /** Show the column-visibility dropdown inside the toolbar. Off by default; opt in per table. */
+    /** Show the column-visibility dropdown inside the toolbar (requires `showToolbar`). Off by default; opt in per table. Also enables hiding — the `Hide` item in `EgDataTableColumnHeader` only renders when this is true, so hidden columns always have a way back. Per-column `enableHiding: false` further disables individual columns. */
     showColumnToggle = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showColumnToggle" }] : /* istanbul ignore next */ []));
     /** Custom right-side toolbar content (e.g. action buttons) as a template. Renders the toolbar row even when `showToolbar` is false; built-ins stay on the left. */
@@ -571,7 +581,7 @@ class EgDataTable {
     /** Seeds the column-visibility state once at creation. Later changes are ignored. */
     initialColumnVisibility = input({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "initialColumnVisibility" }] : /* istanbul ignore next */ []));
-    /** Seeds the row-selection state once at creation (keys are row ids). Later changes are ignored. */
+    /** Seeds selection once for current rows: keys come from `getRowId`, or positional indices without it. Missing IDs are discarded. Later changes are ignored. */
     initialRowSelection = input({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "initialRowSelection" }] : /* istanbul ignore next */ []));
     /** Show the rows-per-page selector in the footer pager. */
@@ -584,7 +594,7 @@ class EgDataTable {
     navMode = input('icons', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "navMode" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
-    /** Emits the selected rows whenever selection changes (requires `enableSelection`). */
+    /** Emits on init and when selected row identities/order or object references change. Includes rows hidden by built-in filters/client pagination, but never rows absent from `data`/`filterRows`. */
     selectionChange = output();
     /** Emits the target page index on pager navigation (primary hook for server fetching). */
     pageChange = output();
@@ -607,8 +617,6 @@ class EgDataTable {
     ...(ngDevMode ? [{ debugName: "_columnFilters" }] : /* istanbul ignore next */ []));
     _columnVisibility = signal({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_columnVisibility" }] : /* istanbul ignore next */ []));
-    _rowSelection = signal({}, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_rowSelection" }] : /* istanbul ignore next */ []));
     _clientPageIndex = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_clientPageIndex" }] : /* istanbul ignore next */ []));
     // Linked so the bound `defaultPageSize` applies once inputs are set, while
@@ -640,6 +648,32 @@ class EgDataTable {
         return filter ? filter(rows) : rows;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    // TanStack uses data-reference changes to reset pagination. State/layout
+    // updates must not look like a new data set (including selecting page rows).
+    _tableItems = computed(() => {
+        // A different identity function must also rebuild TanStack's cached rows.
+        this.getRowId();
+        return [...this._items()];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tableItems" }] : /* istanbul ignore next */ []));
+    // Reconcile synchronously with the data source, before either TanStack or the
+    // output can observe old positional keys against new records. An effect-based
+    // reset would permit a transient wrong-entity selection.
+    _rowSelection = linkedSignal({ ...(ngDevMode ? { debugName: "_rowSelection" } : /* istanbul ignore next */ {}), source: () => ({ items: this._items(), getRowId: this.getRowId() }),
+        computation: (source, previous) => {
+            if (!previous || source.getRowId !== previous.source.getRowId)
+                return {};
+            if (!source.getRowId && source.items !== previous.source.items)
+                return {};
+            return this._keepCurrentSelection(previous.value);
+        } });
+    _keepCurrentSelection(selection) {
+        const getRowId = this.getRowId();
+        return Object.fromEntries(this._items()
+            .map((row, index) => (getRowId ? getRowId(row) : String(index)))
+            .filter((id) => Object.hasOwn(selection, id) && selection[id])
+            .map((id) => [id, true]));
+    }
     _serverPageCount = computed(() => {
         const paginated = this._page();
         if (!paginated || paginated.limit <= 0)
@@ -686,7 +720,12 @@ class EgDataTable {
         return {
             features: this.features(),
             columns: this._finalColumns(),
-            data: [...this._items()],
+            data: this._tableItems(),
+            getRowId: this.getRowId(),
+            // Hiding is only allowed when the View menu can bring columns back.
+            // This drives `column.getCanHide()` for both `EgDataTableColumnHeader`
+            // (Hide item) and `EgDataTableViewOptions` (toggle list).
+            enableHiding: this.showColumnToggle(),
             manualPagination: server,
             manualSorting: server,
             manualFiltering: server,
@@ -736,10 +775,11 @@ class EgDataTable {
             },
         };
     });
+    _selectedRows = computed(() => this._table.getSelectedRowModel().rows.map((row) => row.original), { ...(ngDevMode ? { debugName: "_selectedRows" } : /* istanbul ignore next */ {}), equal: (a, b) => a.length === b.length && a.every((row, index) => row === b[index]) });
     _emitSelection = effect(() => {
-        this._rowSelection();
-        const selected = this._table.getSelectedRowModel().rows.map((row) => row.original);
-        this.selectionChange.emit(selected);
+        const selected = this._selectedRows();
+        // Consumer handlers may read signals; those reads must not retrigger us.
+        untracked(() => this.selectionChange.emit(selected));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_emitSelection" }] : /* istanbul ignore next */ []));
     /**
@@ -752,7 +792,7 @@ class EgDataTable {
         this._sorting.set([...this.initialSorting()]);
         this._columnFilters.set([...this.initialColumnFilters()]);
         this._columnVisibility.set({ ...this.initialColumnVisibility() });
-        this._rowSelection.set({ ...this.initialRowSelection() });
+        this._rowSelection.set(this._keepCurrentSelection(this.initialRowSelection()));
     }
     _hasGrid = computed(() => this.gridColumns() !== undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_hasGrid" }] : /* istanbul ignore next */ []));
@@ -832,7 +872,7 @@ class EgDataTable {
         return cell.column.id.replace(/_/g, ' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgDataTable, isStandalone: true, selector: "eg-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gridColumns: { classPropertyName: "gridColumns", publicName: "gridColumns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, manualPagination: { classPropertyName: "manualPagination", publicName: "manualPagination", isSignal: true, isRequired: false, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null }, hideFooter: { classPropertyName: "hideFooter", publicName: "hideFooter", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, showLayoutToggle: { classPropertyName: "showLayoutToggle", publicName: "showLayoutToggle", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, filterColumnId: { classPropertyName: "filterColumnId", publicName: "filterColumnId", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showColumnToggle: { classPropertyName: "showColumnToggle", publicName: "showColumnToggle", isSignal: true, isRequired: false, transformFunction: null }, toolbarActions: { classPropertyName: "toolbarActions", publicName: "toolbarActions", isSignal: true, isRequired: false, transformFunction: null }, defaultPageSize: { classPropertyName: "defaultPageSize", publicName: "defaultPageSize", isSignal: true, isRequired: false, transformFunction: null }, filterRows: { classPropertyName: "filterRows", publicName: "filterRows", isSignal: true, isRequired: false, transformFunction: null }, initialSorting: { classPropertyName: "initialSorting", publicName: "initialSorting", isSignal: true, isRequired: false, transformFunction: null }, initialColumnFilters: { classPropertyName: "initialColumnFilters", publicName: "initialColumnFilters", isSignal: true, isRequired: false, transformFunction: null }, initialColumnVisibility: { classPropertyName: "initialColumnVisibility", publicName: "initialColumnVisibility", isSignal: true, isRequired: false, transformFunction: null }, initialRowSelection: { classPropertyName: "initialRowSelection", publicName: "initialRowSelection", isSignal: true, isRequired: false, transformFunction: null }, showPageSize: { classPropertyName: "showPageSize", publicName: "showPageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, navMode: { classPropertyName: "navMode", publicName: "navMode", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layout: "layoutChange", selectionChange: "selectionChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange", rowClick: "rowClick", sortingChange: "sortingChange", columnFiltersChange: "columnFiltersChange", filterChange: "filterChange", columnVisibilityChange: "columnVisibilityChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgDataTable, isStandalone: true, selector: "eg-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, gridColumns: { classPropertyName: "gridColumns", publicName: "gridColumns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, getRowId: { classPropertyName: "getRowId", publicName: "getRowId", isSignal: true, isRequired: false, transformFunction: null }, manualPagination: { classPropertyName: "manualPagination", publicName: "manualPagination", isSignal: true, isRequired: false, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null }, hideFooter: { classPropertyName: "hideFooter", publicName: "hideFooter", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, showLayoutToggle: { classPropertyName: "showLayoutToggle", publicName: "showLayoutToggle", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, filterColumnId: { classPropertyName: "filterColumnId", publicName: "filterColumnId", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showColumnToggle: { classPropertyName: "showColumnToggle", publicName: "showColumnToggle", isSignal: true, isRequired: false, transformFunction: null }, toolbarActions: { classPropertyName: "toolbarActions", publicName: "toolbarActions", isSignal: true, isRequired: false, transformFunction: null }, defaultPageSize: { classPropertyName: "defaultPageSize", publicName: "defaultPageSize", isSignal: true, isRequired: false, transformFunction: null }, filterRows: { classPropertyName: "filterRows", publicName: "filterRows", isSignal: true, isRequired: false, transformFunction: null }, initialSorting: { classPropertyName: "initialSorting", publicName: "initialSorting", isSignal: true, isRequired: false, transformFunction: null }, initialColumnFilters: { classPropertyName: "initialColumnFilters", publicName: "initialColumnFilters", isSignal: true, isRequired: false, transformFunction: null }, initialColumnVisibility: { classPropertyName: "initialColumnVisibility", publicName: "initialColumnVisibility", isSignal: true, isRequired: false, transformFunction: null }, initialRowSelection: { classPropertyName: "initialRowSelection", publicName: "initialRowSelection", isSignal: true, isRequired: false, transformFunction: null }, showPageSize: { classPropertyName: "showPageSize", publicName: "showPageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizes: { classPropertyName: "pageSizes", publicName: "pageSizes", isSignal: true, isRequired: false, transformFunction: null }, navMode: { classPropertyName: "navMode", publicName: "navMode", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layout: "layoutChange", selectionChange: "selectionChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange", rowClick: "rowClick", sortingChange: "sortingChange", columnFiltersChange: "columnFiltersChange", filterChange: "filterChange", columnVisibilityChange: "columnVisibilityChange" }, providers: [
             provideIcons({ lucideArrowDown, lucideArrowUp, lucideChevronsUpDown, lucideLayoutGrid, lucideLayoutList }),
         ], ngImport: i0, template: `
     <div [class]="_containerClass()">
@@ -1281,14 +1321,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], gridColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridColumns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], manualPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualPagination", required: false }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], enableSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelection", required: false }] }], hideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFooter", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }, { type: i0.Output, args: ["layoutChange"] }], showLayoutToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLayoutToggle", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], filterColumnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterColumnId", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], showColumnToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnToggle", required: false }] }], toolbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarActions", required: false }] }], defaultPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPageSize", required: false }] }], filterRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterRows", required: false }] }], initialSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSorting", required: false }] }], initialColumnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialColumnFilters", required: false }] }], initialColumnVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialColumnVisibility", required: false }] }], initialRowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialRowSelection", required: false }] }], showPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSize", required: false }] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }], navMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "navMode", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], sortingChange: [{ type: i0.Output, args: ["sortingChange"] }], columnFiltersChange: [{ type: i0.Output, args: ["columnFiltersChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], columnVisibilityChange: [{ type: i0.Output, args: ["columnVisibilityChange"] }] } });
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], gridColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridColumns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], getRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowId", required: false }] }], manualPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualPagination", required: false }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], enableSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelection", required: false }] }], hideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFooter", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }, { type: i0.Output, args: ["layoutChange"] }], showLayoutToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLayoutToggle", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], filterColumnId: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterColumnId", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], showColumnToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnToggle", required: false }] }], toolbarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarActions", required: false }] }], defaultPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPageSize", required: false }] }], filterRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterRows", required: false }] }], initialSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSorting", required: false }] }], initialColumnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialColumnFilters", required: false }] }], initialColumnVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialColumnVisibility", required: false }] }], initialRowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialRowSelection", required: false }] }], showPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSize", required: false }] }], pageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizes", required: false }] }], navMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "navMode", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], sortingChange: [{ type: i0.Output, args: ["sortingChange"] }], columnFiltersChange: [{ type: i0.Output, args: ["columnFiltersChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], columnVisibilityChange: [{ type: i0.Output, args: ["columnVisibilityChange"] }] } });
 
 /**
  * Sortable + hideable column header.
  *
  * Render via `flexRenderComponent(EgDataTableColumnHeader, { inputs: { column, title } })`
  * so the extra `title` input flows alongside the flex-render `column` context.
- * Non-sortable columns render a plain label.
+ * Non-sortable columns render a plain label. The `Hide` menu item only renders
+ * when `column.getCanHide()` is true — `EgDataTable` ties table-level
+ * `enableHiding` to its `showColumnToggle` input so there is always a way back
+ * via the View menu, and per-column `enableHiding: false` further disables it.
  */
 class EgDataTableColumnHeader {
     column = input.required(/* @ts-ignore */
@@ -1300,6 +1343,9 @@ class EgDataTableColumnHeader {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _sorted = computed(() => this.column().getIsSorted(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_sorted" }] : /* istanbul ignore next */ []));
+    /** Hideable only when TanStack allows it (table + column `enableHiding`). Absent `getCanHide` (legacy mocks) means hideable. */
+    _canHide = computed(() => this.column().getCanHide?.() ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_canHide" }] : /* istanbul ignore next */ []));
     /** Height per density. Merged by `hlmButton`. */
     _buttonClass = computed(() => hlm('tw:-ml-3', this.size() === 'sm' ? 'tw:h-7' : this.size() === 'lg' ? 'tw:h-9' : 'tw:h-8'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_buttonClass" }] : /* istanbul ignore next */ []));
@@ -1338,11 +1384,13 @@ class EgDataTableColumnHeader {
               <ng-icon hlm size="sm" name="lucideArrowDown" />
               Desc
             </button>
-            <div hlmDropdownMenuSeparator></div>
-            <button hlmDropdownMenuItem type="button" (click)="column().toggleVisibility(false)">
-              <ng-icon hlm size="sm" name="lucideEyeOff" />
-              Hide
-            </button>
+            @if (_canHide()) {
+              <div hlmDropdownMenuSeparator></div>
+              <button hlmDropdownMenuItem type="button" (click)="column().toggleVisibility(false)">
+                <ng-icon hlm size="sm" name="lucideEyeOff" />
+                Hide
+              </button>
+            }
           </div>
         </ng-template>
       </div>
@@ -1391,11 +1439,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
               <ng-icon hlm size="sm" name="lucideArrowDown" />
               Desc
             </button>
-            <div hlmDropdownMenuSeparator></div>
-            <button hlmDropdownMenuItem type="button" (click)="column().toggleVisibility(false)">
-              <ng-icon hlm size="sm" name="lucideEyeOff" />
-              Hide
-            </button>
+            @if (_canHide()) {
+              <div hlmDropdownMenuSeparator></div>
+              <button hlmDropdownMenuItem type="button" (click)="column().toggleVisibility(false)">
+                <ng-icon hlm size="sm" name="lucideEyeOff" />
+                Hide
+              </button>
+            }
           </div>
         </ng-template>
       </div>

package/data-table/types/data-table.d.ts

@@ -188,6 +188,15 @@ declare class EgDataTable<TData extends RowData> implements OnInit {
     }, TData>[] | undefined>;
     /** Client rows, or a server page slice when `manualPagination` is set (`null` while loading). */
     readonly data: _angular_core.InputSignal<EgPaginatedResponse<TData> | readonly TData[] | null>;
+    /**
+     * Pure stable identity callback, e.g. `(record) => record.id`. Return a unique
+     * string per entity, independent of position, and keep the callback reference stable.
+     * Selection survives refreshes only for IDs still in the supplied rows (after
+     * `filterRows`); server selection is limited to the loaded slice. Without this
+     * callback, IDs are positional and replacing the rows clears selection.
+     * Changing the callback clears selection. Update data immutably.
+     */
+    readonly getRowId: _angular_core.InputSignal<((row: TData) => string) | undefined>;
     /** When true, `data` is a server page slice and the table uses TanStack `manualPagination`. Sorting and filtering are then display-only: the slice is shown as-is while `sortingChange` / `filterChange` (`columnFiltersChange`) notify the caller to refetch. */
     readonly manualPagination: _angular_core.InputSignal<boolean>;
     /** TanStack feature registry. Defaults to filtering + visibility + pagination + selection + sorting. */
@@ -228,7 +237,7 @@ declare class EgDataTable<TData extends RowData> implements OnInit {
     /** Column id the toolbar filter input writes to (e.g. `'email'`). Empty means client-side filtering is skipped and keystrokes only emit `filterChange` (server-side pattern). */
     readonly filterColumnId: _angular_core.InputSignal<string>;
     readonly filterPlaceholder: _angular_core.InputSignal<string>;
-    /** Show the column-visibility dropdown inside the toolbar. Off by default; opt in per table. */
+    /** Show the column-visibility dropdown inside the toolbar (requires `showToolbar`). Off by default; opt in per table. Also enables hiding — the `Hide` item in `EgDataTableColumnHeader` only renders when this is true, so hidden columns always have a way back. Per-column `enableHiding: false` further disables individual columns. */
     readonly showColumnToggle: _angular_core.InputSignal<boolean>;
     /** Custom right-side toolbar content (e.g. action buttons) as a template. Renders the toolbar row even when `showToolbar` is false; built-ins stay on the left. */
     readonly toolbarActions: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
@@ -242,7 +251,7 @@ declare class EgDataTable<TData extends RowData> implements OnInit {
     readonly initialColumnFilters: _angular_core.InputSignal<ColumnFiltersState>;
     /** Seeds the column-visibility state once at creation. Later changes are ignored. */
     readonly initialColumnVisibility: _angular_core.InputSignal<ColumnVisibilityState>;
-    /** Seeds the row-selection state once at creation (keys are row ids). Later changes are ignored. */
+    /** Seeds selection once for current rows: keys come from `getRowId`, or positional indices without it. Missing IDs are discarded. Later changes are ignored. */
     readonly initialRowSelection: _angular_core.InputSignal<RowSelectionState>;
     /** Show the rows-per-page selector in the footer pager. */
     readonly showPageSize: _angular_core.InputSignal<boolean>;
@@ -251,7 +260,7 @@ declare class EgDataTable<TData extends RowData> implements OnInit {
     /** Footer navigation-button content: icons only, text labels only, or both. */
     readonly navMode: _angular_core.InputSignal<EgPaginationNavMode>;
     readonly userClass: _angular_core.InputSignal<string>;
-    /** Emits the selected rows whenever selection changes (requires `enableSelection`). */
+    /** Emits on init and when selected row identities/order or object references change. Includes rows hidden by built-in filters/client pagination, but never rows absent from `data`/`filterRows`. */
     readonly selectionChange: _angular_core.OutputEmitterRef<readonly TData[]>;
     /** Emits the target page index on pager navigation (primary hook for server fetching). */
     readonly pageChange: _angular_core.OutputEmitterRef<number>;
@@ -269,13 +278,15 @@ declare class EgDataTable<TData extends RowData> implements OnInit {
     private readonly _sorting;
     private readonly _columnFilters;
     private readonly _columnVisibility;
-    private readonly _rowSelection;
     private readonly _clientPageIndex;
     private readonly _clientPageSize;
     private readonly _isServer;
     /** The server page slice when in server mode; `null` for client data, misuse shapes, or `null` while loading. */
     private readonly _page;
     private readonly _items;
+    private readonly _tableItems;
+    private readonly _rowSelection;
+    private _keepCurrentSelection;
     private readonly _serverPageCount;
     private readonly _serverPageIndex;
     private readonly _paginationState;
@@ -323,6 +334,7 @@ declare class EgDataTable<TData extends RowData> implements OnInit {
             readonly thumbnail?: boolean;
         };
     }, TData>;
+    private readonly _selectedRows;
     private readonly _emitSelection;
     /**
      * Seeds internal state from the `initial*` inputs. Runs in `ngOnInit` (after
@@ -352,7 +364,7 @@ declare class EgDataTable<TData extends RowData> implements OnInit {
     protected _contentCells(row: Row<EgDataTableFeatures, TData>): Cell<EgDataTableFeatures, TData, CellData>[];
     protected _cellLabel(cell: Cell<EgDataTableFeatures, TData, CellData>): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgDataTable<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgDataTable<any>, "eg-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "gridColumns": { "alias": "gridColumns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "manualPagination": { "alias": "manualPagination"; "required": false; "isSignal": true; }; "features": { "alias": "features"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "enableSelection": { "alias": "enableSelection"; "required": false; "isSignal": true; }; "hideFooter": { "alias": "hideFooter"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "showLayoutToggle": { "alias": "showLayoutToggle"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "filterColumnId": { "alias": "filterColumnId"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "showColumnToggle": { "alias": "showColumnToggle"; "required": false; "isSignal": true; }; "toolbarActions": { "alias": "toolbarActions"; "required": false; "isSignal": true; }; "defaultPageSize": { "alias": "defaultPageSize"; "required": false; "isSignal": true; }; "filterRows": { "alias": "filterRows"; "required": false; "isSignal": true; }; "initialSorting": { "alias": "initialSorting"; "required": false; "isSignal": true; }; "initialColumnFilters": { "alias": "initialColumnFilters"; "required": false; "isSignal": true; }; "initialColumnVisibility": { "alias": "initialColumnVisibility"; "required": false; "isSignal": true; }; "initialRowSelection": { "alias": "initialRowSelection"; "required": false; "isSignal": true; }; "showPageSize": { "alias": "showPageSize"; "required": false; "isSignal": true; }; "pageSizes": { "alias": "pageSizes"; "required": false; "isSignal": true; }; "navMode": { "alias": "navMode"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "layout": "layoutChange"; "selectionChange": "selectionChange"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "rowClick": "rowClick"; "sortingChange": "sortingChange"; "columnFiltersChange": "columnFiltersChange"; "filterChange": "filterChange"; "columnVisibilityChange": "columnVisibilityChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EgDataTable<any>, "eg-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "gridColumns": { "alias": "gridColumns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "getRowId": { "alias": "getRowId"; "required": false; "isSignal": true; }; "manualPagination": { "alias": "manualPagination"; "required": false; "isSignal": true; }; "features": { "alias": "features"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "enableSelection": { "alias": "enableSelection"; "required": false; "isSignal": true; }; "hideFooter": { "alias": "hideFooter"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "showLayoutToggle": { "alias": "showLayoutToggle"; "required": false; "isSignal": true; }; "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "filterColumnId": { "alias": "filterColumnId"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "showColumnToggle": { "alias": "showColumnToggle"; "required": false; "isSignal": true; }; "toolbarActions": { "alias": "toolbarActions"; "required": false; "isSignal": true; }; "defaultPageSize": { "alias": "defaultPageSize"; "required": false; "isSignal": true; }; "filterRows": { "alias": "filterRows"; "required": false; "isSignal": true; }; "initialSorting": { "alias": "initialSorting"; "required": false; "isSignal": true; }; "initialColumnFilters": { "alias": "initialColumnFilters"; "required": false; "isSignal": true; }; "initialColumnVisibility": { "alias": "initialColumnVisibility"; "required": false; "isSignal": true; }; "initialRowSelection": { "alias": "initialRowSelection"; "required": false; "isSignal": true; }; "showPageSize": { "alias": "showPageSize"; "required": false; "isSignal": true; }; "pageSizes": { "alias": "pageSizes"; "required": false; "isSignal": true; }; "navMode": { "alias": "navMode"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "layout": "layoutChange"; "selectionChange": "selectionChange"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "rowClick": "rowClick"; "sortingChange": "sortingChange"; "columnFiltersChange": "columnFiltersChange"; "filterChange": "filterChange"; "columnVisibilityChange": "columnVisibilityChange"; }, never, never, true, never>;
 }
 
 /**
@@ -369,13 +381,18 @@ interface EgSortableColumn {
     getIsSorted(): false | SortDirection;
     toggleSorting(desc?: boolean): void;
     toggleVisibility(value?: boolean): void;
+    /** Whether the column can be hidden (`columnDef.enableHiding` and table `enableHiding`). Optional for back-compat mocks — absent means hideable. */
+    getCanHide?(): boolean;
 }
 /**
  * Sortable + hideable column header.
  *
  * Render via `flexRenderComponent(EgDataTableColumnHeader, { inputs: { column, title } })`
  * so the extra `title` input flows alongside the flex-render `column` context.
- * Non-sortable columns render a plain label.
+ * Non-sortable columns render a plain label. The `Hide` menu item only renders
+ * when `column.getCanHide()` is true — `EgDataTable` ties table-level
+ * `enableHiding` to its `showColumnToggle` input so there is always a way back
+ * via the View menu, and per-column `enableHiding: false` further disables it.
  */
 declare class EgDataTableColumnHeader {
     readonly column: _angular_core.InputSignal<EgSortableColumn>;
@@ -383,6 +400,8 @@ declare class EgDataTableColumnHeader {
     /** Density of the trigger button. */
     readonly size: _angular_core.InputSignal<HlmTableSize>;
     protected readonly _sorted: _angular_core.Signal<false | SortDirection>;
+    /** Hideable only when TanStack allows it (table + column `enableHiding`). Absent `getCanHide` (legacy mocks) means hideable. */
+    protected readonly _canHide: _angular_core.Signal<boolean>;
     /** Height per density. Merged by `hlmButton`. */
     protected readonly _buttonClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EgDataTableColumnHeader, never>;

package/date-picker/README.md

@@ -135,6 +135,38 @@ Real selectors (from source):
 
 ## API reference
 
+### User commits, invalid drafts, and programmatic writes
+
+The single, range and multi text inputs commit on **blur or Enter**. Both parsed and transformed values
+must have a finite `getTime` through the configured Spartan date adapter and satisfy inclusive whole-day
+`min`/`max` bounds (`startOfDay(min)` through `endOfDay(max)`). Provide matching parsing, formatting and
+pure transformation callbacks when using a custom adapter/date type. A transformed range must be ordered;
+custom transforms may sort endpoints. The default range parser still treats one date as a same-day range,
+but an explicitly unparseable second endpoint is rejected.
+
+For multi selection, `maxSelection` caps the raw and transformed array counts. `minSelection` is the
+calendar's **deselection floor**: reductions below it are rejected, while growth from empty is allowed.
+Supply unique dates. When the calendar proposes resetting a full selection to one new date, that reset
+must also satisfy the floor. Rejected calendar commits restore the previous selection without user emissions.
+
+On rejection the committed value stays unchanged, no `dateChange`/CVA `onChange` fires, and the input
+preserves editable text across blur, Enter and refocus. `inputInvalid()` exposes local rejection state;
+the native input receives `aria-invalid="true"` and invalid styling, combined with `forceInvalid`.
+The interaction touches the form control but does not install an Angular validator or overwrite its
+errors: form validators continue to see the last committed value. If unresolved drafts should block
+submission, include `inputInvalid()` in that decision. Use `ariaDescribedby` to associate explanatory text.
+
+A successful text/calendar commit, explicit clear, or external value write clears the local rejection.
+Empty text and the clear button bypass transforms and the selection floor, emitting `null` (single/range)
+or `[]` (multi); whitespace is passed to the parser. Enter keeps edit formatting for a subsequent blur;
+blur restores display formatting. Disabled/readonly text inputs do not commit or clear.
+
+`updateDate(value)` returns a boolean indicating whether a user commit was accepted. Programmatic CVA
+`writeValue` applies configured transforms without enforcing user constraints or emitting; it replaces
+rejected drafts, including repeated same-value/null writes. `[date]` remains a direct, untransformed
+standalone input. `reset()` is an explicit programmatic clear and emits. Month/year retains its existing
+brain-input lifecycle; this constraint/draft contract applies to single, range and multi pickers.
+
 ### `HlmDatePicker` — `hlm-date-picker`
 
 Single-date picker. Generic `<T>` (usually `Date`). Implements `BrnDatePickerBase<T>` + `ControlValueAccessor`, hosts `BrnFieldControl`.
@@ -230,15 +262,15 @@ Outputs/methods mirror `HlmDatePicker` (`dateChange: T | null`, `updateDate`, `o
 
 `HlmDatePickerInput<T>`, `HlmDateMultiInput<T>`, `HlmDateRangeInput<T>`, `HlmMonthYearInput<T>` extend `BrnDateInput` (inheriting `placeholder`, `inputId`, disabled/invalid wiring, clear-button and calendar-button behavior) and add:
 
-| Input                                  | Type                                                                            | Default                           | Notes                                                                  |
-| -------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------- | ---------------------------------------------------------------------- |
-| `parseDate`                            | `(value: string) => T \| null` (or `T[] \| null` / `[T,T] \| null` per variant) | from matching `provideHlm*Config` | Return `null` for invalid text; picker clears while text is preserved. |
-| `formatInputDate` / `formatInputDates` | `(date) => string`                                                              | from config                       | Edit format shown while focused.                                       |
-| `ariaLabel` / `ariaDescribedby`        | `string`                                                                        | —                                 | Accessible labelling for the inner `<input>`.                          |
-| `name`                                 | `string \| undefined`                                                           | —                                 | Native `name` forwarded to the inner `<input>`.                        |
-| `readonly`                             | `boolean`                                                                       | `false`                           | Native `readonly` forwarded to the inner `<input>`.                    |
-| `class`                                | `ClassValue`                                                                    | `''`                              | Extra classes on the host group container.                             |
-| `inputClass`                           | `ClassValue`                                                                    | `''`                              | Extra classes on the inner `<input>` (e.g. text size).                 |
+| Input                                  | Type                                                                            | Default                           | Notes                                                                                              |
+| -------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------- | -------------------------------------------------------------------------------------------------- |
+| `parseDate`                            | `(value: string) => T \| null` (or `T[] \| null` / `[T,T] \| null` per variant) | from matching `provideHlm*Config` | Return `null` for invalid text; single/range/multi preserve the committed value and rejected text. |
+| `formatInputDate` / `formatInputDates` | `(date) => string`                                                              | from config                       | Edit format shown while focused.                                                                   |
+| `ariaLabel` / `ariaDescribedby`        | `string`                                                                        | —                                 | Accessible labelling for the inner `<input>`.                                                      |
+| `name`                                 | `string \| undefined`                                                           | —                                 | Native `name` forwarded to the inner `<input>`.                                                    |
+| `readonly`                             | `boolean`                                                                       | `false`                           | Native `readonly` forwarded to the inner `<input>`.                                                |
+| `class`                                | `ClassValue`                                                                    | `''`                              | Extra classes on the host group container.                                                         |
+| `inputClass`                           | `ClassValue`                                                                    | `''`                              | Extra classes on the inner `<input>` (e.g. text size).                                             |
 
 ### `HlmDatePickerTrigger` — `hlm-date-picker-trigger`