@gravionlabs/helix-ui 22.2.0 → 22.2.1

package/README.md

@@ -33,7 +33,7 @@ Dark mode: tokens switch under the `app-dark` class on `<html>`, as in `helix-sh
 | `HxAvatar`, `HxAvatarGroup` | `hx-avatar`, `hx-avatar-group` | picture, icon or initials; sizes, shapes; the group overlaps its avatars |
 | `HxBadge`, `HxOverlayBadge` | `hx-badge`, `hx-overlay-badge` | count or dot marker, severities and sizes; the overlay variant sits on a corner of the wrapped element |
 | `HxBreadcrumb` | `hx-breadcrumb` | router links, home item |
-| `HxDataTable`, `HxColumn`, `HxCell`, `HxTableHeader`, `HxTableBody`, `HxTableFooter`, `HxTableCaption`, `HxRowExpansion` | `hx-data-table` … | column model, cell and row templates, sorting (single or multiple), paging, lazy loading, selection (checkbox, single, meta key), global and column filters, row expansion, caption, empty and loading state, scrolling body with a sticky header |
+| `HxDataTable`, `HxColumn`, `HxCell`, `HxTableHeader`, `HxTableBody`, `HxTableFooter`, `HxTableCaption`, `HxTableEmpty`, `HxRowExpansion` | `hx-data-table` … | column model, cell and row templates, sorting (single or multiple), paging, lazy loading, selection (checkbox, single, meta key), global and column filters, row expansion, caption, empty and loading state, scrolling body with a sticky header |
 | `HxPaginator` | `hx-paginator` | first/previous/page links/next/last, rows per page, current page report; `first` and `rows` models |
 | `HxIconField`, `HxInputIcon` | `hx-icon-field`, `[hx-input-icon]` | icon on the start or end edge of a text field |
 | `HxFloatLabel` | `hx-float-label` | a label that sits in the field and floats up on focus or a value (`over`, `in`, `on`) |

package/fesm2022/gravionlabs-helix-ui.mjs

@@ -5787,6 +5787,35 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{ selector: "ng-template[hxTableCaption]" }]
 	}]
 });
+var HxTableEmpty = class HxTableEmpty {
+	template = inject(TemplateRef);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: HxTableEmpty,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: HxTableEmpty,
+		isStandalone: true,
+		selector: "ng-template[hxTableEmpty]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: HxTableEmpty,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[hxTableEmpty]" }]
+	}]
+});
 var HxRowExpansion = class HxRowExpansion {
 	template = inject(TemplateRef);
 	static ɵfac = i0.ɵɵngDeclareFactory({
@@ -5894,6 +5923,7 @@ var HxDataTable = class HxDataTable {
 	footerTemplate = contentChild(HxTableFooter, ...ngDevMode ? [{ debugName: "footerTemplate" }] : 	/* istanbul ignore next */ []);
 	captionTemplate = contentChild(HxTableCaption, ...ngDevMode ? [{ debugName: "captionTemplate" }] : 	/* istanbul ignore next */ []);
 	expansionTemplate = contentChild(HxRowExpansion, ...ngDevMode ? [{ debugName: "expansionTemplate" }] : 	/* istanbul ignore next */ []);
+	emptyTemplate = contentChild(HxTableEmpty, ...ngDevMode ? [{ debugName: "emptyTemplate" }] : 	/* istanbul ignore next */ []);
 	sortMeta = computed(() => this.sortMode() === "multiple" ? this.multiSortMeta() : this.sortField() ? [{
 		field: this.sortField(),
 		order: this.sortOrder()
@@ -6400,10 +6430,17 @@ var HxDataTable = class HxDataTable {
 				predicate: HxRowExpansion,
 				descendants: true,
 				isSignal: true
+			},
+			{
+				propertyName: "emptyTemplate",
+				first: true,
+				predicate: HxTableEmpty,
+				descendants: true,
+				isSignal: true
 			}
 		],
 		ngImport: i0,
-		template: "<div class=\"hx-data-table-frame\" [attr.aria-busy]=\"loading() ? 'true' : null\">\n  <div\n    class=\"hx-table-scroll hx-data-table-scroll\"\n    [class.hx-data-table-scrolls]=\"scrolls()\"\n    [style.max-height]=\"scrollHeight() ?? null\"\n    [attr.role]=\"scrolls() ? 'region' : null\"\n    [attr.aria-label]=\"scrolls() ? (ariaLabel() ?? caption() ?? null) : null\"\n    [attr.tabindex]=\"scrolls() ? 0 : null\"\n  >\n    <table\n      class=\"hx-table\"\n      [class.hx-table-sm]=\"size() === 'small'\"\n      [class.hx-table-lg]=\"size() === 'large'\"\n      [class.hx-table-striped]=\"stripedRows()\"\n      [class.hx-table-gridlines]=\"showGridlines()\"\n      [class.hx-table-hoverable]=\"hoverRows()\"\n      [class.hx-table-sticky]=\"!!scrollHeight()\"\n    >\n      @if (hasCaption()) {\n        <caption [class.hx-data-table-caption-hidden]=\"captionHidden()\">\n          @if (captionTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n          } @else {\n            {{ caption() ?? ariaLabel() }}\n          }\n        </caption>\n      }\n      <thead>\n        <tr>\n          @if (expanderColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-expander-cell\"><span class=\"hx-data-table-caption-hidden\">Row details</span></th>\n          }\n          @if (checkboxColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-select-cell\">\n              <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectAllLabel()\" [checked]=\"allSelected()\" [indeterminate]=\"someSelected()\" (change)=\"toggleSelectAll($any($event.target).checked)\" />\n            </th>\n          }\n          @if (headerTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          } @else {\n            @for (column of columns(); track column.field) {\n              <th\n                scope=\"col\"\n                [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\"\n                [class.hx-data-table-sorted]=\"orderOf(column) !== 0\"\n                [style.width]=\"column.width ?? null\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n              >\n                @if (column.sortable) {\n                  <button type=\"button\" class=\"hx-data-table-sort\" (click)=\"sort(column)\">\n                    <span>{{ column.header }}</span>\n                    <span class=\"hx-data-table-sort-icon\" [class.hx-data-table-sort-asc]=\"orderOf(column) === 1\" [class.hx-data-table-sort-desc]=\"orderOf(column) === -1\" aria-hidden=\"true\"></span>\n                    @if (sortRank(column); as rank) {\n                      <span class=\"hx-data-table-sort-rank\" aria-hidden=\"true\">{{ rank }}</span>\n                    }\n                  </button>\n                } @else {\n                  {{ column.header }}\n                }\n              </th>\n            }\n          }\n        </tr>\n        @if (filterRow()) {\n          <tr class=\"hx-data-table-filter-row\">\n            @if (expanderColumn()) { <th></th> }\n            @if (checkboxColumn()) { <th></th> }\n            @for (column of columns(); track column.field) {\n              <th>\n                @if (column.filter) {\n                  <input type=\"text\" hx-input size=\"small\" fluid [attr.aria-label]=\"filterLabel().replace('{header}', column.header)\" [value]=\"filters()[column.field] ?? ''\" (input)=\"setFilter(column, $any($event.target).value)\" />\n                }\n              </th>\n            }\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @for (row of visibleRows(); track trackRow(row, $index); let i = $index) {\n          <tr\n            [class.hx-data-table-selectable]=\"selectable()\"\n            [attr.aria-selected]=\"selectionMode() ? (isSelected(row) ? 'true' : 'false') : null\"\n            [attr.tabindex]=\"selectable() ? 0 : null\"\n            (click)=\"selectRow(row, $event)\"\n            (keydown.enter)=\"onRowKey(row, $event)\"\n            (keydown.space)=\"onRowKey(row, $event)\"\n          >\n            @if (expanderColumn()) {\n              <td class=\"hx-data-table-expander-cell\">\n                <button type=\"button\" class=\"hx-data-table-expander\" [class.hx-data-table-expander-open]=\"isExpanded(row, i)\" [attr.aria-expanded]=\"isExpanded(row, i)\" [attr.aria-label]=\"isExpanded(row, i) ? collapseLabel() : expandLabel()\" (click)=\"toggleExpansion(row, i)\"></button>\n              </td>\n            }\n            @if (checkboxColumn()) {\n              <td class=\"hx-data-table-select-cell\">\n                <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectRowLabel().replace('{row}', '' + (first() + i + 1))\" [checked]=\"isSelected(row)\" (change)=\"toggleRowCheckbox(row, $any($event.target).checked)\" />\n              </td>\n            }\n            @if (bodyTemplate(); as tpl) {\n              <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n            } @else {\n              @for (column of columns(); track column.field) {\n                <td [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\">\n                  @if (cells().get(column.field); as cell) {\n                    <ng-container [ngTemplateOutlet]=\"cell\" [ngTemplateOutletContext]=\"{ $implicit: row, value: valueOf(row, column), index: i }\" />\n                  } @else {\n                    {{ valueOf(row, column) }}\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (expansionTemplate(); as tpl) {\n            @if (isExpanded(row, i)) {\n              <tr class=\"hx-data-table-expansion\">\n                <td [attr.colspan]=\"colspan()\">\n                  <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr class=\"hx-data-table-empty\">\n            <td [attr.colspan]=\"colspan()\">{{ emptyMessage() }}</td>\n          </tr>\n        }\n      </tbody>\n      @if (footerTemplate(); as tpl) {\n        <tfoot>\n          <tr>\n            @if (expanderColumn()) { <td></td> }\n            @if (checkboxColumn()) { <td></td> }\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          </tr>\n        </tfoot>\n      }\n    </table>\n  </div>\n  <span class=\"hx-data-table-caption-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  @if (loading()) {\n    <div class=\"hx-data-table-loading\" role=\"status\">\n      <hx-progress-spinner ariaLabel=\"Loading\" />\n    </div>\n  }\n  @if (paginator()) {\n    <hx-paginator\n      class=\"hx-data-table-paginator\"\n      [rows]=\"rows()\"\n      [first]=\"first()\"\n      [totalRecords]=\"total()\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n      [showCurrentPageReport]=\"showCurrentPageReport()\"\n      (pageChange)=\"onPage($event)\"\n    />\n  }\n</div>\n",
+		template: "<div class=\"hx-data-table-frame\" [attr.aria-busy]=\"loading() ? 'true' : null\">\n  <div\n    class=\"hx-table-scroll hx-data-table-scroll\"\n    [class.hx-data-table-scrolls]=\"scrolls()\"\n    [style.max-height]=\"scrollHeight() ?? null\"\n    [attr.role]=\"scrolls() ? 'region' : null\"\n    [attr.aria-label]=\"scrolls() ? (ariaLabel() ?? caption() ?? null) : null\"\n    [attr.tabindex]=\"scrolls() ? 0 : null\"\n  >\n    <table\n      class=\"hx-table\"\n      [class.hx-table-sm]=\"size() === 'small'\"\n      [class.hx-table-lg]=\"size() === 'large'\"\n      [class.hx-table-striped]=\"stripedRows()\"\n      [class.hx-table-gridlines]=\"showGridlines()\"\n      [class.hx-table-hoverable]=\"hoverRows()\"\n      [class.hx-table-sticky]=\"!!scrollHeight()\"\n    >\n      @if (hasCaption()) {\n        <caption [class.hx-data-table-caption-hidden]=\"captionHidden()\">\n          @if (captionTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n          } @else {\n            {{ caption() ?? ariaLabel() }}\n          }\n        </caption>\n      }\n      <thead>\n        <tr>\n          @if (expanderColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-expander-cell\"><span class=\"hx-data-table-caption-hidden\">Row details</span></th>\n          }\n          @if (checkboxColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-select-cell\">\n              <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectAllLabel()\" [checked]=\"allSelected()\" [indeterminate]=\"someSelected()\" (change)=\"toggleSelectAll($any($event.target).checked)\" />\n            </th>\n          }\n          @if (headerTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          } @else {\n            @for (column of columns(); track column.field) {\n              <th\n                scope=\"col\"\n                [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\"\n                [class.hx-data-table-sorted]=\"orderOf(column) !== 0\"\n                [style.width]=\"column.width ?? null\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n              >\n                @if (column.sortable) {\n                  <button type=\"button\" class=\"hx-data-table-sort\" (click)=\"sort(column)\">\n                    <span>{{ column.header }}</span>\n                    <span class=\"hx-data-table-sort-icon\" [class.hx-data-table-sort-asc]=\"orderOf(column) === 1\" [class.hx-data-table-sort-desc]=\"orderOf(column) === -1\" aria-hidden=\"true\"></span>\n                    @if (sortRank(column); as rank) {\n                      <span class=\"hx-data-table-sort-rank\" aria-hidden=\"true\">{{ rank }}</span>\n                    }\n                  </button>\n                } @else {\n                  {{ column.header }}\n                }\n              </th>\n            }\n          }\n        </tr>\n        @if (filterRow()) {\n          <tr class=\"hx-data-table-filter-row\">\n            @if (expanderColumn()) { <th></th> }\n            @if (checkboxColumn()) { <th></th> }\n            @for (column of columns(); track column.field) {\n              <th>\n                @if (column.filter) {\n                  <input type=\"text\" hx-input size=\"small\" fluid [attr.aria-label]=\"filterLabel().replace('{header}', column.header)\" [value]=\"filters()[column.field] ?? ''\" (input)=\"setFilter(column, $any($event.target).value)\" />\n                }\n              </th>\n            }\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @for (row of visibleRows(); track trackRow(row, $index); let i = $index) {\n          <tr\n            [class.hx-data-table-selectable]=\"selectable()\"\n            [attr.aria-selected]=\"selectionMode() ? (isSelected(row) ? 'true' : 'false') : null\"\n            [attr.tabindex]=\"selectable() ? 0 : null\"\n            (click)=\"selectRow(row, $event)\"\n            (keydown.enter)=\"onRowKey(row, $event)\"\n            (keydown.space)=\"onRowKey(row, $event)\"\n          >\n            @if (expanderColumn()) {\n              <td class=\"hx-data-table-expander-cell\">\n                <button type=\"button\" class=\"hx-data-table-expander\" [class.hx-data-table-expander-open]=\"isExpanded(row, i)\" [attr.aria-expanded]=\"isExpanded(row, i)\" [attr.aria-label]=\"isExpanded(row, i) ? collapseLabel() : expandLabel()\" (click)=\"toggleExpansion(row, i)\"></button>\n              </td>\n            }\n            @if (checkboxColumn()) {\n              <td class=\"hx-data-table-select-cell\">\n                <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectRowLabel().replace('{row}', '' + (first() + i + 1))\" [checked]=\"isSelected(row)\" (change)=\"toggleRowCheckbox(row, $any($event.target).checked)\" />\n              </td>\n            }\n            @if (bodyTemplate(); as tpl) {\n              <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n            } @else {\n              @for (column of columns(); track column.field) {\n                <td [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\">\n                  @if (cells().get(column.field); as cell) {\n                    <ng-container [ngTemplateOutlet]=\"cell\" [ngTemplateOutletContext]=\"{ $implicit: row, value: valueOf(row, column), index: i }\" />\n                  } @else {\n                    {{ valueOf(row, column) }}\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (expansionTemplate(); as tpl) {\n            @if (isExpanded(row, i)) {\n              <tr class=\"hx-data-table-expansion\">\n                <td [attr.colspan]=\"colspan()\">\n                  <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr class=\"hx-data-table-empty\">\n            <td [attr.colspan]=\"colspan()\">\n              @if (emptyTemplate(); as tpl) {\n                <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n              } @else {\n                {{ emptyMessage() }}\n              }\n            </td>\n          </tr>\n        }\n      </tbody>\n      @if (footerTemplate(); as tpl) {\n        <tfoot>\n          <tr>\n            @if (expanderColumn()) { <td></td> }\n            @if (checkboxColumn()) { <td></td> }\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          </tr>\n        </tfoot>\n      }\n    </table>\n  </div>\n  <span class=\"hx-data-table-caption-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  @if (loading()) {\n    <div class=\"hx-data-table-loading\" role=\"status\">\n      <hx-progress-spinner ariaLabel=\"Loading\" />\n    </div>\n  }\n  @if (paginator()) {\n    <hx-paginator\n      class=\"hx-data-table-paginator\"\n      [rows]=\"rows()\"\n      [first]=\"first()\"\n      [totalRecords]=\"total()\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n      [showCurrentPageReport]=\"showCurrentPageReport()\"\n      (pageChange)=\"onPage($event)\"\n    />\n  }\n</div>\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -6493,7 +6530,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: { class: "hx-data-table" },
-			template: "<div class=\"hx-data-table-frame\" [attr.aria-busy]=\"loading() ? 'true' : null\">\n  <div\n    class=\"hx-table-scroll hx-data-table-scroll\"\n    [class.hx-data-table-scrolls]=\"scrolls()\"\n    [style.max-height]=\"scrollHeight() ?? null\"\n    [attr.role]=\"scrolls() ? 'region' : null\"\n    [attr.aria-label]=\"scrolls() ? (ariaLabel() ?? caption() ?? null) : null\"\n    [attr.tabindex]=\"scrolls() ? 0 : null\"\n  >\n    <table\n      class=\"hx-table\"\n      [class.hx-table-sm]=\"size() === 'small'\"\n      [class.hx-table-lg]=\"size() === 'large'\"\n      [class.hx-table-striped]=\"stripedRows()\"\n      [class.hx-table-gridlines]=\"showGridlines()\"\n      [class.hx-table-hoverable]=\"hoverRows()\"\n      [class.hx-table-sticky]=\"!!scrollHeight()\"\n    >\n      @if (hasCaption()) {\n        <caption [class.hx-data-table-caption-hidden]=\"captionHidden()\">\n          @if (captionTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n          } @else {\n            {{ caption() ?? ariaLabel() }}\n          }\n        </caption>\n      }\n      <thead>\n        <tr>\n          @if (expanderColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-expander-cell\"><span class=\"hx-data-table-caption-hidden\">Row details</span></th>\n          }\n          @if (checkboxColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-select-cell\">\n              <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectAllLabel()\" [checked]=\"allSelected()\" [indeterminate]=\"someSelected()\" (change)=\"toggleSelectAll($any($event.target).checked)\" />\n            </th>\n          }\n          @if (headerTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          } @else {\n            @for (column of columns(); track column.field) {\n              <th\n                scope=\"col\"\n                [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\"\n                [class.hx-data-table-sorted]=\"orderOf(column) !== 0\"\n                [style.width]=\"column.width ?? null\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n              >\n                @if (column.sortable) {\n                  <button type=\"button\" class=\"hx-data-table-sort\" (click)=\"sort(column)\">\n                    <span>{{ column.header }}</span>\n                    <span class=\"hx-data-table-sort-icon\" [class.hx-data-table-sort-asc]=\"orderOf(column) === 1\" [class.hx-data-table-sort-desc]=\"orderOf(column) === -1\" aria-hidden=\"true\"></span>\n                    @if (sortRank(column); as rank) {\n                      <span class=\"hx-data-table-sort-rank\" aria-hidden=\"true\">{{ rank }}</span>\n                    }\n                  </button>\n                } @else {\n                  {{ column.header }}\n                }\n              </th>\n            }\n          }\n        </tr>\n        @if (filterRow()) {\n          <tr class=\"hx-data-table-filter-row\">\n            @if (expanderColumn()) { <th></th> }\n            @if (checkboxColumn()) { <th></th> }\n            @for (column of columns(); track column.field) {\n              <th>\n                @if (column.filter) {\n                  <input type=\"text\" hx-input size=\"small\" fluid [attr.aria-label]=\"filterLabel().replace('{header}', column.header)\" [value]=\"filters()[column.field] ?? ''\" (input)=\"setFilter(column, $any($event.target).value)\" />\n                }\n              </th>\n            }\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @for (row of visibleRows(); track trackRow(row, $index); let i = $index) {\n          <tr\n            [class.hx-data-table-selectable]=\"selectable()\"\n            [attr.aria-selected]=\"selectionMode() ? (isSelected(row) ? 'true' : 'false') : null\"\n            [attr.tabindex]=\"selectable() ? 0 : null\"\n            (click)=\"selectRow(row, $event)\"\n            (keydown.enter)=\"onRowKey(row, $event)\"\n            (keydown.space)=\"onRowKey(row, $event)\"\n          >\n            @if (expanderColumn()) {\n              <td class=\"hx-data-table-expander-cell\">\n                <button type=\"button\" class=\"hx-data-table-expander\" [class.hx-data-table-expander-open]=\"isExpanded(row, i)\" [attr.aria-expanded]=\"isExpanded(row, i)\" [attr.aria-label]=\"isExpanded(row, i) ? collapseLabel() : expandLabel()\" (click)=\"toggleExpansion(row, i)\"></button>\n              </td>\n            }\n            @if (checkboxColumn()) {\n              <td class=\"hx-data-table-select-cell\">\n                <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectRowLabel().replace('{row}', '' + (first() + i + 1))\" [checked]=\"isSelected(row)\" (change)=\"toggleRowCheckbox(row, $any($event.target).checked)\" />\n              </td>\n            }\n            @if (bodyTemplate(); as tpl) {\n              <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n            } @else {\n              @for (column of columns(); track column.field) {\n                <td [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\">\n                  @if (cells().get(column.field); as cell) {\n                    <ng-container [ngTemplateOutlet]=\"cell\" [ngTemplateOutletContext]=\"{ $implicit: row, value: valueOf(row, column), index: i }\" />\n                  } @else {\n                    {{ valueOf(row, column) }}\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (expansionTemplate(); as tpl) {\n            @if (isExpanded(row, i)) {\n              <tr class=\"hx-data-table-expansion\">\n                <td [attr.colspan]=\"colspan()\">\n                  <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr class=\"hx-data-table-empty\">\n            <td [attr.colspan]=\"colspan()\">{{ emptyMessage() }}</td>\n          </tr>\n        }\n      </tbody>\n      @if (footerTemplate(); as tpl) {\n        <tfoot>\n          <tr>\n            @if (expanderColumn()) { <td></td> }\n            @if (checkboxColumn()) { <td></td> }\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          </tr>\n        </tfoot>\n      }\n    </table>\n  </div>\n  <span class=\"hx-data-table-caption-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  @if (loading()) {\n    <div class=\"hx-data-table-loading\" role=\"status\">\n      <hx-progress-spinner ariaLabel=\"Loading\" />\n    </div>\n  }\n  @if (paginator()) {\n    <hx-paginator\n      class=\"hx-data-table-paginator\"\n      [rows]=\"rows()\"\n      [first]=\"first()\"\n      [totalRecords]=\"total()\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n      [showCurrentPageReport]=\"showCurrentPageReport()\"\n      (pageChange)=\"onPage($event)\"\n    />\n  }\n</div>\n"
+			template: "<div class=\"hx-data-table-frame\" [attr.aria-busy]=\"loading() ? 'true' : null\">\n  <div\n    class=\"hx-table-scroll hx-data-table-scroll\"\n    [class.hx-data-table-scrolls]=\"scrolls()\"\n    [style.max-height]=\"scrollHeight() ?? null\"\n    [attr.role]=\"scrolls() ? 'region' : null\"\n    [attr.aria-label]=\"scrolls() ? (ariaLabel() ?? caption() ?? null) : null\"\n    [attr.tabindex]=\"scrolls() ? 0 : null\"\n  >\n    <table\n      class=\"hx-table\"\n      [class.hx-table-sm]=\"size() === 'small'\"\n      [class.hx-table-lg]=\"size() === 'large'\"\n      [class.hx-table-striped]=\"stripedRows()\"\n      [class.hx-table-gridlines]=\"showGridlines()\"\n      [class.hx-table-hoverable]=\"hoverRows()\"\n      [class.hx-table-sticky]=\"!!scrollHeight()\"\n    >\n      @if (hasCaption()) {\n        <caption [class.hx-data-table-caption-hidden]=\"captionHidden()\">\n          @if (captionTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n          } @else {\n            {{ caption() ?? ariaLabel() }}\n          }\n        </caption>\n      }\n      <thead>\n        <tr>\n          @if (expanderColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-expander-cell\"><span class=\"hx-data-table-caption-hidden\">Row details</span></th>\n          }\n          @if (checkboxColumn()) {\n            <th scope=\"col\" class=\"hx-data-table-select-cell\">\n              <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectAllLabel()\" [checked]=\"allSelected()\" [indeterminate]=\"someSelected()\" (change)=\"toggleSelectAll($any($event.target).checked)\" />\n            </th>\n          }\n          @if (headerTemplate(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          } @else {\n            @for (column of columns(); track column.field) {\n              <th\n                scope=\"col\"\n                [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\"\n                [class.hx-data-table-sorted]=\"orderOf(column) !== 0\"\n                [style.width]=\"column.width ?? null\"\n                [attr.aria-sort]=\"ariaSort(column)\"\n              >\n                @if (column.sortable) {\n                  <button type=\"button\" class=\"hx-data-table-sort\" (click)=\"sort(column)\">\n                    <span>{{ column.header }}</span>\n                    <span class=\"hx-data-table-sort-icon\" [class.hx-data-table-sort-asc]=\"orderOf(column) === 1\" [class.hx-data-table-sort-desc]=\"orderOf(column) === -1\" aria-hidden=\"true\"></span>\n                    @if (sortRank(column); as rank) {\n                      <span class=\"hx-data-table-sort-rank\" aria-hidden=\"true\">{{ rank }}</span>\n                    }\n                  </button>\n                } @else {\n                  {{ column.header }}\n                }\n              </th>\n            }\n          }\n        </tr>\n        @if (filterRow()) {\n          <tr class=\"hx-data-table-filter-row\">\n            @if (expanderColumn()) { <th></th> }\n            @if (checkboxColumn()) { <th></th> }\n            @for (column of columns(); track column.field) {\n              <th>\n                @if (column.filter) {\n                  <input type=\"text\" hx-input size=\"small\" fluid [attr.aria-label]=\"filterLabel().replace('{header}', column.header)\" [value]=\"filters()[column.field] ?? ''\" (input)=\"setFilter(column, $any($event.target).value)\" />\n                }\n              </th>\n            }\n          </tr>\n        }\n      </thead>\n      <tbody>\n        @for (row of visibleRows(); track trackRow(row, $index); let i = $index) {\n          <tr\n            [class.hx-data-table-selectable]=\"selectable()\"\n            [attr.aria-selected]=\"selectionMode() ? (isSelected(row) ? 'true' : 'false') : null\"\n            [attr.tabindex]=\"selectable() ? 0 : null\"\n            (click)=\"selectRow(row, $event)\"\n            (keydown.enter)=\"onRowKey(row, $event)\"\n            (keydown.space)=\"onRowKey(row, $event)\"\n          >\n            @if (expanderColumn()) {\n              <td class=\"hx-data-table-expander-cell\">\n                <button type=\"button\" class=\"hx-data-table-expander\" [class.hx-data-table-expander-open]=\"isExpanded(row, i)\" [attr.aria-expanded]=\"isExpanded(row, i)\" [attr.aria-label]=\"isExpanded(row, i) ? collapseLabel() : expandLabel()\" (click)=\"toggleExpansion(row, i)\"></button>\n              </td>\n            }\n            @if (checkboxColumn()) {\n              <td class=\"hx-data-table-select-cell\">\n                <input type=\"checkbox\" hx-checkbox [attr.aria-label]=\"selectRowLabel().replace('{row}', '' + (first() + i + 1))\" [checked]=\"isSelected(row)\" (change)=\"toggleRowCheckbox(row, $any($event.target).checked)\" />\n              </td>\n            }\n            @if (bodyTemplate(); as tpl) {\n              <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n            } @else {\n              @for (column of columns(); track column.field) {\n                <td [class]=\"'hx-data-table-align-' + (column.align ?? 'left')\">\n                  @if (cells().get(column.field); as cell) {\n                    <ng-container [ngTemplateOutlet]=\"cell\" [ngTemplateOutletContext]=\"{ $implicit: row, value: valueOf(row, column), index: i }\" />\n                  } @else {\n                    {{ valueOf(row, column) }}\n                  }\n                </td>\n              }\n            }\n          </tr>\n          @if (expansionTemplate(); as tpl) {\n            @if (isExpanded(row, i)) {\n              <tr class=\"hx-data-table-expansion\">\n                <td [attr.colspan]=\"colspan()\">\n                  <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: row, index: i, columns: columns() }\" />\n                </td>\n              </tr>\n            }\n          }\n        } @empty {\n          <tr class=\"hx-data-table-empty\">\n            <td [attr.colspan]=\"colspan()\">\n              @if (emptyTemplate(); as tpl) {\n                <ng-container [ngTemplateOutlet]=\"tpl.template\" />\n              } @else {\n                {{ emptyMessage() }}\n              }\n            </td>\n          </tr>\n        }\n      </tbody>\n      @if (footerTemplate(); as tpl) {\n        <tfoot>\n          <tr>\n            @if (expanderColumn()) { <td></td> }\n            @if (checkboxColumn()) { <td></td> }\n            <ng-container [ngTemplateOutlet]=\"tpl.template\" [ngTemplateOutletContext]=\"{ $implicit: columns() }\" />\n          </tr>\n        </tfoot>\n      }\n    </table>\n  </div>\n  <span class=\"hx-data-table-caption-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  @if (loading()) {\n    <div class=\"hx-data-table-loading\" role=\"status\">\n      <hx-progress-spinner ariaLabel=\"Loading\" />\n    </div>\n  }\n  @if (paginator()) {\n    <hx-paginator\n      class=\"hx-data-table-paginator\"\n      [rows]=\"rows()\"\n      [first]=\"first()\"\n      [totalRecords]=\"total()\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n      [showCurrentPageReport]=\"showCurrentPageReport()\"\n      (pageChange)=\"onPage($event)\"\n    />\n  }\n</div>\n"
 		}]
 	}],
 	propDecorators: {
@@ -6852,6 +6889,10 @@ i0.ɵɵngDeclareClassMetadata({
 		expansionTemplate: [{
 			type: i0.ContentChild,
 			args: [i0.forwardRef(() => HxRowExpansion), { isSignal: true }]
+		}],
+		emptyTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => HxTableEmpty), { isSignal: true }]
 		}]
 	}
 });
@@ -18519,6 +18560,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { HX_CHART_LOADER, HX_DIALOG_DATA, HX_PRIMARY_COLORS, HX_SURFACES, HX_SURFACE_NAMES, HX_THEME_OPTIONS, HxAccordion, HxAccordionContent, HxAccordionHeader, HxAccordionPanel, HxAutoComplete, HxAvatar, HxAvatarGroup, HxBadge, HxBreadcrumb, HxButton, HxButtonGroup, HxCard, HxCell, HxChart, HxCheckbox, HxChip, HxConfirmDialog, HxConfirmPopup, HxConfirmationService, HxDataTable, HxDatePicker, HxDialog, HxDialogRef, HxDialogService, HxDivider, HxDrawer, HxFieldset, HxFileUpload, HxFloatLabel, HxIconField, HxInput, HxInputGroup, HxInputGroupAddon, HxInputIcon, HxInputNumber, HxListbox, HxMenu, HxMenubar, HxMessage, HxMessageService, HxMultiSelect, HxOverlayBadge, HxPaginator, HxPanel, HxPassword, HxPopover, HxProgressBar, HxProgressSpinner, HxRadio, HxRating, HxRowExpansion, HxSelect, HxSelectButton, HxSkeleton, HxSlider, HxSplitButton, HxStep, HxStepContent, HxStepList, HxStepPanel, HxStepPanels, HxStepper, HxSwitch, HxTab, HxTabContent, HxTabList, HxTabPanel, HxTabPanels, HxTable, HxTableBody, HxTableCaption, HxTableFooter, HxTableHeader, HxTabs, HxTag, HxTheme, HxTimeline, HxTimelineContent, HxTimelineMarker, HxTimelineOpposite, HxToast, HxToastItem, HxToggleButton, HxToolbar, HxTooltip, HxTree, HxTreeNodeTemplate, compareValues, formatFileSize, matchesAccept, provideHxTheme, resolveField };
+export { HX_CHART_LOADER, HX_DIALOG_DATA, HX_PRIMARY_COLORS, HX_SURFACES, HX_SURFACE_NAMES, HX_THEME_OPTIONS, HxAccordion, HxAccordionContent, HxAccordionHeader, HxAccordionPanel, HxAutoComplete, HxAvatar, HxAvatarGroup, HxBadge, HxBreadcrumb, HxButton, HxButtonGroup, HxCard, HxCell, HxChart, HxCheckbox, HxChip, HxConfirmDialog, HxConfirmPopup, HxConfirmationService, HxDataTable, HxDatePicker, HxDialog, HxDialogRef, HxDialogService, HxDivider, HxDrawer, HxFieldset, HxFileUpload, HxFloatLabel, HxIconField, HxInput, HxInputGroup, HxInputGroupAddon, HxInputIcon, HxInputNumber, HxListbox, HxMenu, HxMenubar, HxMessage, HxMessageService, HxMultiSelect, HxOverlayBadge, HxPaginator, HxPanel, HxPassword, HxPopover, HxProgressBar, HxProgressSpinner, HxRadio, HxRating, HxRowExpansion, HxSelect, HxSelectButton, HxSkeleton, HxSlider, HxSplitButton, HxStep, HxStepContent, HxStepList, HxStepPanel, HxStepPanels, HxStepper, HxSwitch, HxTab, HxTabContent, HxTabList, HxTabPanel, HxTabPanels, HxTable, HxTableBody, HxTableCaption, HxTableEmpty, HxTableFooter, HxTableHeader, HxTabs, HxTag, HxTheme, HxTimeline, HxTimelineContent, HxTimelineMarker, HxTimelineOpposite, HxToast, HxToastItem, HxToggleButton, HxToolbar, HxTooltip, HxTree, HxTreeNodeTemplate, compareValues, formatFileSize, matchesAccept, provideHxTheme, resolveField };
 
 //# sourceMappingURL=gravionlabs-helix-ui.mjs.map