@scion/components 22.3.0 → 22.4.0

package/fesm2022/scion-components-table.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { isSignal, InjectionToken, makeEnvironmentProviders, linkedSignal, computed, signal, inject, Injector, runInInjectionContext, untracked, NgZone, resource, effect, assertNotInReactiveContext, assertInInjectionContext, DestroyRef, Injectable, input, Component, output, viewChild, Directive, afterNextRender, ElementRef, Pipe, debounced, viewChildren, ViewEncapsulation } from '@angular/core';
+import { computed, signal, InjectionToken, makeEnvironmentProviders, untracked, inject, Injector, linkedSignal, isSignal, runInInjectionContext, NgZone, resource, effect, assertNotInReactiveContext, assertInInjectionContext, DestroyRef, Injectable, input, Component, output, viewChild, Directive, afterNextRender, ElementRef, Pipe, debounced, viewChildren, ViewEncapsulation } from '@angular/core';
 import { coerceSignal, createDestroyableInjector, toLazyObservable, SciComponentOutletDirective, SciAttributesDirective } from '@scion/components/common';
 import { toObservable, rxResource, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { map, shareReplay, fromEvent, switchMap, concat, of, timer, firstValueFrom, defaultIfEmpty, throwError, skip } from 'rxjs';
 import { Objects, clamp, runSafe, Observables, Arrays } from '@scion/toolkit/util';
-import { map as map$1, startWith, first } from 'rxjs/operators';
+import { fromEvent, switchMap, concat, of, timer, firstValueFrom, defaultIfEmpty, throwError, skip } from 'rxjs';
+import { map, startWith, first } from 'rxjs/operators';
 import { subscribeIn } from '@scion/toolkit/operators';
 import { SciScrollbarComponent } from '@scion/components/viewport';
 import { dimension } from '@scion/components/dimension';
@@ -28,54 +28,139 @@ import { FormsModule } from '@angular/forms';
  * SPDX-License-Identifier: EPL-2.0
  */
 class ɵSciTableColumnFactory {
-    _descriptor;
+    _table;
     columns = new Array();
-    constructor(_descriptor) {
-        this._descriptor = _descriptor;
+    constructor(_table) {
+        this._table = _table;
+    }
+    addStringColumn(descriptorLike, value) {
+        const descriptor = coerceColumnDescriptor(descriptorLike, value);
+        const column = this.mapToColumn(descriptor);
+        const sortable = descriptor.sortable ?? true;
+        const filterable = descriptor.filterable ?? true;
+        this.columns.push({
+            ...column,
+            type: 'string',
+            value: descriptor.value,
+            sortable: computed(() => this._table.sortable() && !!sortable),
+            filterable: computed(() => this._table.filterable() && !!filterable),
+            compare: typeof sortable === 'object' ? sortable.comparator : (a, b) => a.value.localeCompare(b.value),
+            matches: typeof filterable === 'object' ? filterable.matcher : (text, context) => context.value.toLowerCase().includes(text.toLowerCase()),
+        });
+        return this;
     }
-    addBooleanColumn(valueHeaderDescriptor, value) {
-        return this.addColumn('boolean', valueHeaderDescriptor, value);
+    addNumberColumn(descriptorLike, value) {
+        const descriptor = coerceColumnDescriptor(descriptorLike, value);
+        const column = this.mapToColumn(descriptor);
+        this.columns.push({
+            ...column,
+            type: 'number',
+            value: descriptor.value,
+            sortable: computed(() => this._table.sortable() && (descriptor.sortable ?? true)),
+            filterable: computed(() => this._table.filterable() && (descriptor.filterable ?? true)),
+            compare: (a, b) => a.value - b.value,
+            matches: (text, context) => context.value === text,
+        });
+        return this;
     }
-    addStringColumn(valueHeaderDescriptor, value) {
-        return this.addColumn('string', valueHeaderDescriptor, value);
+    addBooleanColumn(descriptorLike, value) {
+        const descriptor = coerceColumnDescriptor(descriptorLike, value);
+        const column = this.mapToColumn(descriptor);
+        this.columns.push({
+            ...column,
+            type: 'boolean',
+            value: descriptor.value,
+            sortable: computed(() => this._table.sortable() && (descriptor.sortable ?? true)),
+            filterable: computed(() => this._table.filterable() && (descriptor.filterable ?? true)),
+            compare: (a, b) => a.value === b.value ? 0 : (a.value ? 1 : -1),
+            matches: (text, context) => context.value === text,
+        });
+        return this;
     }
-    addNumberColumn(valueHeaderDescriptor, value) {
-        return this.addColumn('number', valueHeaderDescriptor, value);
+    addComponentColumn(descriptor) {
+        // Require a filter matcher if filterable on an array datasource.
+        if (this._table.isArrayDatasource() && descriptor.filterable === true) {
+            throw Error('[ColumnDefinitionError] Component column requires a filter matcher in order to be filterable.');
+        }
+        // Require a sort comparator if sortable on an array datasource.
+        if (this._table.isArrayDatasource() && descriptor.sortable === true) {
+            throw Error('[ColumnDefinitionError] Component column requires a sort comparator in order to be sortable.');
+        }
+        const column = this.mapToColumn(descriptor);
+        this.columns.push({
+            ...column,
+            type: 'component',
+            component: descriptor.component,
+            sortable: computed(() => this._table.sortable() && !!descriptor.sortable),
+            filterable: computed(() => this._table.filterable() && !!descriptor.filterable),
+            compare: typeof descriptor.sortable === 'object' ? descriptor.sortable.comparator : () => 0,
+            matches: typeof descriptor.filterable === 'object' ? descriptor.filterable.matcher : () => true,
+            padding: descriptor.padding ?? true,
+        });
+        return this;
     }
-    addComponentColumn(config) {
-        // TODO [dwi] Normalize filterable and sortable and add default matcher/comparator to all columns
-        if (isSignal(this._descriptor.ɵdatasource) && (config.filterable === true || config.sortable === true)) {
-            throw Error('[ColumnDefinitionError] Component columns cannot have a auto filter or auto sort.');
-        }
-        return this.addColumn('component', config);
+    addTemplateColumn(descriptor) {
+        // Require a filter matcher if filterable on an array datasource.
+        if (this._table.isArrayDatasource() && descriptor.filterable === true) {
+            throw Error('[ColumnDefinitionError] Template column requires a filter matcher in order to be filterable.');
+        }
+        // Require a sort comparator if sortable on an array datasource.
+        if (this._table.isArrayDatasource() && descriptor.sortable === true) {
+            throw Error('[ColumnDefinitionError] Template column requires a sort comparator in order to be sortable.');
+        }
+        const column = this.mapToColumn(descriptor);
+        this.columns.push({
+            ...column,
+            type: 'template',
+            template: descriptor.template,
+            sortable: computed(() => this._table.sortable() && !!descriptor.sortable),
+            filterable: computed(() => this._table.filterable() && !!descriptor.filterable),
+            compare: typeof descriptor.sortable === 'object' ? descriptor.sortable.comparator : () => 0,
+            matches: typeof descriptor.filterable === 'object' ? descriptor.filterable.matcher : () => true,
+            padding: descriptor.padding ?? true,
+        });
+        return this;
     }
-    addTemplateColumn(config) {
-        if (isSignal(this._descriptor.ɵdatasource) && (config.filterable === true || config.sortable === true)) {
-            throw Error('[ColumnDefinitionError] Template columns cannot have a auto filter or auto sort.');
+    /**
+     * Maps given column descriptor to a {@link SciTableColumn}.
+     */
+    mapToColumn(descriptor) {
+        // Require a unique column name.
+        const name = descriptor.name ?? `column:${this.columns.length}`;
+        if (this.columns.find(column => column.name === name)) {
+            throw Error(`[ColumnDefinitionError] Column names must be unique. "${name}" is defined more than once.`);
         }
-        return this.addColumn('template', config);
-    }
-    addColumn(type, valueHeaderDescriptor, value) {
-        const config = (() => {
-            switch (typeof valueHeaderDescriptor) {
-                case 'string':
-                    return { header: valueHeaderDescriptor, value: value };
-                case 'function':
-                    return { value: valueHeaderDescriptor };
-                default:
-                    return valueHeaderDescriptor;
-            }
-        })();
-        if (!isSignal(this._descriptor.ɵdatasource) && (typeof config.sortable === 'object' || typeof config.filterable === 'object')) {
-            throw Error('[ColumnDefinitionError] Data sources with a loader function cannot define a custom sort or filter function. Sorting and filtering have to be done within the loader function.');
+        // Disallow a filter matcher if using a custom datasource.
+        if (!this._table.isArrayDatasource() && typeof descriptor.filterable === 'object') {
+            throw Error('[ColumnDefinitionError] Configuring a filter matcher is not supported for tables using a datasource. Filtering must be done by the datasource.');
         }
-        // Fallback to the column index as the column name.
-        const name = config.name ?? `column:${this.columns.length}`;
-        if (this.columns.find(column => column.name === name)) {
-            throw Error(`[ColumnDefinitionError] Column names have to be unique. "${name}" is defined more than once.`);
+        // Disallow a sort comparator if using a custom datasource.
+        if (!this._table.isArrayDatasource() && typeof descriptor.sortable === 'object') {
+            throw Error('[ColumnDefinitionError] Configuring a sort comparator is not supported for tables using a datasource. Sorting must be done by the datasource.');
         }
-        this.columns.push({ ...config, name, type });
-        return this;
+        return {
+            name: name,
+            header: coerceSignal(descriptor.header ?? ''),
+            resizable: computed(() => this._table.resizable() && (descriptor.resizable ?? true)),
+            width: computed(() => {
+                const userSettings = this._table.userSettings().columns?.find(column => column.name === name);
+                return userSettings?.width ? `${userSettings.width}px` : descriptor.width ?? '1fr';
+            }),
+            minWidth: descriptor.minWidth ?? 100,
+            resizing: signal(false),
+            padding: true,
+            location: { x: 0, width: 0 }, // set in `SciTableColumnComponent`
+        };
+    }
+}
+function coerceColumnDescriptor(argument1, argument2) {
+    switch (typeof argument1) {
+        case 'string':
+            return { header: argument1, value: argument2 };
+        case 'function':
+            return { value: argument1 };
+        default:
+            return argument1;
     }
 }
 
@@ -132,124 +217,153 @@ function provideTableStorage(storage) {
  * SPDX-License-Identifier: EPL-2.0
  */
 function arrayDatasource(data, columns) {
-    const cache = linkedSignal({ ...(ngDevMode ? { debugName: "cache" } : /* istanbul ignore next */ {}), source: () => ({ data: data(), columns: columns() }),
-        computation: () => new Map() });
-    const items$ = toObservable(computed(() => {
-        const resolvedColumns = columns();
-        const items = data().map(item => ({
-            item,
-            cells: resolvedColumns.reduce((acc, column) => acc.set(column.name, {
-                column,
-                value: column.type !== 'component' && column.type !== 'template' ? coerceSignal(column.value(item))() : undefined,
-            }), new Map()),
-        }));
-        return {
-            items,
-            columns: resolvedColumns,
-        };
-    }));
-    return (request) => {
-        const sortHash = request.sortCriteria.map(sc => `${sc.columnName}_${sc.direction}`).join('-');
-        const filterHash = request.columnFilters.map(fc => `${fc.columnName}_${fc.text}`).join('-');
-        const hash = `${sortHash}-${filterHash}-${request.tableFilter ?? ''}`;
-        if (!cache().has(hash)) {
-            const sortedAndFiltered$ = items$.pipe(map(({ items, columns }) => {
-                const sortCols = mapCriteria(request.sortCriteria, columns);
-                const filterCols = mapCriteria(request.columnFilters, columns);
-                return items
-                    .filter(item => columnFilter(item, filterCols) && globalFilter(item, request.tableFilter))
-                    .sort((a, b) => sort(a, b, sortCols));
-            }), shareReplay({ bufferSize: 1, refCount: true }));
-            // Only store one item in the cache.
-            // The cache is used for scrolling and multipage selection.
-            // It caches the data based on the current filter and sort.
-            cache.set(new Map().set(hash, sortedAndFiltered$));
-        }
-        return cache().get(hash).pipe(map(items => ({
-            totalCount: items.length,
-            items: items.slice(request.start, request.end).map(i => i.item),
+    const dataset = new Dataset(data, columns);
+    return markAsArrayDatasource((request) => {
+        dataset.columnFilters.set(request.columnFilters);
+        dataset.tableFilter.set(request.tableFilter);
+        dataset.sortCriteria.set(request.sortCriteria);
+        const totalCount = dataset.count;
+        const items = dataset.slice(request.start, request.end);
+        return toObservable(computed(() => ({
+            totalCount: totalCount(),
+            items: items(),
         })));
-    };
+    });
 }
-function mapCriteria(criteria, columns) {
-    return criteria.map(sc => {
-        const column = columns.find(c => sc.columnName === c.name);
-        return ({
-            ...sc,
-            column,
-        });
-    }).filter((sc) => sc.column !== undefined);
+/**
+ * Provides a filtered and sorted view on given data.
+ */
+class Dataset {
+    _dataview;
+    columnFilters = signal([], { ...(ngDevMode ? { debugName: "columnFilters" } : /* istanbul ignore next */ {}), equal: Objects.isEqual });
+    sortCriteria = signal([], { ...(ngDevMode ? { debugName: "sortCriteria" } : /* istanbul ignore next */ {}), equal: Objects.isEqual });
+    tableFilter = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableFilter" }] : /* istanbul ignore next */ []));
+    /**
+     * Returns the total count of items matching the current filters and search criteria.
+     */
+    count = computed(() => this._dataview().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    constructor(data, columns) {
+        const dataset = computed(() => data().map(item => ({
+            item,
+            cells: columns().reduce((cells, column) => cells.set(column.name, {
+                column: column,
+                value: 'value' in column ? coerceSignal(untracked(() => column.value(item)), { coerceUndefined: true })() : undefined,
+            }), new Map()),
+        })), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataset" }] : /* istanbul ignore next */ []));
+        // Memoize filtered/sorted view; recomputes only when dataset or criteria change, not when scrolling through the view, as sorting is an expensive operation.
+        this._dataview = computed(() => {
+            const rows = dataset();
+            const columnFilters = this.columnFilters();
+            const tableFilter = this.tableFilter();
+            const sortCriteria = this.sortCriteria();
+            // PERF: Do not track signals inside `Array.sort` to avoid Angular signal tracking overhead as the comparator runs repeatedly, degrading performance otherwise.
+            return untracked(() => rows
+                .filter(row => matchesRow(row, columnFilters) && matchesGlobalFilter(row, tableFilter ?? undefined))
+                .sort((a, b) => compareRows(a, b, sortCriteria)));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_dataview" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Returns a slice of the filtered and sorted data within the given range (start inclusive, end exclusive).
+     */
+    slice(start, end) {
+        return computed(() => this._dataview().slice(start, end).map(row => row.item));
+    }
 }
-function globalFilter(row, filter) {
+/**
+ * Tests whether a row matches the given global filter.
+ */
+function matchesGlobalFilter(row, filter) {
     if (!filter?.trim()) {
         return true;
     }
-    for (const column of row.cells.values()) {
-        const result = columnFilter(row, [{ text: filter, columnName: column.column.name, column: column.column }]);
-        // If any value includes the filter, it matches the filter.
-        if (result) {
+    for (const cell of row.cells.values()) {
+        const text = coerceFilterText(filter, { to: cell.column.type });
+        if (text === undefined) {
+            continue;
+        }
+        if (matchesRow(row, [{ text, columnName: cell.column.name }])) {
             return true;
         }
     }
     return false;
 }
-function columnFilter(row, filterCriteria) {
-    if (filterCriteria.length === 0) {
+/**
+ * Tests whether a row matches the given column filters.
+ */
+function matchesRow(row, columnFilters) {
+    if (!columnFilters.length) {
         return true;
     }
-    for (const criterion of filterCriteria) {
-        const value = row.cells.get(criterion.columnName)?.value;
-        const filter = (() => {
-            switch (criterion.column.type) {
-                case 'string':
-                    return criterion.column.filter(criterion.text, { item: row.item, value: value });
-                case 'number':
-                    return criterion.column.filter(criterion.text, { item: row.item, value: value });
-                case 'boolean':
-                    return criterion.column.filter(criterion.text, { item: row.item, value: value });
-                case 'component':
-                case 'template':
-                    return criterion.column.filter(criterion.text, { item: row.item, value: undefined });
-                default:
-                    return true;
-            }
-        })();
-        // all filters must match (for now)
-        if (!filter) {
+    for (const columnFilter of columnFilters) {
+        const cell = row.cells.get(columnFilter.columnName);
+        if (!cell.column.matches(columnFilter.text, { item: row.item, value: cell.value })) { // component and template columns have no value
             return false;
         }
     }
     return true;
 }
-function sort(a, b, sortCriteria) {
-    if (sortCriteria.length === 0) {
+/**
+ * Compares two rows based on the given sort criteria.
+ */
+function compareRows(row1, row2, sortCriteria) {
+    if (!sortCriteria.length) {
         return 0;
     }
     for (const criterion of sortCriteria) {
-        const aValue = a.cells.get(criterion.columnName)?.value;
-        const bValue = b.cells.get(criterion.columnName)?.value;
-        const sort = (() => {
-            switch (criterion.column.type) {
-                case 'string':
-                    return criterion.column.sort({ item: a.item, value: aValue }, { item: b.item, value: bValue });
-                case 'number':
-                    return criterion.column.sort({ item: a.item, value: aValue }, { item: b.item, value: bValue });
-                case 'boolean':
-                    return criterion.column.sort({ item: a.item, value: aValue }, { item: b.item, value: bValue });
-                case 'component':
-                case 'template':
-                    return criterion.column.sort({ item: a.item, value: undefined }, { item: b.item, value: undefined });
-                default:
-                    return 0;
-            }
-        })();
-        if (sort !== 0) {
-            const dir = criterion.direction === 'asc' ? 1 : -1;
-            return sort * dir;
+        const cell1 = row1.cells.get(criterion.columnName);
+        const cell2 = row2.cells.get(criterion.columnName);
+        const comparison = cell1.column.compare({ item: row1.item, value: cell1.value }, { item: row2.item, value: cell2.value });
+        if (comparison !== 0) {
+            const signum = criterion.direction === 'asc' ? 1 : -1;
+            return signum * comparison;
         }
     }
     return 0;
 }
+/**
+ * Checks whether given {@link SciTableDataLoaderFn} represents an {@link arrayDatasource}.
+ */
+function isArrayDatasource(loader) {
+    return ARRAY_DATASOURCE_MARKER in loader;
+}
+/**
+ * Marks given {@link SciTableDataLoaderFn} as an array data source.
+ */
+function markAsArrayDatasource(loader) {
+    Object.defineProperty(loader, ARRAY_DATASOURCE_MARKER, { value: true, writable: false, enumerable: false, configurable: false });
+    return loader;
+}
+/**
+ * Identifies a {@link SciTableDataLoaderFn} as an {@link arrayDatasource}.
+ */
+const ARRAY_DATASOURCE_MARKER = Symbol('ARRAY_DATASOURCE_HINT');
+/**
+ * Coerces the given filter text into the specified column data type.
+ */
+function coerceFilterText(text, options) {
+    switch (options.to) {
+        case 'number': {
+            const number = Number.parseFloat(text);
+            return !Number.isNaN(number) ? number : undefined;
+        }
+        case 'boolean': {
+            if (text === 'true' || text === '1') {
+                return true;
+            }
+            if (text === 'false' || text === '0') {
+                return false;
+            }
+            return undefined;
+        }
+        default: {
+            return text;
+        }
+    }
+}
 
 /*
  * Copyright (c) 2018-2026 Swiss Federal Railways
@@ -409,10 +523,12 @@ class ɵSciTable {
     scrolling;
     resizing = computed(() => this.columns().some(column => column.resizing()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resizing" }] : /* istanbul ignore next */ []));
-    sortCriteria = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "sortCriteria" }] : /* istanbul ignore next */ []));
-    filterCriteria = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "filterCriteria" }] : /* istanbul ignore next */ []));
+    sortCriteria = linkedSignal({ ...(ngDevMode ? { debugName: "sortCriteria" } : /* istanbul ignore next */ {}), source: () => this.columns(), // Discard stale criteria on column change.
+        computation: (columns, previous) => previous?.value.filter(criteria => columns.some(column => column.name === criteria.columnName)) ?? [],
+        equal: Objects.isEqual });
+    filterCriteria = linkedSignal({ ...(ngDevMode ? { debugName: "filterCriteria" } : /* istanbul ignore next */ {}), source: () => this.columns(), // Discard stale criteria on column change.
+        computation: (columns, previous) => previous?.value.filter(criteria => columns.some(column => column.name === criteria.columnName)) ?? [],
+        equal: Objects.isEqual });
     _cache = new SciTableCache();
     _tableFilter = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_tableFilter" }] : /* istanbul ignore next */ []));
@@ -494,9 +610,9 @@ class ɵSciTable {
             injector?.destroy();
             injector = createDestroyableInjector({ parent: this._injector });
             return runInInjectionContext(injector, () => {
-                const tableColumnFactory = new ɵSciTableColumnFactory(descriptor);
+                const tableColumnFactory = new ɵSciTableColumnFactory(this);
                 descriptor.columns(tableColumnFactory);
-                return untracked(() => tableColumnFactory.columns.map(column => this.initColumn(column.type, column)));
+                return tableColumnFactory.columns;
             });
         });
     }
@@ -573,7 +689,7 @@ class ɵSciTable {
             defaultValue: 0,
             params: () => this.tableViewRef()?.viewport,
             stream: ({ params: viewport }) => fromEvent(viewport, 'scroll', { passive: true })
-                .pipe(map$1(() => viewport.scrollTop), startWith(viewport.scrollTop), subscribeIn(fn => zone.runOutsideAngular(fn))),
+                .pipe(map(() => viewport.scrollTop), startWith(viewport.scrollTop), subscribeIn(fn => zone.runOutsideAngular(fn))),
         }).value;
     }
     /**
@@ -585,7 +701,7 @@ class ɵSciTable {
             defaultValue: false,
             params: () => this.tableViewRef()?.viewport,
             stream: ({ params: viewport }) => fromEvent(viewport, 'scroll', { passive: true })
-                .pipe(switchMap(() => concat(of(true), timer(150).pipe(map$1(() => false)))), startWith(false), subscribeIn(fn => zone.runOutsideAngular(fn))),
+                .pipe(switchMap(() => concat(of(true), timer(150).pipe(map(() => false)))), startWith(false), subscribeIn(fn => zone.runOutsideAngular(fn))),
         }).value;
     }
     /**
@@ -715,6 +831,14 @@ class ɵSciTable {
     updateSelectedItems(updateFn) {
         this._selectedItems.update(updateFn);
     }
+    /**
+     * Indicates whether the built-in array datasource is used.
+     *
+     * Supports out-of-the-box filtering and sorting for built-in table columns.
+     */
+    isArrayDatasource() {
+        return isArrayDatasource(this._dataLoaderFn);
+    }
     reset() {
         this._cache.clear();
         this.totalCount.set(undefined);
@@ -761,32 +885,6 @@ class ɵSciTable {
             this._cache.clear();
         });
     }
-    // TODO [dwi] Consider moving into factory
-    initColumn(type, config) {
-        // Columns with a custom component or template must provide a sort function to be sortable, because the default sort function does not work.
-        const sortable = type === 'component' || type === 'template' ? !!config.sortable : config.sortable !== false;
-        // Columns with a custom component or template must provide a filter function to be filterable, because the default filter function does not work.
-        const filterable = type === 'component' || type === 'template' ? !!config.filterable : config.filterable !== false;
-        return {
-            ...config,
-            type,
-            name: config.name,
-            filter: typeof config.filterable === 'object' ? config.filterable.matcher : defaultFilter,
-            sort: typeof config.sortable === 'object' ? config.sortable.comparator : defaultSort,
-            sortable: computed(() => this.sortable() && sortable),
-            filterable: computed(() => this.filterable() && filterable),
-            resizable: computed(() => this.resizable() && (config.resizable ?? true)),
-            padding: 'padding' in config ? (config.padding ?? true) : true,
-            header: coerceSignal(config.header ?? ''),
-            width: computed(() => {
-                const userSettings = this.userSettings().columns?.find(column => column.name === config.name);
-                return userSettings?.width ? `${userSettings.width}px` : config.width ?? '1fr';
-            }),
-            minWidth: config.minWidth ?? 100,
-            resizing: signal(false),
-            location: { x: 0, width: 0 }, // injected in `SciColumnComponent`
-        };
-    }
     mapItemsToRow(items, columns, pageStart) {
         return items.map((item, i) => {
             const id = this.trackBy(item);
@@ -855,32 +953,6 @@ class ɵSciTable {
         });
     }
 }
-function defaultFilter(text, { value }) {
-    if (typeof value !== typeof text) {
-        return false;
-    }
-    switch (typeof value) {
-        case 'string':
-            return value.toLowerCase().includes(text.toLowerCase());
-        default:
-            return text === value;
-    }
-}
-function defaultSort(a, b) {
-    if (typeof a.value !== typeof b.value) {
-        return 0;
-    }
-    switch (typeof a.value) {
-        case 'string':
-            return a.value.localeCompare(b.value);
-        case 'number':
-            return a.value - b.value;
-        case 'boolean':
-            return a.value === b.value ? 0 : (a.value ? 1 : -1);
-        default:
-            return 0;
-    }
-}
 /**
  * Gets pages by range and page size, or `null` if empty. End is exclusive.
  */
@@ -1489,7 +1561,7 @@ class SciTableRowComponent {
     onRowMouseLeave(event) {
         const next = event.relatedTarget;
         // Do not unset hovered row when hovering a column resize splitter.
-        if (next instanceof Element && next.closest('sci-column-splitter')) {
+        if (next instanceof Element && next.closest('sci-splitter')) {
             return;
         }
         this.table().hoveredIndex.set(-1);
@@ -1507,7 +1579,7 @@ class SciTableRowComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciTableRowComponent, isStandalone: true, selector: "sci-table-row", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { primaryAction: "primaryAction" }, host: { listeners: { "click": "onRowClick($event)", "dblclick": "onRowDblClick($event)", "mouseenter": "onRowMouseEnter()", "mouseleave": "onRowMouseLeave($event)" }, properties: { "attr.data-active": "row().active() ? '' : null", "attr.data-selected": "row().selected() ? '' : null", "attr.data-hovered": "row().hovered() ? '' : null", "class": "row().bindings?.cssClass?.()" } }, viewQueries: [{ propertyName: "rowActionToolbar", first: true, predicate: SciToolbarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let row = this.row();\n@for (cell of row.cells; track cell.column.name) {\n  <sci-table-cell [cell]=\"cell\" [row]=\"row\"/>\n} @empty {\n  @for (column of table().columns(); track column.name) {\n    <div class=\"skeleton e2e-skeleton\" [attr.data-column]=\"column.name\"></div>\n  }\n}\n\n@let hasRowActions = !!table().rowActions;\n@let isRowHovered = table().hoveredRow() === row;\n@let isRowActionMenuOpen = rowActionToolbar()?.menuOpen();\n\n@if (hasRowActions && (isRowHovered || isRowActionMenuOpen)) {\n  <!--eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <sci-toolbar [name]=\"rowActionsToolbarName\" (click)=\"onActionToolbarClick($event)\" class=\"row-actions\"/>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-grid;grid-template-columns:subgrid;grid-auto-rows:var(--sci-table-row-height);align-items:stretch;-webkit-user-select:none;user-select:none;border-bottom:var(--\\275sci-table-border-size) solid var(--sci-table-gridline-color)}:host[data-hovered]{background-color:var(--sci-table-row-background-color-hover)}:host[data-selected]{background-color:var(--sci-table-row-background-color-selected);--\\275sci-table-row-selected: true}:host[data-hovered]:not([data-selected]){border-radius:var(--sci-table-row-border-radius)}:host:is(:first-child,:not([data-selected])+sci-table-row)[data-selected]{border-top-left-radius:var(--sci-table-row-border-radius);border-top-right-radius:var(--sci-table-row-border-radius)}:host[data-selected]:not(:has(+sci-table-row[data-selected])){border-bottom-left-radius:var(--sci-table-row-border-radius);border-bottom-right-radius:var(--sci-table-row-border-radius)}@container (style(--\\275sci-table-scrolling: true)) or (style(--\\275sci-table-resizing: true)){:host{pointer-events:none}}:host:has(>div.skeleton){pointer-events:none;align-items:center}:host:has(>div.skeleton)>div.skeleton{display:inline-block;position:relative;overflow:hidden;border-radius:var(--sci-corner-small);background-color:var(--sci-color-skeleton-subtle)}:host:has(>div.skeleton)>div.skeleton:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(to right,transparent 0,color-mix(in srgb,light-dark(var(--sci-static-color-white),var(--sci-static-color-black)) 30%,transparent) 50%,transparent);animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}:host:has(>div.skeleton)>div.skeleton{height:1em;margin-inline:var(--\\275sci-table-cell-padding-inline)}:host>sci-toolbar.row-actions{position:sticky;right:0;transform:translate(calc(-1 * var(--\\275sci-table-cell-padding-inline)));justify-self:end;align-self:center;border-radius:var(--sci-corner);padding:1px;background-color:var(--\\275sci-table-row-action-background-color);z-index:2;--sci-toolbar-item-background-color-hover: color-mix(in srgb, var(--\\275sci-table-row-action-background-color) 85%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--sci-toolbar-item-background-color-active: color-mix(in srgb, var(--\\275sci-table-row-action-background-color) 75%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)))}@container not style(--\\275sci-table-row-selected: true){:host>sci-toolbar.row-actions{--\\275sci-table-row-action-background-color: var(--sci-table-row-action-background-color)}}@container style(--\\275sci-table-row-selected: true){:host>sci-toolbar.row-actions{--\\275sci-table-row-action-background-color: var(--sci-table-row-action-background-color-selected)}}:host>sci-toolbar.row-actions:empty{display:none}\n"], dependencies: [{ kind: "component", type: SciTableCellComponent, selector: "sci-table-cell", inputs: ["cell", "row"] }, { kind: "component", type: SciToolbarComponent, selector: "sci-toolbar", inputs: ["name", "orientation", "context", "acceleratorTarget", "popoverViewContainerRef"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciTableRowComponent, isStandalone: true, selector: "sci-table-row", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { primaryAction: "primaryAction" }, host: { listeners: { "click": "onRowClick($event)", "dblclick": "onRowDblClick($event)", "mouseenter": "onRowMouseEnter()", "mouseleave": "onRowMouseLeave($event)" }, properties: { "attr.data-active": "row().active() ? '' : null", "attr.data-selected": "row().selected() ? '' : null", "attr.data-hovered": "row().hovered() ? '' : null", "class": "row().bindings?.cssClass?.()" } }, viewQueries: [{ propertyName: "rowActionToolbar", first: true, predicate: SciToolbarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let row = this.row();\n@for (cell of row.cells; track cell.column.name) {\n  <sci-table-cell [cell]=\"cell\" [row]=\"row\"/>\n} @empty {\n  @for (column of table().columns(); track column.name) {\n    <div class=\"skeleton e2e-skeleton\" [attr.data-column]=\"column.name\"></div>\n  }\n}\n\n@let hasRowActions = !!table().rowActions;\n@let isRowHovered = table().hoveredRow() === row;\n@let isRowActionMenuOpen = rowActionToolbar()?.menuOpen();\n\n@if (hasRowActions && (isRowHovered || isRowActionMenuOpen)) {\n  <!--eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <sci-toolbar [name]=\"rowActionsToolbarName\" (click)=\"onActionToolbarClick($event)\" class=\"row-actions\"/>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-grid;grid-template-columns:subgrid;grid-auto-rows:var(--sci-table-row-height);align-items:stretch;-webkit-user-select:none;user-select:none;border-bottom:var(--\\275sci-table-border-size) solid var(--sci-table-gridline-color)}:host[data-hovered]{background-color:var(--sci-table-row-background-color-hover)}:host[data-selected]{background-color:var(--sci-table-row-background-color-selected);--\\275sci-table-row-selected: true}:host[data-hovered]:not([data-selected]){border-radius:var(--sci-table-row-border-radius)}:host:is(:first-child,:not([data-selected])+sci-table-row)[data-selected]{border-top-left-radius:var(--sci-table-row-border-radius);border-top-right-radius:var(--sci-table-row-border-radius)}:host[data-selected]:not(:has(+sci-table-row[data-selected])){border-bottom-left-radius:var(--sci-table-row-border-radius);border-bottom-right-radius:var(--sci-table-row-border-radius)}@container (style(--\\275sci-table-scrolling: true)) or (style(--\\275sci-table-resizing: true)){:host{pointer-events:none}}:host:has(>div.skeleton){pointer-events:none;align-items:center}:host:has(>div.skeleton)>div.skeleton{display:inline-block;position:relative;overflow:hidden;border-radius:var(--sci-corner-small);background-color:var(--sci-color-skeleton-subtle);opacity:0;animation-name:visiblity;animation-duration:0s;animation-delay:50ms;animation-fill-mode:forwards}:host:has(>div.skeleton)>div.skeleton:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(to right,transparent 0,color-mix(in srgb,light-dark(var(--sci-static-color-white),var(--sci-static-color-black)) 30%,transparent) 50%,transparent);animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}@keyframes visiblity{to{opacity:1}}:host:has(>div.skeleton)>div.skeleton{height:1em;margin-inline:var(--\\275sci-table-cell-padding-inline)}:host>sci-toolbar.row-actions{position:sticky;right:0;transform:translate(calc(-1 * var(--\\275sci-table-cell-padding-inline)));justify-self:end;align-self:center;border-radius:var(--sci-corner);padding:1px;background-color:var(--\\275sci-table-row-action-background-color);z-index:2;--sci-toolbar-item-background-color-hover: color-mix(in srgb, var(--\\275sci-table-row-action-background-color) 85%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--sci-toolbar-item-background-color-active: color-mix(in srgb, var(--\\275sci-table-row-action-background-color) 75%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)))}@container not style(--\\275sci-table-row-selected: true){:host>sci-toolbar.row-actions{--\\275sci-table-row-action-background-color: var(--sci-table-row-action-background-color)}}@container style(--\\275sci-table-row-selected: true){:host>sci-toolbar.row-actions{--\\275sci-table-row-action-background-color: var(--sci-table-row-action-background-color-selected)}}:host>sci-toolbar.row-actions:empty{display:none}\n"], dependencies: [{ kind: "component", type: SciTableCellComponent, selector: "sci-table-cell", inputs: ["cell", "row"] }, { kind: "component", type: SciToolbarComponent, selector: "sci-toolbar", inputs: ["name", "orientation", "context", "acceleratorTarget", "popoverViewContainerRef"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableRowComponent, decorators: [{
             type: Component,
@@ -1523,7 +1595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '(dblclick)': 'onRowDblClick($event)',
                         '(mouseenter)': 'onRowMouseEnter()',
                         '(mouseleave)': 'onRowMouseLeave($event)',
-                    }, template: "@let row = this.row();\n@for (cell of row.cells; track cell.column.name) {\n  <sci-table-cell [cell]=\"cell\" [row]=\"row\"/>\n} @empty {\n  @for (column of table().columns(); track column.name) {\n    <div class=\"skeleton e2e-skeleton\" [attr.data-column]=\"column.name\"></div>\n  }\n}\n\n@let hasRowActions = !!table().rowActions;\n@let isRowHovered = table().hoveredRow() === row;\n@let isRowActionMenuOpen = rowActionToolbar()?.menuOpen();\n\n@if (hasRowActions && (isRowHovered || isRowActionMenuOpen)) {\n  <!--eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <sci-toolbar [name]=\"rowActionsToolbarName\" (click)=\"onActionToolbarClick($event)\" class=\"row-actions\"/>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-grid;grid-template-columns:subgrid;grid-auto-rows:var(--sci-table-row-height);align-items:stretch;-webkit-user-select:none;user-select:none;border-bottom:var(--\\275sci-table-border-size) solid var(--sci-table-gridline-color)}:host[data-hovered]{background-color:var(--sci-table-row-background-color-hover)}:host[data-selected]{background-color:var(--sci-table-row-background-color-selected);--\\275sci-table-row-selected: true}:host[data-hovered]:not([data-selected]){border-radius:var(--sci-table-row-border-radius)}:host:is(:first-child,:not([data-selected])+sci-table-row)[data-selected]{border-top-left-radius:var(--sci-table-row-border-radius);border-top-right-radius:var(--sci-table-row-border-radius)}:host[data-selected]:not(:has(+sci-table-row[data-selected])){border-bottom-left-radius:var(--sci-table-row-border-radius);border-bottom-right-radius:var(--sci-table-row-border-radius)}@container (style(--\\275sci-table-scrolling: true)) or (style(--\\275sci-table-resizing: true)){:host{pointer-events:none}}:host:has(>div.skeleton){pointer-events:none;align-items:center}:host:has(>div.skeleton)>div.skeleton{display:inline-block;position:relative;overflow:hidden;border-radius:var(--sci-corner-small);background-color:var(--sci-color-skeleton-subtle)}:host:has(>div.skeleton)>div.skeleton:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(to right,transparent 0,color-mix(in srgb,light-dark(var(--sci-static-color-white),var(--sci-static-color-black)) 30%,transparent) 50%,transparent);animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}:host:has(>div.skeleton)>div.skeleton{height:1em;margin-inline:var(--\\275sci-table-cell-padding-inline)}:host>sci-toolbar.row-actions{position:sticky;right:0;transform:translate(calc(-1 * var(--\\275sci-table-cell-padding-inline)));justify-self:end;align-self:center;border-radius:var(--sci-corner);padding:1px;background-color:var(--\\275sci-table-row-action-background-color);z-index:2;--sci-toolbar-item-background-color-hover: color-mix(in srgb, var(--\\275sci-table-row-action-background-color) 85%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--sci-toolbar-item-background-color-active: color-mix(in srgb, var(--\\275sci-table-row-action-background-color) 75%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)))}@container not style(--\\275sci-table-row-selected: true){:host>sci-toolbar.row-actions{--\\275sci-table-row-action-background-color: var(--sci-table-row-action-background-color)}}@container style(--\\275sci-table-row-selected: true){:host>sci-toolbar.row-actions{--\\275sci-table-row-action-background-color: var(--sci-table-row-action-background-color-selected)}}:host>sci-toolbar.row-actions:empty{display:none}\n"] }]
+                    }, template: "@let row = this.row();\n@for (cell of row.cells; track cell.column.name) {\n  <sci-table-cell [cell]=\"cell\" [row]=\"row\"/>\n} @empty {\n  @for (column of table().columns(); track column.name) {\n    <div class=\"skeleton e2e-skeleton\" [attr.data-column]=\"column.name\"></div>\n  }\n}\n\n@let hasRowActions = !!table().rowActions;\n@let isRowHovered = table().hoveredRow() === row;\n@let isRowActionMenuOpen = rowActionToolbar()?.menuOpen();\n\n@if (hasRowActions && (isRowHovered || isRowActionMenuOpen)) {\n  <!--eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <sci-toolbar [name]=\"rowActionsToolbarName\" (click)=\"onActionToolbarClick($event)\" class=\"row-actions\"/>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-grid;grid-template-columns:subgrid;grid-auto-rows:var(--sci-table-row-height);align-items:stretch;-webkit-user-select:none;user-select:none;border-bottom:var(--\\275sci-table-border-size) solid var(--sci-table-gridline-color)}:host[data-hovered]{background-color:var(--sci-table-row-background-color-hover)}:host[data-selected]{background-color:var(--sci-table-row-background-color-selected);--\\275sci-table-row-selected: true}:host[data-hovered]:not([data-selected]){border-radius:var(--sci-table-row-border-radius)}:host:is(:first-child,:not([data-selected])+sci-table-row)[data-selected]{border-top-left-radius:var(--sci-table-row-border-radius);border-top-right-radius:var(--sci-table-row-border-radius)}:host[data-selected]:not(:has(+sci-table-row[data-selected])){border-bottom-left-radius:var(--sci-table-row-border-radius);border-bottom-right-radius:var(--sci-table-row-border-radius)}@container (style(--\\275sci-table-scrolling: true)) or (style(--\\275sci-table-resizing: true)){:host{pointer-events:none}}:host:has(>div.skeleton){pointer-events:none;align-items:center}:host:has(>div.skeleton)>div.skeleton{display:inline-block;position:relative;overflow:hidden;border-radius:var(--sci-corner-small);background-color:var(--sci-color-skeleton-subtle);opacity:0;animation-name:visiblity;animation-duration:0s;animation-delay:50ms;animation-fill-mode:forwards}:host:has(>div.skeleton)>div.skeleton:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(to right,transparent 0,color-mix(in srgb,light-dark(var(--sci-static-color-white),var(--sci-static-color-black)) 30%,transparent) 50%,transparent);animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}@keyframes visiblity{to{opacity:1}}:host:has(>div.skeleton)>div.skeleton{height:1em;margin-inline:var(--\\275sci-table-cell-padding-inline)}:host>sci-toolbar.row-actions{position:sticky;right:0;transform:translate(calc(-1 * var(--\\275sci-table-cell-padding-inline)));justify-self:end;align-self:center;border-radius:var(--sci-corner);padding:1px;background-color:var(--\\275sci-table-row-action-background-color);z-index:2;--sci-toolbar-item-background-color-hover: color-mix(in srgb, var(--\\275sci-table-row-action-background-color) 85%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)));--sci-toolbar-item-background-color-active: color-mix(in srgb, var(--\\275sci-table-row-action-background-color) 75%, light-dark(var(--sci-static-color-black), var(--sci-static-color-white)))}@container not style(--\\275sci-table-row-selected: true){:host>sci-toolbar.row-actions{--\\275sci-table-row-action-background-color: var(--sci-table-row-action-background-color)}}@container style(--\\275sci-table-row-selected: true){:host>sci-toolbar.row-actions{--\\275sci-table-row-action-background-color: var(--sci-table-row-action-background-color-selected)}}:host>sci-toolbar.row-actions:empty{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], primaryAction: [{ type: i0.Output, args: ["primaryAction"] }], rowActionToolbar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SciToolbarComponent), { isSignal: true }] }] } });
 
 /*
@@ -2214,7 +2286,7 @@ class SciTableComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciTableComponent, isStandalone: true, selector: "sci-table", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { primaryAction: "primaryAction" }, host: { properties: { "attr.name": "name()", "style.--\u0275sci-table-scrolling": "table().scrolling() ? `true` : null", "style.--\u0275sci-table-resizing": "table().resizing() ? `true` : null" } }, providers: [
             provideSciTable(),
             SciTableSelectionService,
-        ], viewQueries: [{ propertyName: "_viewport", first: true, predicate: SciTableViewportComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_viewportClient", first: true, predicate: SciTableGridComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_tableHeader", first: true, predicate: SciTableHeaderComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_tableBody", first: true, predicate: SciTableBodyComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_itemSizeSyntheticElement", first: true, predicate: ["item_size_synthetic_element"], descendants: true, isSignal: true }, { propertyName: "_cellPaddingSyntheticElement", first: true, predicate: ["cell_padding_synthetic_element"], descendants: true, isSignal: true }, { propertyName: "rows", predicate: SciTableRowComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let table = this.table();\n\n<sci-table-viewport #viewport>\n  <sci-table-grid>\n    <!-- Table header -->\n    @if (table.showHeader() || table.filterable()) {\n      <sci-table-header/>\n    }\n\n    <!-- Table body -->\n    <sci-table-body sciTableKeyboardNavigator>\n      @if (!table.error()) {\n        <!-- Track index to reuse the table row elements -->\n        @for (row of table.rows(); track $index) {\n          <sci-table-row [row]=\"row\" (primaryAction)=\"onRowPrimaryAction($event)\" [sciAttributes]=\"row.bindings?.attributes()\"/>\n        } @empty {\n          <span class=\"message e2e-no-data\">{{('%scion.components.no_items.message' | sciText)()}}</span>\n        }\n      } @else {\n        <span class=\"message e2e-datasource\">\n          {{('%scion.components.datasource_error.message' | sciText)()}}\n\n          <button (click)=\"onRetry()\" class=\"action e2e-datasource-retry\">\n            <!-- TODO [dwi] Replace with SCION icon -->\n            <sci-icon>refresh</sci-icon>\n            <span>{{('%scion.components.retry.label' | sciText)()}}</span>\n          </button>\n        </span>\n      }\n\n      <!-- Render active row outline separately to preserve row border-radius within block selection. -->\n      @if (table.activeRow()) {\n        <div class=\"active-row-outline e2e-active-row-outline\"></div>\n      }\n    </sci-table-body>\n\n    <!-- Render column splitters. -->\n    <sci-table-columns [rows]=\"rows()\"/>\n  </sci-table-grid>\n</sci-table-viewport>\n\n<!-- Scrollbars -->\n<sci-scrollbar direction=\"hscroll\" [viewport]=\"viewport.host\"/>\n<sci-scrollbar direction=\"vscroll\" [viewport]=\"viewport.host\"/>\n\n@if (table.loading()) {\n  <sci-throbber type=\"spinner\"/>\n}\n\n<!-- Synthetic element to compute the absolute pixel value of the `--sci-table-row-height`, relative to the table's font size if em-based. -->\n<div class=\"synthetic item-size\" #item_size_synthetic_element></div>\n\n<!-- Synthetic element to compute the absolute pixel value of the `--sci-table-cell-padding-inline`, relative to the table's font size if em-based. -->\n<div class=\"synthetic cell-padding\" #cell_padding_synthetic_element></div>\n", styles: ["@charset \"UTF-8\";:host{display:block;overflow:hidden;--\\275sci-table-border-size: 1px;--\\275sci-table-border-color: var(--sci-color-border)}:host:is(:not(:hover):not(:active),:host(:not(:hover):not(:active))) sci-scrollbar:not(.scrolling){opacity:0}:host>sci-table-viewport{display:block;position:relative;height:100%;overflow:auto;scrollbar-width:none;isolation:isolate;box-sizing:border-box;anchor-name:--sci-table-viewport}:host>sci-table-viewport:has(sci-table-header){--\\275sci-table-header-visible: true}:host>sci-table-viewport:has(sci-table-header>sci-column-header){--\\275sci-column-header-visible: true}:host>sci-table-viewport:has(~sci-scrollbar.scrolling){--\\275sci-table-scrolling: true}:host>sci-table-viewport>sci-table-grid{display:grid;grid-template-columns:var(--\\275sci-table-columns, repeat(auto-fit, 0)) 0;grid-auto-rows:min-content;grid-template-rows:min-content 1fr;width:min-content;min-width:100%;min-height:100%}@container not style(--\\275sci-table-header-visible: true){:host>sci-table-viewport>sci-table-grid{grid-template-rows:1fr}}:host>sci-table-viewport>sci-table-grid>sci-table-header{z-index:1;grid-row:1;grid-column:1/-1;position:sticky;top:0}:host>sci-table-viewport>sci-table-grid>sci-table-body{anchor-name:--sci-table-body;grid-row:2}@container not style(--\\275sci-table-header-visible: true){:host>sci-table-viewport>sci-table-grid>sci-table-body{grid-row:1}}:host>sci-table-viewport>sci-table-grid>sci-table-body{display:grid;grid-template-columns:subgrid;grid-column:1/-1;grid-auto-rows:var(--sci-table-row-height);outline:none;padding-top:var(--\\275sci-table-virtual-scroll-offset-top);padding-bottom:var(--\\275sci-table-virtual-scroll-offset-bottom)}:host>sci-table-viewport>sci-table-grid>sci-table-body>sci-table-row{grid-column:1/-1}:host>sci-table-viewport>sci-table-grid>sci-table-body>sci-table-row[data-active]{anchor-name:--sci-table-active-row}:host>sci-table-viewport>sci-table-grid>sci-table-body>div.active-row-outline{position:absolute;top:anchor(--sci-table-active-row top);right:anchor(--sci-table-active-row right);bottom:anchor(--sci-table-active-row bottom);left:anchor(--sci-table-active-row left);border:var(--sci-table-row-outline-width) var(--sci-table-row-outline-style) var(--sci-table-row-outline-color);border-radius:var(--sci-table-row-border-radius);pointer-events:none}:host>sci-table-viewport>sci-table-grid>sci-table-body:not(:has(sci-table-row[data-active]))>div.active-row-outline{display:none}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message{grid-column:1/-1;grid-row:auto/span 2;justify-self:center;align-self:center;display:flex;flex-direction:column;align-items:center;gap:1em;-webkit-user-select:none;user-select:none;white-space:nowrap;color:var(--sci-color-text-subtle)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message:has(button.action){grid-row:auto/span 4}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action{all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-button-border-radius);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-button-cursor);--sci-icon-size: var(--sci-button-icon-size)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:hover:where(:not(:disabled)){background-color:var(--sci-button-background-color-hover)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:active:where(:not(:disabled)){background-color:var(--sci-button-background-color-active)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:focus:not(:focus-visible){outline:none}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:focus-visible{outline:var(--sci-button-outline-width) solid var(--sci-color-accent)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:disabled{color:var(--sci-button-text-color-disabled)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action{border:1px solid var(--sci-color-border);padding:.25em 1em}@container style(--\\275sci-table-viewport-client-width > --\\275sci-table-viewport-width){:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message{position:sticky;left:50%;right:50%;width:0}}:host>sci-table-viewport>sci-table-grid>sci-table-body:has(>span.message){z-index:2}:host>sci-table-viewport>sci-table-grid>sci-table-columns{grid-area:1/1/-1/-1;z-index:1;position:sticky;top:0;max-height:var(--\\275sci-table-viewport-height)}:host>sci-scrollbar{position:absolute}:host>sci-scrollbar[direction=vscroll]{top:calc(anchor(--sci-table-body top) + 2px);right:calc(anchor(--sci-table-viewport right) + 2px);bottom:calc(anchor(--sci-table-viewport bottom) + 2px)}:host>sci-scrollbar[direction=hscroll]{left:calc(anchor(--sci-table-viewport left) + 2px);bottom:calc(anchor(--sci-table-viewport bottom) + 1px);right:calc(anchor(--sci-table-viewport right) + 2px)}@container style(--\\275sci-table-resizing: true){:host>sci-scrollbar{pointer-events:none}}:host>sci-throbber{--sci-throbber-size: 16px;position:absolute;top:calc(anchor(--sci-table-viewport top) + .5em);right:calc(anchor(--sci-table-viewport right) + .5em)}:host>div.synthetic{position:absolute;pointer-events:none;visibility:hidden}:host>div.synthetic.item-size{height:var(--sci-table-row-height)}:host>div.synthetic.cell-padding{width:var(--sci-table-cell-padding-inline)}\n"], dependencies: [{ kind: "component", type: SciTableViewportComponent, selector: "sci-table-viewport" }, { kind: "component", type: SciTableHeaderComponent, selector: "sci-table-header" }, { kind: "component", type: SciTableGridComponent, selector: "sci-table-grid" }, { kind: "component", type: SciTableBodyComponent, selector: "sci-table-body" }, { kind: "component", type: SciTableRowComponent, selector: "sci-table-row", inputs: ["row"], outputs: ["primaryAction"] }, { kind: "component", type: SciTableColumnsComponent, selector: "sci-table-columns", inputs: ["rows"] }, { kind: "directive", type: SciTableKeyboardNavigatorDirective, selector: "[sciTableKeyboardNavigator]" }, { kind: "directive", type: SciAttributesDirective, selector: "[sciAttributes]", inputs: ["sciAttributes"] }, { kind: "component", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }, { kind: "component", type: SciThrobberComponent, selector: "sci-throbber", inputs: ["type"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "pipe", type: SciTextPipe, name: "sciText" }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+        ], viewQueries: [{ propertyName: "_viewport", first: true, predicate: SciTableViewportComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_viewportClient", first: true, predicate: SciTableGridComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_tableHeader", first: true, predicate: SciTableHeaderComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_tableBody", first: true, predicate: SciTableBodyComponent, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_itemSizeSyntheticElement", first: true, predicate: ["item_size_synthetic_element"], descendants: true, isSignal: true }, { propertyName: "_cellPaddingSyntheticElement", first: true, predicate: ["cell_padding_synthetic_element"], descendants: true, isSignal: true }, { propertyName: "rows", predicate: SciTableRowComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let table = this.table();\n\n<sci-table-viewport #viewport>\n  <sci-table-grid>\n    <!-- Table header -->\n    @if (table.showHeader() || table.filterable()) {\n      <sci-table-header/>\n    }\n\n    <!-- Table body -->\n    <sci-table-body sciTableKeyboardNavigator>\n      @if (!table.error()) {\n        <!-- Track index to reuse the table row elements -->\n        @for (row of table.rows(); track $index) {\n          <sci-table-row [row]=\"row\" (primaryAction)=\"onRowPrimaryAction($event)\" [sciAttributes]=\"row.bindings?.attributes()\"/>\n        } @empty {\n          <span class=\"message e2e-no-data\">{{('%scion.components.no_items.message' | sciText)()}}</span>\n        }\n      } @else {\n        <span class=\"message e2e-datasource\">\n          {{('%scion.components.datasource_error.message' | sciText)()}}\n\n          <button (click)=\"onRetry()\" class=\"action e2e-datasource-retry\">\n            <!-- TODO [dwi] Replace with SCION icon -->\n            <sci-icon>refresh</sci-icon>\n            <span>{{('%scion.components.retry.label' | sciText)()}}</span>\n          </button>\n        </span>\n      }\n\n      <!-- Render active row outline separately to preserve row border-radius within block selection. -->\n      @if (table.activeRow()) {\n        <div class=\"active-row-outline e2e-active-row-outline\"></div>\n      }\n    </sci-table-body>\n\n    <!-- Render column splitters. -->\n    <sci-table-columns [rows]=\"rows()\"/>\n  </sci-table-grid>\n</sci-table-viewport>\n\n<!-- Scrollbars -->\n<sci-scrollbar direction=\"hscroll\" [viewport]=\"viewport.host\"/>\n<sci-scrollbar direction=\"vscroll\" [viewport]=\"viewport.host\"/>\n\n@if (table.loading()) {\n  <sci-throbber type=\"spinner\"/>\n}\n\n<!-- Synthetic element to compute the absolute pixel value of the `--sci-table-row-height`, relative to the table's font size if em-based. -->\n<div class=\"synthetic item-size\" #item_size_synthetic_element></div>\n\n<!-- Synthetic element to compute the absolute pixel value of the `--sci-table-cell-padding-inline`, relative to the table's font size if em-based. -->\n<div class=\"synthetic cell-padding\" #cell_padding_synthetic_element></div>\n", styles: ["@charset \"UTF-8\";:host{display:block;overflow:hidden;--\\275sci-table-border-size: 1px;--\\275sci-table-border-color: var(--sci-color-border)}:host:is(:not(:hover):not(:active),:host(:not(:hover):not(:active))) sci-scrollbar:not(.scrolling){opacity:0}:host>sci-table-viewport{display:block;position:relative;height:100%;overflow:auto;scrollbar-width:none;isolation:isolate;box-sizing:border-box;anchor-name:--sci-table-viewport}:host>sci-table-viewport:has(sci-table-header){--\\275sci-table-header-visible: true}:host>sci-table-viewport:has(sci-table-header>sci-column-header){--\\275sci-column-header-visible: true}:host>sci-table-viewport:has(~sci-scrollbar.scrolling){--\\275sci-table-scrolling: true}:host>sci-table-viewport>sci-table-grid{display:grid;grid-template-columns:var(--\\275sci-table-columns, repeat(auto-fit, 100px)) 0;grid-auto-rows:min-content;grid-template-rows:min-content 1fr;width:min-content;min-width:100%;min-height:100%}@container not style(--\\275sci-table-header-visible: true){:host>sci-table-viewport>sci-table-grid{grid-template-rows:1fr}}:host>sci-table-viewport>sci-table-grid>sci-table-header{z-index:1;grid-row:1;grid-column:1/-1;position:sticky;top:0}:host>sci-table-viewport>sci-table-grid>sci-table-body{anchor-name:--sci-table-body;grid-row:2}@container not style(--\\275sci-table-header-visible: true){:host>sci-table-viewport>sci-table-grid>sci-table-body{grid-row:1}}:host>sci-table-viewport>sci-table-grid>sci-table-body{display:grid;grid-template-columns:subgrid;grid-column:1/-1;grid-auto-rows:var(--sci-table-row-height);outline:none;padding-top:var(--\\275sci-table-virtual-scroll-offset-top);padding-bottom:var(--\\275sci-table-virtual-scroll-offset-bottom)}:host>sci-table-viewport>sci-table-grid>sci-table-body>sci-table-row{grid-column:1/-1}:host>sci-table-viewport>sci-table-grid>sci-table-body>sci-table-row[data-active]{anchor-name:--sci-table-active-row}:host>sci-table-viewport>sci-table-grid>sci-table-body>div.active-row-outline{position:absolute;top:anchor(--sci-table-active-row top);right:anchor(--sci-table-active-row right);bottom:anchor(--sci-table-active-row bottom);left:anchor(--sci-table-active-row left);border:var(--sci-table-row-outline-width) var(--sci-table-row-outline-style) var(--sci-table-row-outline-color);border-radius:var(--sci-table-row-border-radius);pointer-events:none}:host>sci-table-viewport>sci-table-grid>sci-table-body:not(:has(sci-table-row[data-active]))>div.active-row-outline{display:none}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message{grid-column:1/-1;grid-row:auto/span 2;justify-self:center;align-self:center;display:flex;flex-direction:column;align-items:center;gap:1em;-webkit-user-select:none;user-select:none;white-space:nowrap;color:var(--sci-color-text-subtle)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message:has(button.action){grid-row:auto/span 4}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action{all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-button-border-radius);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-button-cursor);--sci-icon-size: var(--sci-button-icon-size)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:hover:where(:not(:disabled)){background-color:var(--sci-button-background-color-hover)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:active:where(:not(:disabled)){background-color:var(--sci-button-background-color-active)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:focus:not(:focus-visible){outline:none}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:focus-visible{outline:var(--sci-button-outline-width) solid var(--sci-color-accent)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:disabled{color:var(--sci-button-text-color-disabled)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action{border:1px solid var(--sci-color-border);padding:.25em 1em}@container style(--\\275sci-table-viewport-client-width > --\\275sci-table-viewport-width){:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message{position:sticky;left:50%;right:50%;width:0}}:host>sci-table-viewport>sci-table-grid>sci-table-body:has(>span.message){z-index:2}:host>sci-table-viewport>sci-table-grid>sci-table-columns{grid-area:1/1/-1/-1;z-index:1;position:sticky;top:0;max-height:var(--\\275sci-table-viewport-height)}:host>sci-scrollbar{position:absolute}:host>sci-scrollbar[direction=vscroll]{top:calc(anchor(--sci-table-body top) + 2px);right:calc(anchor(--sci-table-viewport right) + 2px);bottom:calc(anchor(--sci-table-viewport bottom) + 2px)}:host>sci-scrollbar[direction=hscroll]{left:calc(anchor(--sci-table-viewport left) + 2px);bottom:calc(anchor(--sci-table-viewport bottom) + 1px);right:calc(anchor(--sci-table-viewport right) + 2px)}@container style(--\\275sci-table-resizing: true){:host>sci-scrollbar{pointer-events:none}}:host>sci-throbber{--sci-throbber-size: 16px;position:absolute;top:calc(anchor(--sci-table-viewport top) + .5em);right:calc(anchor(--sci-table-viewport right) + .5em)}:host>div.synthetic{position:absolute;pointer-events:none;visibility:hidden}:host>div.synthetic.item-size{height:var(--sci-table-row-height)}:host>div.synthetic.cell-padding{width:var(--sci-table-cell-padding-inline)}\n"], dependencies: [{ kind: "component", type: SciTableViewportComponent, selector: "sci-table-viewport" }, { kind: "component", type: SciTableHeaderComponent, selector: "sci-table-header" }, { kind: "component", type: SciTableGridComponent, selector: "sci-table-grid" }, { kind: "component", type: SciTableBodyComponent, selector: "sci-table-body" }, { kind: "component", type: SciTableRowComponent, selector: "sci-table-row", inputs: ["row"], outputs: ["primaryAction"] }, { kind: "component", type: SciTableColumnsComponent, selector: "sci-table-columns", inputs: ["rows"] }, { kind: "directive", type: SciTableKeyboardNavigatorDirective, selector: "[sciTableKeyboardNavigator]" }, { kind: "directive", type: SciAttributesDirective, selector: "[sciAttributes]", inputs: ["sciAttributes"] }, { kind: "component", type: SciScrollbarComponent, selector: "sci-scrollbar", inputs: ["direction", "viewport"] }, { kind: "component", type: SciThrobberComponent, selector: "sci-throbber", inputs: ["type"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "pipe", type: SciTextPipe, name: "sciText" }], encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableComponent, decorators: [{
             type: Component,
@@ -2238,7 +2310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     ], providers: [
                         provideSciTable(),
                         SciTableSelectionService,
-                    ], template: "@let table = this.table();\n\n<sci-table-viewport #viewport>\n  <sci-table-grid>\n    <!-- Table header -->\n    @if (table.showHeader() || table.filterable()) {\n      <sci-table-header/>\n    }\n\n    <!-- Table body -->\n    <sci-table-body sciTableKeyboardNavigator>\n      @if (!table.error()) {\n        <!-- Track index to reuse the table row elements -->\n        @for (row of table.rows(); track $index) {\n          <sci-table-row [row]=\"row\" (primaryAction)=\"onRowPrimaryAction($event)\" [sciAttributes]=\"row.bindings?.attributes()\"/>\n        } @empty {\n          <span class=\"message e2e-no-data\">{{('%scion.components.no_items.message' | sciText)()}}</span>\n        }\n      } @else {\n        <span class=\"message e2e-datasource\">\n          {{('%scion.components.datasource_error.message' | sciText)()}}\n\n          <button (click)=\"onRetry()\" class=\"action e2e-datasource-retry\">\n            <!-- TODO [dwi] Replace with SCION icon -->\n            <sci-icon>refresh</sci-icon>\n            <span>{{('%scion.components.retry.label' | sciText)()}}</span>\n          </button>\n        </span>\n      }\n\n      <!-- Render active row outline separately to preserve row border-radius within block selection. -->\n      @if (table.activeRow()) {\n        <div class=\"active-row-outline e2e-active-row-outline\"></div>\n      }\n    </sci-table-body>\n\n    <!-- Render column splitters. -->\n    <sci-table-columns [rows]=\"rows()\"/>\n  </sci-table-grid>\n</sci-table-viewport>\n\n<!-- Scrollbars -->\n<sci-scrollbar direction=\"hscroll\" [viewport]=\"viewport.host\"/>\n<sci-scrollbar direction=\"vscroll\" [viewport]=\"viewport.host\"/>\n\n@if (table.loading()) {\n  <sci-throbber type=\"spinner\"/>\n}\n\n<!-- Synthetic element to compute the absolute pixel value of the `--sci-table-row-height`, relative to the table's font size if em-based. -->\n<div class=\"synthetic item-size\" #item_size_synthetic_element></div>\n\n<!-- Synthetic element to compute the absolute pixel value of the `--sci-table-cell-padding-inline`, relative to the table's font size if em-based. -->\n<div class=\"synthetic cell-padding\" #cell_padding_synthetic_element></div>\n", styles: ["@charset \"UTF-8\";:host{display:block;overflow:hidden;--\\275sci-table-border-size: 1px;--\\275sci-table-border-color: var(--sci-color-border)}:host:is(:not(:hover):not(:active),:host(:not(:hover):not(:active))) sci-scrollbar:not(.scrolling){opacity:0}:host>sci-table-viewport{display:block;position:relative;height:100%;overflow:auto;scrollbar-width:none;isolation:isolate;box-sizing:border-box;anchor-name:--sci-table-viewport}:host>sci-table-viewport:has(sci-table-header){--\\275sci-table-header-visible: true}:host>sci-table-viewport:has(sci-table-header>sci-column-header){--\\275sci-column-header-visible: true}:host>sci-table-viewport:has(~sci-scrollbar.scrolling){--\\275sci-table-scrolling: true}:host>sci-table-viewport>sci-table-grid{display:grid;grid-template-columns:var(--\\275sci-table-columns, repeat(auto-fit, 0)) 0;grid-auto-rows:min-content;grid-template-rows:min-content 1fr;width:min-content;min-width:100%;min-height:100%}@container not style(--\\275sci-table-header-visible: true){:host>sci-table-viewport>sci-table-grid{grid-template-rows:1fr}}:host>sci-table-viewport>sci-table-grid>sci-table-header{z-index:1;grid-row:1;grid-column:1/-1;position:sticky;top:0}:host>sci-table-viewport>sci-table-grid>sci-table-body{anchor-name:--sci-table-body;grid-row:2}@container not style(--\\275sci-table-header-visible: true){:host>sci-table-viewport>sci-table-grid>sci-table-body{grid-row:1}}:host>sci-table-viewport>sci-table-grid>sci-table-body{display:grid;grid-template-columns:subgrid;grid-column:1/-1;grid-auto-rows:var(--sci-table-row-height);outline:none;padding-top:var(--\\275sci-table-virtual-scroll-offset-top);padding-bottom:var(--\\275sci-table-virtual-scroll-offset-bottom)}:host>sci-table-viewport>sci-table-grid>sci-table-body>sci-table-row{grid-column:1/-1}:host>sci-table-viewport>sci-table-grid>sci-table-body>sci-table-row[data-active]{anchor-name:--sci-table-active-row}:host>sci-table-viewport>sci-table-grid>sci-table-body>div.active-row-outline{position:absolute;top:anchor(--sci-table-active-row top);right:anchor(--sci-table-active-row right);bottom:anchor(--sci-table-active-row bottom);left:anchor(--sci-table-active-row left);border:var(--sci-table-row-outline-width) var(--sci-table-row-outline-style) var(--sci-table-row-outline-color);border-radius:var(--sci-table-row-border-radius);pointer-events:none}:host>sci-table-viewport>sci-table-grid>sci-table-body:not(:has(sci-table-row[data-active]))>div.active-row-outline{display:none}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message{grid-column:1/-1;grid-row:auto/span 2;justify-self:center;align-self:center;display:flex;flex-direction:column;align-items:center;gap:1em;-webkit-user-select:none;user-select:none;white-space:nowrap;color:var(--sci-color-text-subtle)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message:has(button.action){grid-row:auto/span 4}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action{all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-button-border-radius);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-button-cursor);--sci-icon-size: var(--sci-button-icon-size)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:hover:where(:not(:disabled)){background-color:var(--sci-button-background-color-hover)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:active:where(:not(:disabled)){background-color:var(--sci-button-background-color-active)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:focus:not(:focus-visible){outline:none}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:focus-visible{outline:var(--sci-button-outline-width) solid var(--sci-color-accent)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:disabled{color:var(--sci-button-text-color-disabled)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action{border:1px solid var(--sci-color-border);padding:.25em 1em}@container style(--\\275sci-table-viewport-client-width > --\\275sci-table-viewport-width){:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message{position:sticky;left:50%;right:50%;width:0}}:host>sci-table-viewport>sci-table-grid>sci-table-body:has(>span.message){z-index:2}:host>sci-table-viewport>sci-table-grid>sci-table-columns{grid-area:1/1/-1/-1;z-index:1;position:sticky;top:0;max-height:var(--\\275sci-table-viewport-height)}:host>sci-scrollbar{position:absolute}:host>sci-scrollbar[direction=vscroll]{top:calc(anchor(--sci-table-body top) + 2px);right:calc(anchor(--sci-table-viewport right) + 2px);bottom:calc(anchor(--sci-table-viewport bottom) + 2px)}:host>sci-scrollbar[direction=hscroll]{left:calc(anchor(--sci-table-viewport left) + 2px);bottom:calc(anchor(--sci-table-viewport bottom) + 1px);right:calc(anchor(--sci-table-viewport right) + 2px)}@container style(--\\275sci-table-resizing: true){:host>sci-scrollbar{pointer-events:none}}:host>sci-throbber{--sci-throbber-size: 16px;position:absolute;top:calc(anchor(--sci-table-viewport top) + .5em);right:calc(anchor(--sci-table-viewport right) + .5em)}:host>div.synthetic{position:absolute;pointer-events:none;visibility:hidden}:host>div.synthetic.item-size{height:var(--sci-table-row-height)}:host>div.synthetic.cell-padding{width:var(--sci-table-cell-padding-inline)}\n"] }]
+                    ], template: "@let table = this.table();\n\n<sci-table-viewport #viewport>\n  <sci-table-grid>\n    <!-- Table header -->\n    @if (table.showHeader() || table.filterable()) {\n      <sci-table-header/>\n    }\n\n    <!-- Table body -->\n    <sci-table-body sciTableKeyboardNavigator>\n      @if (!table.error()) {\n        <!-- Track index to reuse the table row elements -->\n        @for (row of table.rows(); track $index) {\n          <sci-table-row [row]=\"row\" (primaryAction)=\"onRowPrimaryAction($event)\" [sciAttributes]=\"row.bindings?.attributes()\"/>\n        } @empty {\n          <span class=\"message e2e-no-data\">{{('%scion.components.no_items.message' | sciText)()}}</span>\n        }\n      } @else {\n        <span class=\"message e2e-datasource\">\n          {{('%scion.components.datasource_error.message' | sciText)()}}\n\n          <button (click)=\"onRetry()\" class=\"action e2e-datasource-retry\">\n            <!-- TODO [dwi] Replace with SCION icon -->\n            <sci-icon>refresh</sci-icon>\n            <span>{{('%scion.components.retry.label' | sciText)()}}</span>\n          </button>\n        </span>\n      }\n\n      <!-- Render active row outline separately to preserve row border-radius within block selection. -->\n      @if (table.activeRow()) {\n        <div class=\"active-row-outline e2e-active-row-outline\"></div>\n      }\n    </sci-table-body>\n\n    <!-- Render column splitters. -->\n    <sci-table-columns [rows]=\"rows()\"/>\n  </sci-table-grid>\n</sci-table-viewport>\n\n<!-- Scrollbars -->\n<sci-scrollbar direction=\"hscroll\" [viewport]=\"viewport.host\"/>\n<sci-scrollbar direction=\"vscroll\" [viewport]=\"viewport.host\"/>\n\n@if (table.loading()) {\n  <sci-throbber type=\"spinner\"/>\n}\n\n<!-- Synthetic element to compute the absolute pixel value of the `--sci-table-row-height`, relative to the table's font size if em-based. -->\n<div class=\"synthetic item-size\" #item_size_synthetic_element></div>\n\n<!-- Synthetic element to compute the absolute pixel value of the `--sci-table-cell-padding-inline`, relative to the table's font size if em-based. -->\n<div class=\"synthetic cell-padding\" #cell_padding_synthetic_element></div>\n", styles: ["@charset \"UTF-8\";:host{display:block;overflow:hidden;--\\275sci-table-border-size: 1px;--\\275sci-table-border-color: var(--sci-color-border)}:host:is(:not(:hover):not(:active),:host(:not(:hover):not(:active))) sci-scrollbar:not(.scrolling){opacity:0}:host>sci-table-viewport{display:block;position:relative;height:100%;overflow:auto;scrollbar-width:none;isolation:isolate;box-sizing:border-box;anchor-name:--sci-table-viewport}:host>sci-table-viewport:has(sci-table-header){--\\275sci-table-header-visible: true}:host>sci-table-viewport:has(sci-table-header>sci-column-header){--\\275sci-column-header-visible: true}:host>sci-table-viewport:has(~sci-scrollbar.scrolling){--\\275sci-table-scrolling: true}:host>sci-table-viewport>sci-table-grid{display:grid;grid-template-columns:var(--\\275sci-table-columns, repeat(auto-fit, 100px)) 0;grid-auto-rows:min-content;grid-template-rows:min-content 1fr;width:min-content;min-width:100%;min-height:100%}@container not style(--\\275sci-table-header-visible: true){:host>sci-table-viewport>sci-table-grid{grid-template-rows:1fr}}:host>sci-table-viewport>sci-table-grid>sci-table-header{z-index:1;grid-row:1;grid-column:1/-1;position:sticky;top:0}:host>sci-table-viewport>sci-table-grid>sci-table-body{anchor-name:--sci-table-body;grid-row:2}@container not style(--\\275sci-table-header-visible: true){:host>sci-table-viewport>sci-table-grid>sci-table-body{grid-row:1}}:host>sci-table-viewport>sci-table-grid>sci-table-body{display:grid;grid-template-columns:subgrid;grid-column:1/-1;grid-auto-rows:var(--sci-table-row-height);outline:none;padding-top:var(--\\275sci-table-virtual-scroll-offset-top);padding-bottom:var(--\\275sci-table-virtual-scroll-offset-bottom)}:host>sci-table-viewport>sci-table-grid>sci-table-body>sci-table-row{grid-column:1/-1}:host>sci-table-viewport>sci-table-grid>sci-table-body>sci-table-row[data-active]{anchor-name:--sci-table-active-row}:host>sci-table-viewport>sci-table-grid>sci-table-body>div.active-row-outline{position:absolute;top:anchor(--sci-table-active-row top);right:anchor(--sci-table-active-row right);bottom:anchor(--sci-table-active-row bottom);left:anchor(--sci-table-active-row left);border:var(--sci-table-row-outline-width) var(--sci-table-row-outline-style) var(--sci-table-row-outline-color);border-radius:var(--sci-table-row-border-radius);pointer-events:none}:host>sci-table-viewport>sci-table-grid>sci-table-body:not(:has(sci-table-row[data-active]))>div.active-row-outline{display:none}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message{grid-column:1/-1;grid-row:auto/span 2;justify-self:center;align-self:center;display:flex;flex-direction:column;align-items:center;gap:1em;-webkit-user-select:none;user-select:none;white-space:nowrap;color:var(--sci-color-text-subtle)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message:has(button.action){grid-row:auto/span 4}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action{all:unset;display:inline-grid;place-content:center;place-items:center;padding:.25em;border-radius:var(--sci-button-border-radius);-webkit-user-select:none;user-select:none;overflow:hidden;cursor:var(--sci-button-cursor);--sci-icon-size: var(--sci-button-icon-size)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:hover:where(:not(:disabled)){background-color:var(--sci-button-background-color-hover)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:active:where(:not(:disabled)){background-color:var(--sci-button-background-color-active)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:focus:not(:focus-visible){outline:none}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:focus-visible{outline:var(--sci-button-outline-width) solid var(--sci-color-accent)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action:disabled{color:var(--sci-button-text-color-disabled)}:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message>button.action{border:1px solid var(--sci-color-border);padding:.25em 1em}@container style(--\\275sci-table-viewport-client-width > --\\275sci-table-viewport-width){:host>sci-table-viewport>sci-table-grid>sci-table-body>span.message{position:sticky;left:50%;right:50%;width:0}}:host>sci-table-viewport>sci-table-grid>sci-table-body:has(>span.message){z-index:2}:host>sci-table-viewport>sci-table-grid>sci-table-columns{grid-area:1/1/-1/-1;z-index:1;position:sticky;top:0;max-height:var(--\\275sci-table-viewport-height)}:host>sci-scrollbar{position:absolute}:host>sci-scrollbar[direction=vscroll]{top:calc(anchor(--sci-table-body top) + 2px);right:calc(anchor(--sci-table-viewport right) + 2px);bottom:calc(anchor(--sci-table-viewport bottom) + 2px)}:host>sci-scrollbar[direction=hscroll]{left:calc(anchor(--sci-table-viewport left) + 2px);bottom:calc(anchor(--sci-table-viewport bottom) + 1px);right:calc(anchor(--sci-table-viewport right) + 2px)}@container style(--\\275sci-table-resizing: true){:host>sci-scrollbar{pointer-events:none}}:host>sci-throbber{--sci-throbber-size: 16px;position:absolute;top:calc(anchor(--sci-table-viewport top) + .5em);right:calc(anchor(--sci-table-viewport right) + .5em)}:host>div.synthetic{position:absolute;pointer-events:none;visibility:hidden}:host>div.synthetic.item-size{height:var(--sci-table-row-height)}:host>div.synthetic.cell-padding{width:var(--sci-table-cell-padding-inline)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: true }] }], primaryAction: [{ type: i0.Output, args: ["primaryAction"] }], _viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SciTableViewportComponent), { ...{ read: ElementRef }, isSignal: true }] }], _viewportClient: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SciTableGridComponent), { ...{ read: ElementRef }, isSignal: true }] }], _tableHeader: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SciTableHeaderComponent), { ...{ read: ElementRef }, isSignal: true }] }], _tableBody: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SciTableBodyComponent), { ...{ read: ElementRef }, isSignal: true }] }], _itemSizeSyntheticElement: [{ type: i0.ViewChild, args: ['item_size_synthetic_element', { isSignal: true }] }], _cellPaddingSyntheticElement: [{ type: i0.ViewChild, args: ['cell_padding_synthetic_element', { isSignal: true }] }], rows: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SciTableRowComponent), { isSignal: true }] }] } });
 function provideSciTable() {
     return {