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

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

@@ -0,0 +1,1449 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, model, output, signal, linkedSignal, effect, 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';
+import { HlmIcon } from '@egose/shadcn-theme-ng-tw/icon';
+import { HlmInput } from '@egose/shadcn-theme-ng-tw/input';
+import { HlmSpinner } from '@egose/shadcn-theme-ng-tw/spinner';
+import * as i2 from '@egose/shadcn-theme-ng-tw/table';
+import { HlmTableImports } from '@egose/shadcn-theme-ng-tw/table';
+import { HlmToggleGroup, HlmToggleGroupItem } from '@egose/shadcn-theme-ng-tw/toggle-group';
+import { hlm } from '@egose/shadcn-theme-ng-tw/utils';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronsRight, lucideChevronsLeft, lucideChevronRight, lucideChevronLeft, lucideSettings2, lucideLayoutList, lucideLayoutGrid, lucideChevronsUpDown, lucideArrowUp, lucideArrowDown, lucideEyeOff } from '@ng-icons/lucide';
+import * as i1$2 from '@tanstack/angular-table';
+import { createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_includesString, sortFn_alphanumeric, sortFn_text, tableFeatures, rowSortingFeature, rowSelectionFeature, rowPaginationFeature, columnVisibilityFeature, columnFilteringFeature, injectTableContext, createColumnHelper, injectTable, TanStackTable, FlexRender } from '@tanstack/angular-table';
+import * as i1 from '@egose/shadcn-theme-ng-tw/select';
+import { HlmSelectImports } from '@egose/shadcn-theme-ng-tw/select';
+import * as i1$1 from '@egose/shadcn-theme-ng-tw/dropdown-menu';
+import { HlmDropdownMenuImports } from '@egose/shadcn-theme-ng-tw/dropdown-menu';
+import { HlmCheckbox } from '@egose/shadcn-theme-ng-tw/checkbox';
+
+// Explicit instantiations keep the inferred feature-registry type free of `any`
+// (the factories default their generics to `any` when called bare, which would
+// leak into our emitted declarations and trip package validation).
+const filteredRowModel = createFilteredRowModel();
+const paginatedRowModel = createPaginatedRowModel();
+const sortedRowModel = createSortedRowModel();
+const includesString = filterFn_includesString;
+const alphanumeric = sortFn_alphanumeric;
+const text = sortFn_text;
+/**
+ * Default feature set for `EgDataTable`.
+ *
+ * Mirrors the Spartan data-table guide: filtering, visibility, pagination,
+ * selection and sorting are opted in, with the built-in `includesString`
+ * filter and `alphanumeric` / `text` sort functions registered. Anything a
+ * caller does not need can be dropped by passing a custom `features` input.
+ *
+ * Keep this reference stable (module scope) — `injectTable()` re-evaluates
+ * its initializer on every signal read, so recreating features per render
+ * would thrash the table instance.
+ */
+const defaultEgDataTableFeatures = tableFeatures({
+    columnFilteringFeature,
+    columnVisibilityFeature,
+    rowPaginationFeature,
+    rowSelectionFeature,
+    rowSortingFeature,
+    filteredRowModel,
+    paginatedRowModel,
+    sortedRowModel,
+    filterFns: { includesString },
+    sortFns: { alphanumeric, text },
+    columnMeta: {},
+});
+
+class EgDataTablePagination {
+    /** Show the `selected of total` status text. Set false when the host renders its own status. */
+    showStatus = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showStatus" }] : /* istanbul ignore next */ []));
+    /** Show the rows-per-page selector. */
+    showPageSize = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPageSize" }] : /* istanbul ignore next */ []));
+    /** Page-size options. The table's current size is appended when absent. */
+    pageSizes = input([10, 20, 30, 40, 50], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizes" }] : /* istanbul ignore next */ []));
+    /** Navigation-button content: icons only, text labels only, or both. */
+    navMode = input('icons', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navMode" }] : /* istanbul ignore next */ []));
+    /** Density of buttons, trigger, and meta texts. Type scale of buttons is untouched. */
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    _table = injectTableContext();
+    _pageCount = computed(() => this._table().getPageCount(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pageCount" }] : /* istanbul ignore next */ []));
+    // `atoms` are signal-backed, so the pager stays in sync with the table.
+    _pageIndex = computed(() => this._table().atoms.pagination.get().pageIndex, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pageIndex" }] : /* istanbul ignore next */ []));
+    _pageSize = computed(() => this._table().atoms.pagination.get().pageSize, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pageSize" }] : /* istanbul ignore next */ []));
+    _canPrevious = computed(() => this._table().getCanPreviousPage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_canPrevious" }] : /* istanbul ignore next */ []));
+    _canNext = computed(() => this._table().getCanNextPage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_canNext" }] : /* istanbul ignore next */ []));
+    _showPager = computed(() => this._pageCount() > 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showPager" }] : /* istanbul ignore next */ []));
+    /** Icon-only buttons stay square; labeled buttons size to their text. Merged by `hlmButton` via the `class` binding. */
+    _navButtonClass = computed(() => hlm(this.size() === 'sm' ? 'tw:h-7 tw:p-0' : this.size() === 'lg' ? 'tw:h-9 tw:p-0' : 'tw:h-8 tw:p-0', this.navMode() === 'icons'
+        ? this.size() === 'sm'
+            ? 'tw:w-7'
+            : this.size() === 'lg'
+                ? 'tw:w-9'
+                : 'tw:w-8'
+        : 'tw:gap-1 tw:px-2'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_navButtonClass" }] : /* istanbul ignore next */ []));
+    /** First/last buttons stay desktop-only. */
+    _edgeNavButtonClass = computed(() => hlm('tw:hidden tw:lg:flex', this._navButtonClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_edgeNavButtonClass" }] : /* istanbul ignore next */ []));
+    /** Meta-text size per density (status, page indicator, rows-per-page label). */
+    _metaTextClass = computed(() => this.size() === 'sm' ? 'tw:text-xs' : this.size() === 'lg' ? 'tw:text-base' : 'tw:text-sm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_metaTextClass" }] : /* istanbul ignore next */ []));
+    _pageSizeOptions = computed(() => {
+        const sizes = this.pageSizes();
+        const current = this._pageSize();
+        if (sizes.includes(current))
+            return sizes;
+        return [...sizes, current].sort((left, right) => left - right);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_pageSizeOptions" }] : /* istanbul ignore next */ []));
+    _statusText = computed(() => {
+        const table = this._table();
+        const selected = table.getFilteredSelectedRowModel().rows.length;
+        const total = table.getFilteredRowModel().rows.length;
+        if (selected > 0)
+            return `${selected} of ${total} row(s) selected.`;
+        return `${total} row(s).`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_statusText" }] : /* istanbul ignore next */ []));
+    _onPageSizeChange(value) {
+        this._table().setPageSize(Number(value));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTablePagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: EgDataTablePagination, isStandalone: true, selector: "eg-data-table-pagination", inputs: { showStatus: { classPropertyName: "showStatus", publicName: "showStatus", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons({ lucideChevronLeft, lucideChevronRight, lucideChevronsLeft, lucideChevronsRight })], ngImport: i0, template: `
+    <div class="tw:flex tw:flex-wrap tw:items-center tw:justify-between tw:gap-2 tw:px-2">
+      @if (showStatus()) {
+        <div class="tw:text-muted-foreground tw:flex-1 {{ _metaTextClass() }}">{{ _statusText() }}</div>
+      }
+      <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-x-6 tw:gap-y-2 tw:lg:gap-x-8">
+        @if (showPageSize()) {
+          <div class="tw:flex tw:items-center tw:gap-2">
+            <p class="tw:font-medium {{ _metaTextClass() }}">Rows per page</p>
+            <div hlmSelect class="tw:inline-flex" [value]="_pageSize()" (valueChange)="_onPageSizeChange($event)">
+              <hlm-select-trigger class="tw:w-[70px]" [size]="size() === 'sm' ? 'sm' : 'default'">
+                <hlm-select-value />
+              </hlm-select-trigger>
+              <hlm-select-content *hlmSelectPortal>
+                @for (size of _pageSizeOptions(); track size) {
+                  <hlm-select-item [value]="size">{{ size }}</hlm-select-item>
+                }
+              </hlm-select-content>
+            </div>
+          </div>
+        }
+        @if (_showPager()) {
+          <div class="tw:flex tw:w-[100px] tw:items-center tw:justify-center tw:font-medium {{ _metaTextClass() }}">
+            Page {{ _pageIndex() + 1 }} of {{ _pageCount() }}
+          </div>
+          <div class="tw:flex tw:items-center tw:gap-2">
+            <button
+              hlmButton
+              variant="secondary"
+              appearance="outline"
+              size="sm"
+              [class]="_edgeNavButtonClass()"
+              type="button"
+              [disabled]="!_canPrevious()"
+              (click)="_table().setPageIndex(0)"
+              aria-label="Go to first page"
+            >
+              @if (navMode() !== 'text') {
+                <ng-icon hlm size="sm" name="lucideChevronsLeft" />
+              }
+              @if (navMode() !== 'icons') {
+                <span>First</span>
+              }
+            </button>
+            <button
+              hlmButton
+              variant="secondary"
+              appearance="outline"
+              size="sm"
+              [class]="_navButtonClass()"
+              type="button"
+              [disabled]="!_canPrevious()"
+              (click)="_table().previousPage()"
+              aria-label="Go to previous page"
+            >
+              @if (navMode() !== 'text') {
+                <ng-icon hlm size="sm" name="lucideChevronLeft" />
+              }
+              @if (navMode() !== 'icons') {
+                <span>Previous</span>
+              }
+            </button>
+            <button
+              hlmButton
+              variant="secondary"
+              appearance="outline"
+              size="sm"
+              [class]="_navButtonClass()"
+              type="button"
+              [disabled]="!_canNext()"
+              (click)="_table().nextPage()"
+              aria-label="Go to next page"
+            >
+              @if (navMode() !== 'icons') {
+                <span>Next</span>
+              }
+              @if (navMode() !== 'text') {
+                <ng-icon hlm size="sm" name="lucideChevronRight" />
+              }
+            </button>
+            <button
+              hlmButton
+              variant="secondary"
+              appearance="outline"
+              size="sm"
+              [class]="_edgeNavButtonClass()"
+              type="button"
+              [disabled]="!_canNext()"
+              (click)="_table().setPageIndex(_pageCount() - 1)"
+              aria-label="Go to last page"
+            >
+              @if (navMode() !== 'icons') {
+                <span>Last</span>
+              }
+              @if (navMode() !== 'text') {
+                <ng-icon hlm size="sm" name="lucideChevronsRight" />
+              }
+            </button>
+          </div>
+        }
+      </div>
+    </div>
+  `, 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: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }, { kind: "directive", type: i1.HlmSelect, selector: "[hlmSelect],hlm-select" }, { kind: "component", type: i1.HlmSelectContent, selector: "hlm-select-content", inputs: ["showScroll"] }, { kind: "component", type: i1.HlmSelectItem, selector: "hlm-select-item" }, { kind: "directive", type: i1.HlmSelectPortal, selector: "[hlmSelectPortal]" }, { kind: "component", type: i1.HlmSelectTrigger, selector: "hlm-select-trigger", inputs: ["class", "buttonId", "ariaDescribedby", "wrapperDisabled", "size", "forceInvalid"] }, { kind: "directive", type: i1.HlmSelectValue, selector: "[hlmSelectValue],hlm-select-value" }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTablePagination, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eg-data-table-pagination',
+                    imports: [HlmButton, HlmIcon, HlmSelectImports, NgIcon],
+                    providers: [provideIcons({ lucideChevronLeft, lucideChevronRight, lucideChevronsLeft, lucideChevronsRight })],
+                    template: `
+    <div class="tw:flex tw:flex-wrap tw:items-center tw:justify-between tw:gap-2 tw:px-2">
+      @if (showStatus()) {
+        <div class="tw:text-muted-foreground tw:flex-1 {{ _metaTextClass() }}">{{ _statusText() }}</div>
+      }
+      <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-x-6 tw:gap-y-2 tw:lg:gap-x-8">
+        @if (showPageSize()) {
+          <div class="tw:flex tw:items-center tw:gap-2">
+            <p class="tw:font-medium {{ _metaTextClass() }}">Rows per page</p>
+            <div hlmSelect class="tw:inline-flex" [value]="_pageSize()" (valueChange)="_onPageSizeChange($event)">
+              <hlm-select-trigger class="tw:w-[70px]" [size]="size() === 'sm' ? 'sm' : 'default'">
+                <hlm-select-value />
+              </hlm-select-trigger>
+              <hlm-select-content *hlmSelectPortal>
+                @for (size of _pageSizeOptions(); track size) {
+                  <hlm-select-item [value]="size">{{ size }}</hlm-select-item>
+                }
+              </hlm-select-content>
+            </div>
+          </div>
+        }
+        @if (_showPager()) {
+          <div class="tw:flex tw:w-[100px] tw:items-center tw:justify-center tw:font-medium {{ _metaTextClass() }}">
+            Page {{ _pageIndex() + 1 }} of {{ _pageCount() }}
+          </div>
+          <div class="tw:flex tw:items-center tw:gap-2">
+            <button
+              hlmButton
+              variant="secondary"
+              appearance="outline"
+              size="sm"
+              [class]="_edgeNavButtonClass()"
+              type="button"
+              [disabled]="!_canPrevious()"
+              (click)="_table().setPageIndex(0)"
+              aria-label="Go to first page"
+            >
+              @if (navMode() !== 'text') {
+                <ng-icon hlm size="sm" name="lucideChevronsLeft" />
+              }
+              @if (navMode() !== 'icons') {
+                <span>First</span>
+              }
+            </button>
+            <button
+              hlmButton
+              variant="secondary"
+              appearance="outline"
+              size="sm"
+              [class]="_navButtonClass()"
+              type="button"
+              [disabled]="!_canPrevious()"
+              (click)="_table().previousPage()"
+              aria-label="Go to previous page"
+            >
+              @if (navMode() !== 'text') {
+                <ng-icon hlm size="sm" name="lucideChevronLeft" />
+              }
+              @if (navMode() !== 'icons') {
+                <span>Previous</span>
+              }
+            </button>
+            <button
+              hlmButton
+              variant="secondary"
+              appearance="outline"
+              size="sm"
+              [class]="_navButtonClass()"
+              type="button"
+              [disabled]="!_canNext()"
+              (click)="_table().nextPage()"
+              aria-label="Go to next page"
+            >
+              @if (navMode() !== 'icons') {
+                <span>Next</span>
+              }
+              @if (navMode() !== 'text') {
+                <ng-icon hlm size="sm" name="lucideChevronRight" />
+              }
+            </button>
+            <button
+              hlmButton
+              variant="secondary"
+              appearance="outline"
+              size="sm"
+              [class]="_edgeNavButtonClass()"
+              type="button"
+              [disabled]="!_canNext()"
+              (click)="_table().setPageIndex(_pageCount() - 1)"
+              aria-label="Go to last page"
+            >
+              @if (navMode() !== 'icons') {
+                <span>Last</span>
+              }
+              @if (navMode() !== 'text') {
+                <ng-icon hlm size="sm" name="lucideChevronsRight" />
+              }
+            </button>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { showStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStatus", 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Column-visibility toggle.
+ *
+ * Reads the table from the nearest `[tanStackTable]` directive — no table
+ * input or generics needed. Only columns with an `accessorFn` that can hide
+ * are listed (display columns like `select` / `actions` stay fixed).
+ */
+class EgDataTableViewOptions {
+    /** Density of the toggle button. */
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    _table = injectTableContext();
+    /** Height per density; hidden below `lg` like the pager edge buttons. Merged by `hlmButton`. */
+    _buttonClass = computed(() => hlm('tw:ml-auto tw:hidden tw:lg:flex', this.size() === 'sm' ? 'tw:h-7' : this.size() === 'lg' ? 'tw:h-9' : 'tw:h-8'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_buttonClass" }] : /* istanbul ignore next */ []));
+    _hidableColumns = computed(() => this._table()
+        .getAllColumns()
+        .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: `
+    <button
+      hlmButton
+      variant="secondary"
+      appearance="outline"
+      size="sm"
+      [class]="_buttonClass()"
+      type="button"
+      [hlmDropdownMenuTrigger]="_menu"
+    >
+      <ng-icon hlm name="lucideSettings2" />
+      View
+    </button>
+    <ng-template #_menu>
+      <div hlmDropdownMenu class="tw:w-[150px]">
+        <div hlmDropdownMenuLabel>Toggle columns</div>
+        <div hlmDropdownMenuSeparator></div>
+        @for (column of _hidableColumns(); track column.id) {
+          <button
+            hlmDropdownMenuCheckbox
+            class="tw:capitalize"
+            [checked]="column.getIsVisible()"
+            (triggered)="column.toggleVisibility()"
+          >
+            <hlm-dropdown-menu-checkbox-indicator />
+            {{ column.id }}
+          </button>
+        }
+      </div>
+    </ng-template>
+  `, 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,
+            args: [{
+                    selector: 'eg-data-table-view-options',
+                    imports: [HlmButton, HlmDropdownMenuImports, NgIcon, HlmIcon],
+                    providers: [provideIcons({ lucideSettings2 })],
+                    template: `
+    <button
+      hlmButton
+      variant="secondary"
+      appearance="outline"
+      size="sm"
+      [class]="_buttonClass()"
+      type="button"
+      [hlmDropdownMenuTrigger]="_menu"
+    >
+      <ng-icon hlm name="lucideSettings2" />
+      View
+    </button>
+    <ng-template #_menu>
+      <div hlmDropdownMenu class="tw:w-[150px]">
+        <div hlmDropdownMenuLabel>Toggle columns</div>
+        <div hlmDropdownMenuSeparator></div>
+        @for (column of _hidableColumns(); track column.id) {
+          <button
+            hlmDropdownMenuCheckbox
+            class="tw:capitalize"
+            [checked]="column.getIsVisible()"
+            (triggered)="column.toggleVisibility()"
+          >
+            <hlm-dropdown-menu-checkbox-indicator />
+            {{ column.id }}
+          </button>
+        }
+      </div>
+    </ng-template>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Header selection checkbox: toggles all page rows.
+ *
+ * Generic over `TData` so the same component works with any table; the table
+ * instance is passed explicitly (no DI needed inside column definitions).
+ * `HlmCheckbox.checked` accepts `'indeterminate'`, so the tri-state is derived
+ * via `computed` instead of a separate input.
+ */
+class EgTableHeadSelection {
+    table = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Select all', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    _checked = computed(() => {
+        const table = this.table();
+        if (table.getIsAllPageRowsSelected())
+            return true;
+        if (table.getIsSomePageRowsSelected())
+            return 'indeterminate';
+        return false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_checked" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgTableHeadSelection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: EgTableHeadSelection, isStandalone: true, selector: "eg-table-head-selection", inputs: { table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "tw:flex" }, ngImport: i0, template: ` <hlm-checkbox [checked]="_checked()" (changed)="table().toggleAllPageRowsSelected($event)" /> `, isInline: true, dependencies: [{ kind: "component", type: HlmCheckbox, selector: "hlm-checkbox", inputs: ["class", "id", "aria-label", "aria-labelledby", "aria-describedby", "checked", "name", "required", "disabled", "wrapperDisabled"], outputs: ["checkedChange", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgTableHeadSelection, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eg-table-head-selection',
+                    imports: [HlmCheckbox],
+                    host: { class: 'tw:flex', '[attr.aria-label]': 'ariaLabel()' },
+                    template: ` <hlm-checkbox [checked]="_checked()" (changed)="table().toggleAllPageRowsSelected($event)" /> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+/**
+ * Row selection checkbox: toggles a single row.
+ */
+class EgTableRowSelection {
+    row = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Select row', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgTableRowSelection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: EgTableRowSelection, isStandalone: true, selector: "eg-table-row-selection", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "tw:flex" }, ngImport: i0, template: ` <hlm-checkbox [checked]="row().getIsSelected()" (changed)="row().toggleSelected($event)" /> `, isInline: true, dependencies: [{ kind: "component", type: HlmCheckbox, selector: "hlm-checkbox", inputs: ["class", "id", "aria-label", "aria-labelledby", "aria-describedby", "checked", "name", "required", "disabled", "wrapperDisabled"], outputs: ["checkedChange", "changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgTableRowSelection, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eg-table-row-selection',
+                    imports: [HlmCheckbox],
+                    host: { class: 'tw:flex', '[attr.aria-label]': 'ariaLabel()' },
+                    template: ` <hlm-checkbox [checked]="row().getIsSelected()" (changed)="row().toggleSelected($event)" /> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generic data table with TanStack-powered sorting, filtering, pagination,
+ * selection, column visibility, plus a React-parity grid layout.
+ *
+ * The caller passes `columns` (and optionally `gridColumns`) — everything else
+ * is owned internally with change notifications via outputs:
+ *
+ * - Client mode: pass `data` as an array. Pagination/sorting/filtering run in-browser.
+ *   `filterRows` can pre-filter the array before the built-in pipeline.
+ * - Server mode: pass `data` as a page slice (`{items,total,limit,offset,hasPrevious,hasNext}`)
+ *   with `manualPagination` set. The slice renders as-is — sorting/filtering
+ *   are not applied client-side. Page, sort and filter interactions emit
+ *   `pageChange` / `pageSizeChange` / `sortingChange` / `filterChange`
+ *   (`columnFiltersChange`) so the caller can fetch the next slice.
+ * - Selection: set `enableSelection` to auto-prepend a checkbox column;
+ *   selected rows are emitted via `selectionChange` (array of `TData`).
+ * - Grid mode: pass `gridColumns` to enable the layout toggle. Columns with
+ *   `meta: { hideInTable: true }` are table-hidden; `meta: { thumbnail: true }`
+ *   renders as the card banner.
+ */
+class EgDataTable {
+    /** Column definitions for table layout (required). */
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Column definitions for grid layout; falls back to `columns` when omitted. */
+    gridColumns = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "gridColumns" }] : /* istanbul ignore next */ []));
+    /** Client rows, or a server page slice when `manualPagination` is set (`null` while loading). */
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* 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 */ []));
+    /** TanStack feature registry. Defaults to filtering + visibility + pagination + selection + sorting. */
+    features = input(defaultEgDataTableFeatures, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "features" }] : /* istanbul ignore next */ []));
+    isLoading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('No results found.', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    /** When true, a checkbox column is auto-prepended and `selectionChange` emits the selected rows. */
+    enableSelection = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enableSelection" }] : /* istanbul ignore next */ []));
+    hideFooter = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideFooter" }] : /* istanbul ignore next */ []));
+    /** Density of toolbar, table, and pagination chrome. Type scale is untouched. */
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Presentation mode. Two-way bindable: `[(layout)]`. Grid requires `gridColumns`. */
+    layout = model('table', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    /** Show the table/grid toggle (only rendered when `gridColumns` is set). */
+    showLayoutToggle = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLayoutToggle" }] : /* istanbul ignore next */ []));
+    /** Show the toolbar (filter input, plus the column-visibility dropdown when `showColumnToggle` is set). */
+    showToolbar = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showToolbar" }] : /* istanbul ignore next */ []));
+    /** 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). */
+    filterColumnId = input('', /* @ts-ignore */
+    ...(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. */
+    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. */
+    toolbarActions = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbarActions" }] : /* istanbul ignore next */ []));
+    /** Default client-side page size. Changing it later resets the pager to the new size. */
+    defaultPageSize = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultPageSize" }] : /* istanbul ignore next */ []));
+    /** Caller-provided frontend filter: receives all client rows, returns the kept rows. Runs before built-in filtering/sorting/pagination; ignored in server mode. Must be pure. */
+    filterRows = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterRows" }] : /* istanbul ignore next */ []));
+    /** Seeds the sorting state once at creation. Later changes are ignored — use `sortingChange` to stay in sync. */
+    initialSorting = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialSorting" }] : /* istanbul ignore next */ []));
+    /** Seeds the column-filter state once at creation. Later changes are ignored. */
+    initialColumnFilters = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialColumnFilters" }] : /* istanbul ignore next */ []));
+    /** 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. */
+    initialRowSelection = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialRowSelection" }] : /* istanbul ignore next */ []));
+    /** Show the rows-per-page selector in the footer pager. */
+    showPageSize = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPageSize" }] : /* istanbul ignore next */ []));
+    /** Page-size options for the footer selector. The current size is appended when absent. */
+    pageSizes = input([10, 20, 30, 40, 50], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizes" }] : /* istanbul ignore next */ []));
+    /** Footer navigation-button content: icons only, text labels only, or both. */
+    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`). */
+    selectionChange = output();
+    /** Emits the target page index on pager navigation (primary hook for server fetching). */
+    pageChange = output();
+    pageSizeChange = output();
+    /** Emits the row's data when a row (table) or card (grid) is clicked. Clicks from nested interactive elements (buttons, links, inputs, checkboxes, selects) are ignored. */
+    rowClick = output();
+    sortingChange = output();
+    columnFiltersChange = output();
+    /** Emits the toolbar filter string whenever it changes. Empty when cleared or unset. */
+    filterChange = output();
+    columnVisibilityChange = output();
+    _containerClass = computed(() => hlm('tw:space-y-2', this.userClass()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_containerClass" }] : /* istanbul ignore next */ []));
+    /** Inline TH sort-button footprint per density. Merged by `hlmButton` via the `class` binding. */
+    _sortButtonClass = computed(() => hlm('tw:p-0', this.size() === 'sm' ? 'tw:h-5 tw:w-5' : this.size() === 'lg' ? 'tw:h-7 tw:w-7' : 'tw:h-6 tw:w-6'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_sortButtonClass" }] : /* istanbul ignore next */ []));
+    _sorting = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_sorting" }] : /* istanbul ignore next */ []));
+    _columnFilters = signal([], /* @ts-ignore */
+    ...(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
+    // pager-driven `set()` writes below are preserved until it changes again.
+    _clientPageSize = linkedSignal(() => this.defaultPageSize(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_clientPageSize" }] : /* istanbul ignore next */ []));
+    _isServer = computed(() => this.manualPagination(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isServer" }] : /* istanbul ignore next */ []));
+    /** The server page slice when in server mode; `null` for client data, misuse shapes, or `null` while loading. */
+    _page = computed(() => {
+        if (!this._isServer())
+            return null;
+        const data = this.data();
+        if (data !== null && typeof data === 'object' && 'items' in data) {
+            return data;
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_page" }] : /* istanbul ignore next */ []));
+    _items = computed(() => {
+        const page = this._page();
+        if (page)
+            return page.items;
+        const data = this.data();
+        const rows = Array.isArray(data)
+            ? data
+            : (data?.items ?? []);
+        const filter = this.filterRows();
+        return filter ? filter(rows) : rows;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    _serverPageCount = computed(() => {
+        const paginated = this._page();
+        if (!paginated || paginated.limit <= 0)
+            return 1;
+        return Math.max(1, Math.ceil(paginated.total / paginated.limit));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_serverPageCount" }] : /* istanbul ignore next */ []));
+    _serverPageIndex = computed(() => {
+        const paginated = this._page();
+        if (!paginated || paginated.limit <= 0)
+            return 0;
+        return Math.floor(paginated.offset / paginated.limit);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_serverPageIndex" }] : /* istanbul ignore next */ []));
+    _paginationState = computed(() => {
+        const paginated = this._page();
+        if (paginated)
+            return { pageIndex: this._serverPageIndex(), pageSize: paginated.limit };
+        return { pageIndex: this._clientPageIndex(), pageSize: this._clientPageSize() };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_paginationState" }] : /* istanbul ignore next */ []));
+    _selectionHelper = computed(() => createColumnHelper(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_selectionHelper" }] : /* istanbul ignore next */ []));
+    /** Caller columns + auto-injected selection column + layout filtering. */
+    _finalColumns = computed(() => {
+        const isGrid = this._effectiveLayout() === 'grid';
+        const base = isGrid ? (this.gridColumns() ?? this.columns()) : this.columns();
+        const visible = isGrid ? base : base.filter((column) => column.meta?.hideInTable !== true);
+        if (!this.enableSelection())
+            return [...visible];
+        const helper = this._selectionHelper();
+        const selectionColumn = helper.display({
+            id: 'select',
+            header: () => EgTableHeadSelection,
+            cell: () => EgTableRowSelection,
+            enableSorting: false,
+            enableHiding: false,
+        });
+        return [selectionColumn, ...visible];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_finalColumns" }] : /* istanbul ignore next */ []));
+    _table = injectTable(() => {
+        const server = this._isServer();
+        return {
+            features: this.features(),
+            columns: this._finalColumns(),
+            data: [...this._items()],
+            manualPagination: server,
+            manualSorting: server,
+            manualFiltering: server,
+            ...(server ? { pageCount: this._serverPageCount() } : {}),
+            state: {
+                sorting: this._sorting(),
+                columnFilters: this._columnFilters(),
+                columnVisibility: this._columnVisibility(),
+                rowSelection: this._rowSelection(),
+                pagination: this._paginationState(),
+            },
+            onSortingChange: (updater) => {
+                const next = typeof updater === 'function' ? updater(this._sorting()) : updater;
+                this._sorting.set(next);
+                this.sortingChange.emit(next);
+            },
+            onColumnFiltersChange: (updater) => {
+                const next = typeof updater === 'function' ? updater(this._columnFilters()) : updater;
+                this._columnFilters.set(next);
+                this.columnFiltersChange.emit(next);
+                const filterId = this.filterColumnId();
+                if (filterId) {
+                    const value = next.find((filter) => filter.id === filterId)?.value;
+                    this.filterChange.emit(typeof value === 'string' ? value : '');
+                }
+            },
+            onColumnVisibilityChange: (updater) => {
+                const next = typeof updater === 'function' ? updater(this._columnVisibility()) : updater;
+                this._columnVisibility.set(next);
+                this.columnVisibilityChange.emit(next);
+            },
+            onRowSelectionChange: (updater) => {
+                const next = typeof updater === 'function' ? updater(this._rowSelection()) : updater;
+                this._rowSelection.set(next);
+            },
+            onPaginationChange: (updater) => {
+                const current = this._paginationState();
+                const next = typeof updater === 'function' ? updater(current) : updater;
+                if (next.pageIndex !== current.pageIndex)
+                    this.pageChange.emit(next.pageIndex);
+                if (next.pageSize !== current.pageSize)
+                    this.pageSizeChange.emit(next.pageSize);
+                if (!this._isServer()) {
+                    this._clientPageIndex.set(next.pageIndex);
+                    this._clientPageSize.set(next.pageSize);
+                }
+            },
+        };
+    });
+    _emitSelection = effect(() => {
+        this._rowSelection();
+        const selected = this._table.getSelectedRowModel().rows.map((row) => row.original);
+        this.selectionChange.emit(selected);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_emitSelection" }] : /* istanbul ignore next */ []));
+    /**
+     * Seeds internal state from the `initial*` inputs. Runs in `ngOnInit` (after
+     * first bindings, before first render) exactly once, so inline-literal
+     * bindings (new references every change detection) cannot clobber user
+     * interaction afterwards. Values are copied to avoid aliasing caller data.
+     */
+    ngOnInit() {
+        this._sorting.set([...this.initialSorting()]);
+        this._columnFilters.set([...this.initialColumnFilters()]);
+        this._columnVisibility.set({ ...this.initialColumnVisibility() });
+        this._rowSelection.set({ ...this.initialRowSelection() });
+    }
+    _hasGrid = computed(() => this.gridColumns() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasGrid" }] : /* istanbul ignore next */ []));
+    _effectiveLayout = computed(() => this.layout() === 'grid' && this._hasGrid() ? 'grid' : 'table', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_effectiveLayout" }] : /* istanbul ignore next */ []));
+    _showLayoutToggle = computed(() => this.showLayoutToggle() && this._hasGrid(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showLayoutToggle" }] : /* istanbul ignore next */ []));
+    _visibleColumnCount = computed(() => {
+        const count = this._table.getVisibleLeafColumns().length;
+        return count > 0 ? count : 1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_visibleColumnCount" }] : /* istanbul ignore next */ []));
+    _statusText = computed(() => {
+        const paginated = this._page();
+        const table = this._table;
+        const selected = table.getFilteredSelectedRowModel().rows.length;
+        if (this.enableSelection() && selected > 0) {
+            const total = paginated ? paginated.total : table.getFilteredRowModel().rows.length;
+            return `${selected} of ${total} row(s) selected`;
+        }
+        if (paginated) {
+            const from = paginated.items.length === 0 ? 0 : paginated.offset + 1;
+            const to = paginated.offset + paginated.items.length;
+            return `Showing ${from} to ${to} of ${paginated.total} records`;
+        }
+        const total = table.getFilteredRowModel().rows.length;
+        return `${total} row(s).`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_statusText" }] : /* istanbul ignore next */ []));
+    _onLayoutToggle(value) {
+        if (value === 'table' || value === 'grid')
+            this.layout.set(value);
+    }
+    _onFilterInput(event) {
+        const value = event.target.value;
+        const id = this.filterColumnId();
+        if (!id) {
+            this.filterChange.emit(value);
+            return;
+        }
+        this._table.getColumn(id)?.setFilterValue(value);
+    }
+    /**
+     * Row/card click handler. Ignores clicks originating from nested interactive
+     * elements (selection checkboxes, action buttons, links, inputs) so those
+     * controls keep working without also firing `rowClick`.
+     */
+    _onRowClick(event, row) {
+        const target = event.target;
+        if (target instanceof Element && target.closest('button, a, input, select, textarea, [role="checkbox"]')) {
+            return;
+        }
+        this.rowClick.emit(row.original);
+    }
+    /** Show the inline TH sort button only for sortable plain-string headers (component headers own their UI). */
+    _showHeaderSortButton(header) {
+        return header.column.getCanSort() && typeof header.column.columnDef.header === 'string';
+    }
+    _toggleHeaderSorting(header) {
+        header.column.toggleSorting(header.column.getIsSorted() === 'asc');
+    }
+    _selectionCell(row) {
+        return row.getVisibleCells().find((cell) => cell.column.id === 'select');
+    }
+    _thumbnailCell(row) {
+        return row.getVisibleCells().find((cell) => cell.column.columnDef.meta?.thumbnail === true);
+    }
+    _contentCells(row) {
+        return row
+            .getVisibleCells()
+            .filter((cell) => cell.column.id !== 'select' && cell.column.columnDef.meta?.thumbnail !== true);
+    }
+    _cellLabel(cell) {
+        const header = cell.column.columnDef.header;
+        if (typeof header === 'string')
+            return header;
+        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: [
+            provideIcons({ lucideArrowDown, lucideArrowUp, lucideChevronsUpDown, lucideLayoutGrid, lucideLayoutList }),
+        ], ngImport: i0, template: `
+    <div [class]="_containerClass()">
+      @if (_showLayoutToggle()) {
+        <div class="tw:flex tw:items-center tw:justify-between">
+          <div hlmToggleGroup type="single" [value]="_effectiveLayout()" (valueChange)="_onLayoutToggle($event)">
+            <button hlmToggleGroupItem value="table" aria-label="Table view">
+              <ng-icon hlm name="lucideLayoutList" />
+            </button>
+            <button hlmToggleGroupItem value="grid" aria-label="Grid view">
+              <ng-icon hlm name="lucideLayoutGrid" />
+            </button>
+          </div>
+          <div></div>
+        </div>
+      }
+
+      @if (showToolbar() || toolbarActions()) {
+        <div class="tw:flex tw:flex-wrap tw:items-center tw:justify-between tw:gap-2 tw:py-1" [tanStackTable]="_table">
+          @if (showToolbar()) {
+            <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-2">
+              <input
+                hlmInput
+                class="tw:w-full tw:min-w-0 tw:md:w-80"
+                [size]="size()"
+                [placeholder]="filterPlaceholder()"
+                (input)="_onFilterInput($event)"
+              />
+              @if (showColumnToggle()) {
+                <eg-data-table-view-options [size]="size()" />
+              }
+            </div>
+          }
+          @if (toolbarActions()) {
+            <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-2">
+              <ng-container *ngTemplateOutlet="toolbarActions()" />
+            </div>
+          }
+        </div>
+      }
+
+      @if (_effectiveLayout() === 'grid') {
+        <ng-container *ngTemplateOutlet="_gridView" />
+      } @else {
+        <ng-container *ngTemplateOutlet="_tableView" />
+      }
+
+      <ng-template #_tableView>
+        <div class="tw:overflow-hidden tw:rounded-md tw:border">
+          <div hlmTableContainer>
+            <table hlmTable>
+              <thead hlmTHead>
+                @for (headerGroup of _table.getHeaderGroups(); track headerGroup.id) {
+                  <tr hlmTr>
+                    @for (header of headerGroup.headers; track header.id) {
+                      <th hlmTh [size]="size()" [attr.colSpan]="header.colSpan">
+                        @if (!header.isPlaceholder) {
+                          <div class="tw:flex tw:items-center tw:gap-1">
+                            <ng-container
+                              *flexRender="header.column.columnDef.header; props: header.getContext(); let headerText"
+                            >
+                              <div [innerHTML]="headerText"></div>
+                            </ng-container>
+                            @if (_showHeaderSortButton(header)) {
+                              <button
+                                hlmButton
+                                variant="ghost"
+                                size="sm"
+                                [class]="_sortButtonClass()"
+                                type="button"
+                                [attr.aria-label]="'Sort by ' + header.column.id"
+                                (click)="_toggleHeaderSorting(header)"
+                              >
+                                @switch (header.column.getIsSorted()) {
+                                  @case ('asc') {
+                                    <ng-icon hlm size="sm" name="lucideArrowUp" />
+                                  }
+                                  @case ('desc') {
+                                    <ng-icon hlm size="sm" name="lucideArrowDown" />
+                                  }
+                                  @default {
+                                    <ng-icon hlm size="sm" name="lucideChevronsUpDown" />
+                                  }
+                                }
+                              </button>
+                            }
+                          </div>
+                        }
+                      </th>
+                    }
+                  </tr>
+                }
+              </thead>
+              <tbody hlmTBody>
+                @if (isLoading()) {
+                  <tr hlmTr>
+                    <td hlmTd [attr.colspan]="_visibleColumnCount()" class="tw:h-24 tw:text-center">
+                      <hlm-spinner class="tw:inline-flex" />
+                    </td>
+                  </tr>
+                } @else if (_table.getRowModel().rows.length === 0) {
+                  <tr hlmTr>
+                    <td hlmTd [attr.colspan]="_visibleColumnCount()" class="tw:h-24 tw:text-center">
+                      {{ emptyMessage() }}
+                    </td>
+                  </tr>
+                } @else {
+                  @for (row of _table.getRowModel().rows; track row.id) {
+                    <tr
+                      hlmTr
+                      [attr.data-state]="row.getIsSelected() ? 'selected' : null"
+                      (click)="_onRowClick($event, row)"
+                    >
+                      @for (cell of row.getVisibleCells(); track cell.id) {
+                        <td hlmTd [size]="size()">
+                          <ng-container
+                            *flexRender="cell.column.columnDef.cell; props: cell.getContext(); let cellText"
+                          >
+                            <div [innerHTML]="cellText"></div>
+                          </ng-container>
+                        </td>
+                      }
+                    </tr>
+                  }
+                }
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </ng-template>
+
+      <ng-template #_gridView>
+        @if (isLoading()) {
+          <div
+            class="tw:flex tw:h-64 tw:items-center tw:justify-center tw:rounded-lg tw:border tw:border-dashed"
+            role="status"
+          >
+            <hlm-spinner />
+          </div>
+        } @else if (_table.getRowModel().rows.length === 0) {
+          <div
+            class="tw:text-muted-foreground tw:flex tw:h-64 tw:items-center tw:justify-center tw:rounded-lg tw:border tw:border-dashed"
+          >
+            {{ emptyMessage() }}
+          </div>
+        } @else {
+          <div class="tw:grid tw:grid-cols-1 tw:gap-4 tw:md:grid-cols-2 tw:xl:grid-cols-3 tw:2xl:grid-cols-4">
+            @for (row of _table.getRowModel().rows; track row.id) {
+              <div
+                hlmCard
+                class="tw:group tw:relative tw:transition-all tw:hover:shadow-md tw:data-[state=selected]:border-primary tw:data-[state=selected]:ring-1 tw:data-[state=selected]:ring-primary/20"
+                [attr.data-state]="row.getIsSelected() ? 'selected' : null"
+                (click)="_onRowClick($event, row)"
+              >
+                @if (_thumbnailCell(row); as thumbnail) {
+                  <div class="tw:border-b tw:bg-muted/30">
+                    <ng-container
+                      *flexRender="thumbnail.column.columnDef.cell; props: thumbnail.getContext(); let thumbHtml"
+                    >
+                      <div [innerHTML]="thumbHtml"></div>
+                    </ng-container>
+                  </div>
+                }
+                @if (_selectionCell(row); as selection) {
+                  <div class="tw:absolute tw:top-4 tw:right-4">
+                    <ng-container
+                      *flexRender="selection.column.columnDef.cell; props: selection.getContext(); let selectHtml"
+                    >
+                      <div [innerHTML]="selectHtml"></div>
+                    </ng-container>
+                  </div>
+                }
+                <div hlmCardContent class="tw:space-y-3">
+                  @for (cell of _contentCells(row); track cell.id) {
+                    <div class="tw:flex tw:flex-col">
+                      <dt
+                        class="tw:text-[10px] tw:font-bold tw:tracking-wider tw:uppercase tw:text-muted-foreground/80"
+                      >
+                        {{ _cellLabel(cell) }}
+                      </dt>
+                      <dd class="tw:mt-0.5 tw:text-sm tw:leading-none tw:font-medium">
+                        <ng-container *flexRender="cell.column.columnDef.cell; props: cell.getContext(); let valueHtml">
+                          <div [innerHTML]="valueHtml"></div>
+                        </ng-container>
+                      </dd>
+                    </div>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+        }
+      </ng-template>
+
+      @if (!hideFooter()) {
+        <div
+          class="tw:flex tw:flex-col tw:gap-2 tw:px-2 tw:py-4 tw:sm:flex-row tw:sm:items-center tw:sm:justify-between"
+          [tanStackTable]="_table"
+        >
+          <div class="tw:text-muted-foreground tw:flex-1 tw:text-sm">{{ _statusText() }}</div>
+          <eg-data-table-pagination
+            [showStatus]="false"
+            [showPageSize]="showPageSize()"
+            [pageSizes]="pageSizes()"
+            [navMode]="navMode()"
+            [size]="size()"
+          />
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$2.FlexRenderDirective, selector: "ng-template[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "directive", type: TanStackTable, selector: "[tanStackTable]", inputs: ["tanStackTable"], exportAs: ["table"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.HlmTableContainer, selector: "div[hlmTableContainer]" }, { kind: "directive", type: i2.HlmTable, selector: "table[hlmTable]" }, { kind: "directive", type: i2.HlmTBody, selector: "tbody[hlmTBody],tbody[hlmTableBody]" }, { kind: "directive", type: i2.HlmTd, selector: "td[hlmTd],td[hlmTableCell]", inputs: ["size"] }, { kind: "directive", type: i2.HlmTh, selector: "th[hlmTh],th[hlmTableHead]", inputs: ["size"] }, { kind: "directive", type: i2.HlmTHead, selector: "thead[hlmTHead],thead[hlmTableHeader]" }, { kind: "directive", type: i2.HlmTr, selector: "tr[hlmTr],tr[hlmTableRow]" }, { kind: "component", type: HlmButton, selector: "button[hlmButton], a[hlmButton]", inputs: ["variant", "size", "appearance", "loading", "icon", "iconPosition", "class", "spinnerUserClass", "disabled", "type"] }, { kind: "directive", type: HlmCard, selector: "[hlmCard],hlm-card", inputs: ["size"] }, { kind: "directive", type: HlmCardContent, selector: "[hlmCardContent]" }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }, { kind: "directive", type: HlmInput, selector: "[hlmInput]", inputs: ["ariaDescribedby", "size"] }, { kind: "component", type: HlmSpinner, selector: "hlm-spinner", inputs: ["size", "show", "class", "spinnerClass"] }, { kind: "directive", type: HlmToggleGroup, selector: "[hlmToggleGroup],hlm-toggle-group", inputs: ["variant", "size", "spacing", "orientation"] }, { kind: "directive", type: HlmToggleGroupItem, selector: "button[hlmToggleGroupItem]", inputs: ["variant", "size"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: EgDataTablePagination, selector: "eg-data-table-pagination", inputs: ["showStatus", "showPageSize", "pageSizes", "navMode", "size"] }, { kind: "component", type: EgDataTableViewOptions, selector: "eg-data-table-view-options", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTable, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'eg-data-table',
+                    imports: [
+                        FlexRender,
+                        TanStackTable,
+                        NgTemplateOutlet,
+                        HlmTableImports,
+                        HlmButton,
+                        HlmCard,
+                        HlmCardContent,
+                        HlmIcon,
+                        HlmInput,
+                        HlmSpinner,
+                        HlmToggleGroup,
+                        HlmToggleGroupItem,
+                        NgIcon,
+                        EgDataTablePagination,
+                        EgDataTableViewOptions,
+                    ],
+                    providers: [
+                        provideIcons({ lucideArrowDown, lucideArrowUp, lucideChevronsUpDown, lucideLayoutGrid, lucideLayoutList }),
+                    ],
+                    template: `
+    <div [class]="_containerClass()">
+      @if (_showLayoutToggle()) {
+        <div class="tw:flex tw:items-center tw:justify-between">
+          <div hlmToggleGroup type="single" [value]="_effectiveLayout()" (valueChange)="_onLayoutToggle($event)">
+            <button hlmToggleGroupItem value="table" aria-label="Table view">
+              <ng-icon hlm name="lucideLayoutList" />
+            </button>
+            <button hlmToggleGroupItem value="grid" aria-label="Grid view">
+              <ng-icon hlm name="lucideLayoutGrid" />
+            </button>
+          </div>
+          <div></div>
+        </div>
+      }
+
+      @if (showToolbar() || toolbarActions()) {
+        <div class="tw:flex tw:flex-wrap tw:items-center tw:justify-between tw:gap-2 tw:py-1" [tanStackTable]="_table">
+          @if (showToolbar()) {
+            <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-2">
+              <input
+                hlmInput
+                class="tw:w-full tw:min-w-0 tw:md:w-80"
+                [size]="size()"
+                [placeholder]="filterPlaceholder()"
+                (input)="_onFilterInput($event)"
+              />
+              @if (showColumnToggle()) {
+                <eg-data-table-view-options [size]="size()" />
+              }
+            </div>
+          }
+          @if (toolbarActions()) {
+            <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-2">
+              <ng-container *ngTemplateOutlet="toolbarActions()" />
+            </div>
+          }
+        </div>
+      }
+
+      @if (_effectiveLayout() === 'grid') {
+        <ng-container *ngTemplateOutlet="_gridView" />
+      } @else {
+        <ng-container *ngTemplateOutlet="_tableView" />
+      }
+
+      <ng-template #_tableView>
+        <div class="tw:overflow-hidden tw:rounded-md tw:border">
+          <div hlmTableContainer>
+            <table hlmTable>
+              <thead hlmTHead>
+                @for (headerGroup of _table.getHeaderGroups(); track headerGroup.id) {
+                  <tr hlmTr>
+                    @for (header of headerGroup.headers; track header.id) {
+                      <th hlmTh [size]="size()" [attr.colSpan]="header.colSpan">
+                        @if (!header.isPlaceholder) {
+                          <div class="tw:flex tw:items-center tw:gap-1">
+                            <ng-container
+                              *flexRender="header.column.columnDef.header; props: header.getContext(); let headerText"
+                            >
+                              <div [innerHTML]="headerText"></div>
+                            </ng-container>
+                            @if (_showHeaderSortButton(header)) {
+                              <button
+                                hlmButton
+                                variant="ghost"
+                                size="sm"
+                                [class]="_sortButtonClass()"
+                                type="button"
+                                [attr.aria-label]="'Sort by ' + header.column.id"
+                                (click)="_toggleHeaderSorting(header)"
+                              >
+                                @switch (header.column.getIsSorted()) {
+                                  @case ('asc') {
+                                    <ng-icon hlm size="sm" name="lucideArrowUp" />
+                                  }
+                                  @case ('desc') {
+                                    <ng-icon hlm size="sm" name="lucideArrowDown" />
+                                  }
+                                  @default {
+                                    <ng-icon hlm size="sm" name="lucideChevronsUpDown" />
+                                  }
+                                }
+                              </button>
+                            }
+                          </div>
+                        }
+                      </th>
+                    }
+                  </tr>
+                }
+              </thead>
+              <tbody hlmTBody>
+                @if (isLoading()) {
+                  <tr hlmTr>
+                    <td hlmTd [attr.colspan]="_visibleColumnCount()" class="tw:h-24 tw:text-center">
+                      <hlm-spinner class="tw:inline-flex" />
+                    </td>
+                  </tr>
+                } @else if (_table.getRowModel().rows.length === 0) {
+                  <tr hlmTr>
+                    <td hlmTd [attr.colspan]="_visibleColumnCount()" class="tw:h-24 tw:text-center">
+                      {{ emptyMessage() }}
+                    </td>
+                  </tr>
+                } @else {
+                  @for (row of _table.getRowModel().rows; track row.id) {
+                    <tr
+                      hlmTr
+                      [attr.data-state]="row.getIsSelected() ? 'selected' : null"
+                      (click)="_onRowClick($event, row)"
+                    >
+                      @for (cell of row.getVisibleCells(); track cell.id) {
+                        <td hlmTd [size]="size()">
+                          <ng-container
+                            *flexRender="cell.column.columnDef.cell; props: cell.getContext(); let cellText"
+                          >
+                            <div [innerHTML]="cellText"></div>
+                          </ng-container>
+                        </td>
+                      }
+                    </tr>
+                  }
+                }
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </ng-template>
+
+      <ng-template #_gridView>
+        @if (isLoading()) {
+          <div
+            class="tw:flex tw:h-64 tw:items-center tw:justify-center tw:rounded-lg tw:border tw:border-dashed"
+            role="status"
+          >
+            <hlm-spinner />
+          </div>
+        } @else if (_table.getRowModel().rows.length === 0) {
+          <div
+            class="tw:text-muted-foreground tw:flex tw:h-64 tw:items-center tw:justify-center tw:rounded-lg tw:border tw:border-dashed"
+          >
+            {{ emptyMessage() }}
+          </div>
+        } @else {
+          <div class="tw:grid tw:grid-cols-1 tw:gap-4 tw:md:grid-cols-2 tw:xl:grid-cols-3 tw:2xl:grid-cols-4">
+            @for (row of _table.getRowModel().rows; track row.id) {
+              <div
+                hlmCard
+                class="tw:group tw:relative tw:transition-all tw:hover:shadow-md tw:data-[state=selected]:border-primary tw:data-[state=selected]:ring-1 tw:data-[state=selected]:ring-primary/20"
+                [attr.data-state]="row.getIsSelected() ? 'selected' : null"
+                (click)="_onRowClick($event, row)"
+              >
+                @if (_thumbnailCell(row); as thumbnail) {
+                  <div class="tw:border-b tw:bg-muted/30">
+                    <ng-container
+                      *flexRender="thumbnail.column.columnDef.cell; props: thumbnail.getContext(); let thumbHtml"
+                    >
+                      <div [innerHTML]="thumbHtml"></div>
+                    </ng-container>
+                  </div>
+                }
+                @if (_selectionCell(row); as selection) {
+                  <div class="tw:absolute tw:top-4 tw:right-4">
+                    <ng-container
+                      *flexRender="selection.column.columnDef.cell; props: selection.getContext(); let selectHtml"
+                    >
+                      <div [innerHTML]="selectHtml"></div>
+                    </ng-container>
+                  </div>
+                }
+                <div hlmCardContent class="tw:space-y-3">
+                  @for (cell of _contentCells(row); track cell.id) {
+                    <div class="tw:flex tw:flex-col">
+                      <dt
+                        class="tw:text-[10px] tw:font-bold tw:tracking-wider tw:uppercase tw:text-muted-foreground/80"
+                      >
+                        {{ _cellLabel(cell) }}
+                      </dt>
+                      <dd class="tw:mt-0.5 tw:text-sm tw:leading-none tw:font-medium">
+                        <ng-container *flexRender="cell.column.columnDef.cell; props: cell.getContext(); let valueHtml">
+                          <div [innerHTML]="valueHtml"></div>
+                        </ng-container>
+                      </dd>
+                    </div>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+        }
+      </ng-template>
+
+      @if (!hideFooter()) {
+        <div
+          class="tw:flex tw:flex-col tw:gap-2 tw:px-2 tw:py-4 tw:sm:flex-row tw:sm:items-center tw:sm:justify-between"
+          [tanStackTable]="_table"
+        >
+          <div class="tw:text-muted-foreground tw:flex-1 tw:text-sm">{{ _statusText() }}</div>
+          <eg-data-table-pagination
+            [showStatus]="false"
+            [showPageSize]="showPageSize()"
+            [pageSizes]="pageSizes()"
+            [navMode]="navMode()"
+            [size]="size()"
+          />
+        </div>
+      }
+    </div>
+  `,
+                    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"] }] } });
+
+/**
+ * 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.
+ */
+class EgDataTableColumnHeader {
+    column = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    title = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Density of the trigger button. */
+    size = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    _sorted = computed(() => this.column().getIsSorted(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_sorted" }] : /* 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 */ []));
+    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: `
+    @if (column().getCanSort()) {
+      <div class="tw:flex tw:items-center tw:gap-2">
+        <button
+          hlmButton
+          variant="ghost"
+          size="sm"
+          [class]="_buttonClass()"
+          type="button"
+          [hlmDropdownMenuTrigger]="_menu"
+        >
+          <span>{{ title() }}</span>
+          @switch (_sorted()) {
+            @case ('desc') {
+              <ng-icon hlm size="sm" name="lucideArrowDown" />
+            }
+            @case ('asc') {
+              <ng-icon hlm size="sm" name="lucideArrowUp" />
+            }
+            @default {
+              <ng-icon hlm size="sm" name="lucideChevronsUpDown" />
+            }
+          }
+        </button>
+        <ng-template #_menu>
+          <div hlmDropdownMenu>
+            <button hlmDropdownMenuItem type="button" (click)="column().toggleSorting(false)">
+              <ng-icon hlm size="sm" name="lucideArrowUp" />
+              Asc
+            </button>
+            <button hlmDropdownMenuItem type="button" (click)="column().toggleSorting(true)">
+              <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>
+          </div>
+        </ng-template>
+      </div>
+    } @else {
+      <div>{{ title() }}</div>
+    }
+  `, 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,
+            args: [{
+                    selector: 'eg-data-table-column-header',
+                    imports: [HlmButton, HlmDropdownMenuImports, NgIcon, HlmIcon],
+                    providers: [provideIcons({ lucideArrowDown, lucideArrowUp, lucideChevronsUpDown, lucideEyeOff })],
+                    template: `
+    @if (column().getCanSort()) {
+      <div class="tw:flex tw:items-center tw:gap-2">
+        <button
+          hlmButton
+          variant="ghost"
+          size="sm"
+          [class]="_buttonClass()"
+          type="button"
+          [hlmDropdownMenuTrigger]="_menu"
+        >
+          <span>{{ title() }}</span>
+          @switch (_sorted()) {
+            @case ('desc') {
+              <ng-icon hlm size="sm" name="lucideArrowDown" />
+            }
+            @case ('asc') {
+              <ng-icon hlm size="sm" name="lucideArrowUp" />
+            }
+            @default {
+              <ng-icon hlm size="sm" name="lucideChevronsUpDown" />
+            }
+          }
+        </button>
+        <ng-template #_menu>
+          <div hlmDropdownMenu>
+            <button hlmDropdownMenuItem type="button" (click)="column().toggleSorting(false)">
+              <ng-icon hlm size="sm" name="lucideArrowUp" />
+              Asc
+            </button>
+            <button hlmDropdownMenuItem type="button" (click)="column().toggleSorting(true)">
+              <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>
+          </div>
+        </ng-template>
+      </div>
+    } @else {
+      <div>{{ title() }}</div>
+    }
+  `,
+                    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 }] }] } });
+
+/*
+ * Public API Surface of data-table
+ */
+const EgDataTableImports = [
+    EgDataTable,
+    EgDataTableColumnHeader,
+    EgDataTablePagination,
+    EgDataTableViewOptions,
+    EgTableHeadSelection,
+    EgTableRowSelection,
+];
+class EgDataTableModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableModule, imports: [EgDataTable,
+            EgDataTableColumnHeader,
+            EgDataTablePagination,
+            EgDataTableViewOptions,
+            EgTableHeadSelection,
+            EgTableRowSelection], exports: [EgDataTable,
+            EgDataTableColumnHeader,
+            EgDataTablePagination,
+            EgDataTableViewOptions,
+            EgTableHeadSelection,
+            EgTableRowSelection] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableModule, imports: [EgDataTableImports] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgDataTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...EgDataTableImports],
+                    exports: [...EgDataTableImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EgDataTable, EgDataTableColumnHeader, EgDataTableImports, EgDataTableModule, EgDataTablePagination, EgDataTableViewOptions, EgTableHeadSelection, EgTableRowSelection, defaultEgDataTableFeatures };
+