@egose/shadcn-theme-ng-tw 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

@@ -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>
@@ -560,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. */
@@ -722,6 +722,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,
@@ -1324,7 +1328,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 */
@@ -1336,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 */ []));
@@ -1374,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>
@@ -1427,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

@@ -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-tw",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Angular shadcn UI theme",
   "author": "Junmin Ahn",
   "bundles": [