@egose/shadcn-theme-ng 0.6.1 → 0.6.2

package/data-table/README.md

@@ -156,7 +156,7 @@ Key `EgDataTable` inputs: `columns` (required), `gridColumns`, `data` (array, or
 
 Outputs: `selectionChange` (also fires once on init, mirroring React's mount effect), `pageChange`, `pageSizeChange`, `rowClick`, `sortingChange`, `columnFiltersChange`, `filterChange` (toolbar input string), `columnVisibilityChange`.
 
-The toolbar (`showToolbar`) always renders the filter input: with `filterColumnId` it filters that column client-side (and `filterChange` mirrors the string); without it, keystrokes only emit `filterChange` so the caller can filter server-side. The column-visibility dropdown is opt-in via `showColumnToggle` (default `false`). `toolbarActions` takes an `ng-template` rendered on the right side of the toolbar row (built-ins stay left) — it renders the row even when `showToolbar` is false.
+The toolbar (`showToolbar`) always renders the filter input: with `filterColumnId` it filters that column client-side (and `filterChange` mirrors the string); without it, keystrokes only emit `filterChange` so the caller can filter server-side. The column-visibility dropdown is opt-in via `showColumnToggle` (default `false`, requires `showToolbar`). `showColumnToggle` also enables hiding: the `Hide` item in `EgDataTableColumnHeader` only renders when it is true (TanStack `column.getCanHide()`), so a hidden column always has a way back via View; per-column `enableHiding: false` disables individual columns even then. `toolbarActions` takes an `ng-template` rendered on the right side of the toolbar row (built-ins stay left) — it renders the row even when `showToolbar` is false.
 
 `size` scales spatial density one step down/up (`sm`: `h-8` headers, `p-1` cells, `h-7` buttons; `lg`: `h-12` headers, `p-3` cells, `h-9` buttons; filter input, page-size trigger, and pager meta texts follow). `EgDataTableColumnHeader` (consumer-instantiated via `flexRenderComponent`) takes the same `size` — for reactive updates put every input in `bindings` (`inputBinding('size', ...)`, plus `column`/`title`, since `bindings` cannot mix with `inputs`).
 

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

@@ -154,7 +154,7 @@ class EgDataTableViewOptions {
         .filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_hidableColumns" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableViewOptions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgDataTableViewOptions, isStandalone: true, selector: "eg-data-table-view-options", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideSettings2 })], ngImport: i0, template: "\n    <button\n      hlmButton\n      variant=\"secondary\"\n      appearance=\"outline\"\n      size=\"sm\"\n      [class]=\"_buttonClass()\"\n      type=\"button\"\n      [hlmDropdownMenuTrigger]=\"_menu\"\n    >\n      <ng-icon hlm name=\"lucideSettings2\" />\n      View\n    </button>\n    <ng-template #_menu>\n      <div hlmDropdownMenu class=\"w-[150px]\">\n        <div hlmDropdownMenuLabel>Toggle columns</div>\n        <div hlmDropdownMenuSeparator></div>\n        @for (column of _hidableColumns(); track column.id) {\n          <button\n            hlmDropdownMenuCheckbox\n            class=\"capitalize\"\n            [checked]=\"column.getIsVisible()\"\n            (triggered)=\"column.toggleVisibility()\"\n          >\n            <hlm-dropdown-menu-checkbox-indicator />\n            {{ column.id }}\n          </button>\n        }\n      </div>\n    </ng-template>\n  ", isInline: true, dependencies: [{ kind: "component", type: HlmButton, selector: "button[hlmButton], a[hlmButton]", inputs: ["variant", "size", "appearance", "loading", "icon", "iconPosition", "class", "spinnerUserClass", "disabled", "type"] }, { kind: "directive", type: i1$1.HlmDropdownMenu, selector: "[hlmDropdownMenu],hlm-dropdown-menu", inputs: ["sideOffset"] }, { kind: "directive", type: i1$1.HlmDropdownMenuCheckbox, selector: "[hlmDropdownMenuCheckbox],[hlmDropdownMenuCheckboxItem]", inputs: ["inset"] }, { kind: "component", type: i1$1.HlmDropdownMenuCheckboxIndicator, selector: "hlm-dropdown-menu-checkbox-indicator" }, { kind: "directive", type: i1$1.HlmDropdownMenuLabel, selector: "[hlmDropdownMenuLabel],hlm-dropdown-menu-label", inputs: ["inset"] }, { kind: "directive", type: i1$1.HlmDropdownMenuSeparator, selector: "[hlmDropdownMenuSeparator],hlm-dropdown-menu-separator" }, { kind: "directive", type: i1$1.HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgDataTableViewOptions, isStandalone: true, selector: "eg-data-table-view-options", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideSettings2 })], ngImport: i0, template: "\n    <button\n      hlmButton\n      variant=\"secondary\"\n      appearance=\"outline\"\n      size=\"sm\"\n      [class]=\"_buttonClass()\"\n      type=\"button\"\n      [hlmDropdownMenuTrigger]=\"_menu\"\n    >\n      <ng-icon hlm size=\"sm\" name=\"lucideSettings2\" />\n      View\n    </button>\n    <ng-template #_menu>\n      <div hlmDropdownMenu class=\"w-[150px]\">\n        <div hlmDropdownMenuLabel>Toggle columns</div>\n        <div hlmDropdownMenuSeparator></div>\n        @for (column of _hidableColumns(); track column.id) {\n          <button\n            hlmDropdownMenuCheckbox\n            class=\"capitalize\"\n            [checked]=\"column.getIsVisible()\"\n            (triggered)=\"column.toggleVisibility()\"\n          >\n            <hlm-dropdown-menu-checkbox-indicator />\n            {{ column.id }}\n          </button>\n        }\n      </div>\n    </ng-template>\n  ", isInline: true, dependencies: [{ kind: "component", type: HlmButton, selector: "button[hlmButton], a[hlmButton]", inputs: ["variant", "size", "appearance", "loading", "icon", "iconPosition", "class", "spinnerUserClass", "disabled", "type"] }, { kind: "directive", type: i1$1.HlmDropdownMenu, selector: "[hlmDropdownMenu],hlm-dropdown-menu", inputs: ["sideOffset"] }, { kind: "directive", type: i1$1.HlmDropdownMenuCheckbox, selector: "[hlmDropdownMenuCheckbox],[hlmDropdownMenuCheckboxItem]", inputs: ["inset"] }, { kind: "component", type: i1$1.HlmDropdownMenuCheckboxIndicator, selector: "hlm-dropdown-menu-checkbox-indicator" }, { kind: "directive", type: i1$1.HlmDropdownMenuLabel, selector: "[hlmDropdownMenuLabel],hlm-dropdown-menu-label", inputs: ["inset"] }, { kind: "directive", type: i1$1.HlmDropdownMenuSeparator, selector: "[hlmDropdownMenuSeparator],hlm-dropdown-menu-separator" }, { kind: "directive", type: i1$1.HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableViewOptions, decorators: [{
             type: Component,
@@ -162,7 +162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     selector: 'eg-data-table-view-options',
                     imports: [HlmButton, HlmDropdownMenuImports, NgIcon, HlmIcon],
                     providers: [provideIcons({ lucideSettings2 })],
-                    template: "\n    <button\n      hlmButton\n      variant=\"secondary\"\n      appearance=\"outline\"\n      size=\"sm\"\n      [class]=\"_buttonClass()\"\n      type=\"button\"\n      [hlmDropdownMenuTrigger]=\"_menu\"\n    >\n      <ng-icon hlm name=\"lucideSettings2\" />\n      View\n    </button>\n    <ng-template #_menu>\n      <div hlmDropdownMenu class=\"w-[150px]\">\n        <div hlmDropdownMenuLabel>Toggle columns</div>\n        <div hlmDropdownMenuSeparator></div>\n        @for (column of _hidableColumns(); track column.id) {\n          <button\n            hlmDropdownMenuCheckbox\n            class=\"capitalize\"\n            [checked]=\"column.getIsVisible()\"\n            (triggered)=\"column.toggleVisibility()\"\n          >\n            <hlm-dropdown-menu-checkbox-indicator />\n            {{ column.id }}\n          </button>\n        }\n      </div>\n    </ng-template>\n  ",
+                    template: "\n    <button\n      hlmButton\n      variant=\"secondary\"\n      appearance=\"outline\"\n      size=\"sm\"\n      [class]=\"_buttonClass()\"\n      type=\"button\"\n      [hlmDropdownMenuTrigger]=\"_menu\"\n    >\n      <ng-icon hlm size=\"sm\" name=\"lucideSettings2\" />\n      View\n    </button>\n    <ng-template #_menu>\n      <div hlmDropdownMenu class=\"w-[150px]\">\n        <div hlmDropdownMenuLabel>Toggle columns</div>\n        <div hlmDropdownMenuSeparator></div>\n        @for (column of _hidableColumns(); track column.id) {\n          <button\n            hlmDropdownMenuCheckbox\n            class=\"capitalize\"\n            [checked]=\"column.getIsVisible()\"\n            (triggered)=\"column.toggleVisibility()\"\n          >\n            <hlm-dropdown-menu-checkbox-indicator />\n            {{ column.id }}\n          </button>\n        }\n      </div>\n    </ng-template>\n  ",
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
@@ -296,7 +296,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. */
@@ -458,6 +458,10 @@ class EgDataTable {
             columns: this._finalColumns(),
             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,
@@ -642,7 +646,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
  *
  * 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 */
@@ -654,11 +661,14 @@ 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("-ml-3", this.size() === 'sm' ? "h-7" : this.size() === 'lg' ? "h-9" : "h-8"), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_buttonClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableColumnHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgDataTableColumnHeader, isStandalone: true, selector: "eg-data-table-column-header", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideArrowDown, lucideArrowUp, lucideChevronsUpDown, lucideEyeOff })], ngImport: i0, template: "\n    @if (column().getCanSort()) {\n      <div class=\"flex items-center gap-2\">\n        <button\n          hlmButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [class]=\"_buttonClass()\"\n          type=\"button\"\n          [hlmDropdownMenuTrigger]=\"_menu\"\n        >\n          <span>{{ title() }}</span>\n          @switch (_sorted()) {\n            @case ('desc') {\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n            }\n            @case ('asc') {\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n            }\n            @default {\n              <ng-icon hlm size=\"sm\" name=\"lucideChevronsUpDown\" />\n            }\n          }\n        </button>\n        <ng-template #_menu>\n          <div hlmDropdownMenu>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleSorting(false)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n              Asc\n            </button>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleSorting(true)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n              Desc\n            </button>\n            <div hlmDropdownMenuSeparator></div>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleVisibility(false)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideEyeOff\" />\n              Hide\n            </button>\n          </div>\n        </ng-template>\n      </div>\n    } @else {\n      <div>{{ title() }}</div>\n    }\n  ", isInline: true, dependencies: [{ kind: "component", type: HlmButton, selector: "button[hlmButton], a[hlmButton]", inputs: ["variant", "size", "appearance", "loading", "icon", "iconPosition", "class", "spinnerUserClass", "disabled", "type"] }, { kind: "directive", type: i1$1.HlmDropdownMenu, selector: "[hlmDropdownMenu],hlm-dropdown-menu", inputs: ["sideOffset"] }, { kind: "directive", type: i1$1.HlmDropdownMenuItem, selector: "[hlmDropdownMenuItem],hlm-dropdown-menu-item", inputs: ["disabled", "variant", "inset"] }, { kind: "directive", type: i1$1.HlmDropdownMenuSeparator, selector: "[hlmDropdownMenuSeparator],hlm-dropdown-menu-separator" }, { kind: "directive", type: i1$1.HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgDataTableColumnHeader, isStandalone: true, selector: "eg-data-table-column-header", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideArrowDown, lucideArrowUp, lucideChevronsUpDown, lucideEyeOff })], ngImport: i0, template: "\n    @if (column().getCanSort()) {\n      <div class=\"flex items-center gap-2\">\n        <button\n          hlmButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [class]=\"_buttonClass()\"\n          type=\"button\"\n          [hlmDropdownMenuTrigger]=\"_menu\"\n        >\n          <span>{{ title() }}</span>\n          @switch (_sorted()) {\n            @case ('desc') {\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n            }\n            @case ('asc') {\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n            }\n            @default {\n              <ng-icon hlm size=\"sm\" name=\"lucideChevronsUpDown\" />\n            }\n          }\n        </button>\n        <ng-template #_menu>\n          <div hlmDropdownMenu>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleSorting(false)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n              Asc\n            </button>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleSorting(true)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n              Desc\n            </button>\n            @if (_canHide()) {\n              <div hlmDropdownMenuSeparator></div>\n              <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleVisibility(false)\">\n                <ng-icon hlm size=\"sm\" name=\"lucideEyeOff\" />\n                Hide\n              </button>\n            }\n          </div>\n        </ng-template>\n      </div>\n    } @else {\n      <div>{{ title() }}</div>\n    }\n  ", isInline: true, dependencies: [{ kind: "component", type: HlmButton, selector: "button[hlmButton], a[hlmButton]", inputs: ["variant", "size", "appearance", "loading", "icon", "iconPosition", "class", "spinnerUserClass", "disabled", "type"] }, { kind: "directive", type: i1$1.HlmDropdownMenu, selector: "[hlmDropdownMenu],hlm-dropdown-menu", inputs: ["sideOffset"] }, { kind: "directive", type: i1$1.HlmDropdownMenuItem, selector: "[hlmDropdownMenuItem],hlm-dropdown-menu-item", inputs: ["disabled", "variant", "inset"] }, { kind: "directive", type: i1$1.HlmDropdownMenuSeparator, selector: "[hlmDropdownMenuSeparator],hlm-dropdown-menu-separator" }, { kind: "directive", type: i1$1.HlmDropdownMenuTrigger, selector: "[hlmDropdownMenuTrigger]", inputs: ["align", "side"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableColumnHeader, decorators: [{
             type: Component,
@@ -666,7 +676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     selector: 'eg-data-table-column-header',
                     imports: [HlmButton, HlmDropdownMenuImports, NgIcon, HlmIcon],
                     providers: [provideIcons({ lucideArrowDown, lucideArrowUp, lucideChevronsUpDown, lucideEyeOff })],
-                    template: "\n    @if (column().getCanSort()) {\n      <div class=\"flex items-center gap-2\">\n        <button\n          hlmButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [class]=\"_buttonClass()\"\n          type=\"button\"\n          [hlmDropdownMenuTrigger]=\"_menu\"\n        >\n          <span>{{ title() }}</span>\n          @switch (_sorted()) {\n            @case ('desc') {\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n            }\n            @case ('asc') {\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n            }\n            @default {\n              <ng-icon hlm size=\"sm\" name=\"lucideChevronsUpDown\" />\n            }\n          }\n        </button>\n        <ng-template #_menu>\n          <div hlmDropdownMenu>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleSorting(false)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n              Asc\n            </button>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleSorting(true)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n              Desc\n            </button>\n            <div hlmDropdownMenuSeparator></div>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleVisibility(false)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideEyeOff\" />\n              Hide\n            </button>\n          </div>\n        </ng-template>\n      </div>\n    } @else {\n      <div>{{ title() }}</div>\n    }\n  ",
+                    template: "\n    @if (column().getCanSort()) {\n      <div class=\"flex items-center gap-2\">\n        <button\n          hlmButton\n          variant=\"ghost\"\n          size=\"sm\"\n          [class]=\"_buttonClass()\"\n          type=\"button\"\n          [hlmDropdownMenuTrigger]=\"_menu\"\n        >\n          <span>{{ title() }}</span>\n          @switch (_sorted()) {\n            @case ('desc') {\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n            }\n            @case ('asc') {\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n            }\n            @default {\n              <ng-icon hlm size=\"sm\" name=\"lucideChevronsUpDown\" />\n            }\n          }\n        </button>\n        <ng-template #_menu>\n          <div hlmDropdownMenu>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleSorting(false)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowUp\" />\n              Asc\n            </button>\n            <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleSorting(true)\">\n              <ng-icon hlm size=\"sm\" name=\"lucideArrowDown\" />\n              Desc\n            </button>\n            @if (_canHide()) {\n              <div hlmDropdownMenuSeparator></div>\n              <button hlmDropdownMenuItem type=\"button\" (click)=\"column().toggleVisibility(false)\">\n                <ng-icon hlm size=\"sm\" name=\"lucideEyeOff\" />\n                Hide\n              </button>\n            }\n          </div>\n        </ng-template>\n      </div>\n    } @else {\n      <div>{{ title() }}</div>\n    }\n  ",
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });

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

@@ -237,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>;
@@ -381,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>;
@@ -395,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egose/shadcn-theme-ng",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Angular shadcn UI theme",
   "author": "Junmin Ahn",
   "bundles": [