@scion/components 22.5.0 → 22.7.0

package/fesm2022/scion-components-table.mjs

@@ -1,24 +1,328 @@
 import * as i0 from '@angular/core';
-import { computed, inject, DEFAULT_CURRENCY_CODE, signal, InjectionToken, makeEnvironmentProviders, Injector, DestroyRef, runInInjectionContext, onIdle, Injectable, untracked, linkedSignal, isSignal, NgZone, effect, resource, assertNotInReactiveContext, assertInInjectionContext, Pipe, input, Component, output, viewChild, Directive, afterNextRender, ElementRef, debounced, viewChildren, ViewEncapsulation } from '@angular/core';
-import { coerceSignal, SCI_LOCALE, createDestroyableInjector, toLazyObservable, SciComponentOutletDirective, SciAttributesDirective } from '@scion/components/common';
-import { formatDate, DATE_PIPE_DEFAULT_OPTIONS, NgTemplateOutlet } from '@angular/common';
-import { toObservable, rxResource, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Objects, clamp, runSafe, Observables, Arrays } from '@scion/toolkit/util';
+import { signal, inject, Injector, computed, DestroyRef, untracked, runInInjectionContext, onIdle, Injectable, DEFAULT_CURRENCY_CODE, InjectionToken, linkedSignal, isSignal, NgZone, effect, resource, assertNotInReactiveContext, assertInInjectionContext, Pipe, input, Component, output, viewChild, Directive, afterNextRender, ElementRef, debounced, viewChildren, ViewEncapsulation } from '@angular/core';
+import { toObservable, rxResource } from '@angular/core/rxjs-interop';
 import { LatestTaskExecutor } from '@scion/toolkit/common';
-import { fromEvent, switchMap, concat, of, timer, firstValueFrom, defaultIfEmpty, throwError, combineLatestWith, tap, skip } from 'rxjs';
-import { map, startWith, first } from 'rxjs/operators';
-import { subscribeIn } from '@scion/toolkit/operators';
+import { Arrays, Observables, Objects, clamp } from '@scion/toolkit/util';
+import * as i1 from '@scion/components/common';
+import { ɵSingleActiveInjectorFactory as _SingleActiveInjectorFactory, coerceSignal, SCI_LOCALE, SCI_COMPONENTS_STORAGE, ɵcreateDestroyableInjector as _createDestroyableInjector, toLazyObservable, SciComponentOutletDirective, SciTooltipOnOverflowDirective, TOOLTIP_ON_OVERFLOW_DIRECTIVE_ADDITIONAL_TEXT, TOOLTIP_ON_OVERFLOW_DIRECTIVE_SOURCE_ELEMENT, SciAttributesDirective } from '@scion/components/common';
+import { mapArray, subscribeIn } from '@scion/toolkit/operators';
+import { formatDate, DATE_PIPE_DEFAULT_OPTIONS, NgTemplateOutlet } from '@angular/common';
+import { text, SciTextPipe } from '@scion/components/text';
+import { catchError, fromEvent, switchMap, concat, of, timer, combineLatestWith, finalize, firstValueFrom, skip } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
 import { SciScrollbarComponent } from '@scion/components/viewport';
 import { dimension } from '@scion/components/dimension';
 import { SciIconComponent } from '@scion/components/icon';
 import { SciToolbarComponent, contributeMenu, ɵSciMenuService as _SciMenuService } from '@scion/components/menu';
 import { UUID } from '@scion/toolkit/uuid';
 import { SciSplitterComponent } from '@scion/components/splitter';
-import { text, SciTextPipe } from '@scion/components/text';
 import { SciThrobberComponent } from '@scion/components/throbber';
-import * as i1 from '@angular/forms';
+import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
+/** @inheritDoc */
+class ɵSciTableCellValuePreloader {
+    _executor = new LatestTaskExecutor();
+    _queue = new Array(); // PERF: Do not change to signal to avoid array re-allocation on enqueue (expensive); queue size is tracked via a separate signal.
+    _queueSize = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_queueSize" }] : /* istanbul ignore next */ []));
+    _injector = inject(Injector);
+    /** @inheritDoc */
+    loading = computed(() => this._queueSize() > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    constructor() {
+        inject(DestroyRef).onDestroy(() => {
+            this._executor.destroy();
+            this.clear();
+        });
+    }
+    /** @inheritDoc */
+    queue(cellValueFn) {
+        this._queue.push(cellValueFn);
+        this._queueSize.update(size => size + 1);
+        this._executor.submit(() => this.whenIdle().then(() => this.preloadQueuedBatch(PRELOAD_BATCH_SIZE)));
+    }
+    /** @inheritDoc */
+    clear() {
+        this._queue.length = 0;
+        untracked(() => this._queueSize.set(0));
+    }
+    /**
+     * Preloads the next batch of queued cell values, FIFO, then, if the queue is not empty, schedules the next batch.
+     */
+    async preloadQueuedBatch(batchSize) {
+        this._queue.splice(0, batchSize).forEach(fn => fn());
+        this._queueSize.set(this._queue.length);
+        // Preload next batch when idle again.
+        if (this._queue.length) {
+            this._executor.submit(() => this.whenIdle().then(() => this.preloadQueuedBatch(PRELOAD_BATCH_SIZE)));
+        }
+    }
+    /**
+     * Resolves when the browser becomes idle.
+     *
+     * @see onIdle
+     */
+    whenIdle() {
+        return runInInjectionContext(this._injector, onIdle);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ɵSciTableCellValuePreloader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ɵSciTableCellValuePreloader });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ɵSciTableCellValuePreloader, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+const PRELOAD_BATCH_SIZE = 50_000;
+
+/**
+ * Preloads cell values in the background when the browser is idle. This prevents lag with large datasets, in particular
+ * for expensive computations like formatting dates and generating ISO 8601 strings, providing faster sort and filter performance.
+ *
+ * If a cell's value is requested before background preloading finishes, it is computed synchronously.
+ */
+class SciTableCellValuePreloader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableCellValuePreloader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableCellValuePreloader, providedIn: 'root', useClass: ɵSciTableCellValuePreloader });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableCellValuePreloader, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root', useClass: ɵSciTableCellValuePreloader }]
+        }] });
+
+/*
+ * Copyright (c) 2018-2026 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+class SciInMemoryTableDatasource {
+    _rows;
+    constructor(data, table, options) {
+        const tableCellValuePreloader = inject(SciTableCellValuePreloader);
+        const injectorFactory = new _SingleActiveInjectorFactory();
+        this._rows = computed(() => {
+            // Create new value function injector, releasing resources allocated in column value functions.
+            const injector = injectorFactory.create();
+            // Cancel preloading of previous data.
+            tableCellValuePreloader.clear();
+            return data()
+                .flatMap(item => createRow(item))
+                .reduce((map, row) => map.set(row.id, row), new Map());
+            function createRow(item, parent) {
+                const id = table.trackBy(item);
+                return [
+                    {
+                        id,
+                        parentId: parent?.id,
+                        item,
+                        cells: table.columns().reduce((cells, column) => untracked(() => {
+                            // PERF: Cell values are computed lazily (on idle or first use) to defer expensive computations like date formatting.
+                            const tableCellValue = 'value' in column ? new eSciTableCellValue(tableCellValuePreloader, () => runInInjectionContext(injector, () => column.value(item)())) : undefined;
+                            return cells.set(column.name, {
+                                column: column,
+                                value: () => tableCellValue?.value(),
+                            });
+                        }), new Map()),
+                    },
+                    // Child rows if a tree structure.
+                    ...options?.children?.(item).flatMap(child => createRow(child, { id })) ?? [],
+                ];
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_rows" }] : /* istanbul ignore next */ []));
+    }
+    getTreeTableNodes(query) {
+        return toObservable(computed(() => {
+            const rows = this._rows();
+            // 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.values()]
+                .filter(row => matchesRow(row, query.columnFilters, { coerceEnumValueToArray: true }) && matchesGlobalFilter(row, query.tableFilter, { coerceEnumValueToArray: false }))
+                .sort((a, b) => compareRows(a, b, query.sortCriteria))
+                .map(row => ({ id: row.id, parentId: row.parentId })));
+        }));
+    }
+    getItems(ids) {
+        return toObservable(computed(() => ids.flatMap(id => this._rows().has(id) ? this._rows().get(id).item : [])));
+    }
+}
+/**
+ * Tests whether a row matches the given global filter.
+ */
+function matchesGlobalFilter(row, filter, options) {
+    if (!filter?.trim()) {
+        return true;
+    }
+    for (const cell of row.cells.values()) {
+        const text = cell.column.type === 'number' ? toNumber(filter) : filter;
+        if (text === undefined) {
+            continue;
+        }
+        if (matchesRow(row, [{ text, columnName: cell.column.name }], options)) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Tests whether a row matches the given column filters.
+ */
+function matchesRow(row, columnFilters, options) {
+    if (!columnFilters.length) {
+        return true;
+    }
+    for (const columnFilter of columnFilters) {
+        const cell = row.cells.get(columnFilter.columnName);
+        if ('value' in cell.column && cell.value() === undefined) { // Component and template columns have no value.
+            return false;
+        }
+        const filter = cell.column.type === 'enum' && options.coerceEnumValueToArray ? Arrays.coerce(columnFilter.text) : columnFilter.text;
+        if (!cell.column.matches(filter, { item: row.item, value: cell.value() })) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * 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 cell1 = row1.cells.get(criterion.columnName);
+        const cell2 = row2.cells.get(criterion.columnName);
+        const value1 = cell1.value();
+        const value2 = cell2.value();
+        // Always place `undefined` values at the end, independent of the sort direction. Note that component and template columns have no value.
+        if (value1 === undefined && value2 !== undefined) {
+            return 1;
+        }
+        if (value2 === undefined && value1 !== undefined) {
+            return -1;
+        }
+        // Prevent calling comparator for value columns where both values are undefined. Note that component and template columns have no value.
+        if (value1 === undefined && value2 === undefined && 'value' in cell1.column) {
+            return 0;
+        }
+        const comparison = cell1.column.compare({ item: row1.item, value: value1 }, { item: row2.item, value: value2 });
+        if (comparison !== 0) {
+            return criterion.direction === 'asc' ? comparison : -comparison;
+        }
+    }
+    return 0;
+}
+/**
+ * Converts the given string to a number, or `undefined` if it cannot be parsed.
+ */
+function toNumber(numberLike) {
+    const number = Number.parseFloat(numberLike);
+    return !Number.isNaN(number) ? number : undefined;
+}
+/**
+ * Provides lazy loading for the cell's value, preloading it when idle for better sort/filter performance.
+ *
+ * The value is computed at most once, whether it gets preloaded during idle time or requested synchronously via {@link value()}.
+ */
+class eSciTableCellValue {
+    _valueFn;
+    _value;
+    constructor(preloader, _valueFn) {
+        this._valueFn = _valueFn;
+        preloader.queue(() => {
+            this._value ??= this._valueFn();
+        });
+    }
+    value() {
+        return this._value ??= untracked(() => this._valueFn());
+    }
+}
+
+/*
+ * Copyright (c) 2018-2026 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Provides an in-memory datasource for {@link SciTable} with built-in filtering and sorting.
+ *
+ * A datasource provides data to {@link SciTable}, passing each item to columns for display. For a tree structure, additionally pass a child selector to the datasource.
+ *
+ * This datasource requires all data to be loaded upfront. The datasource filters and sorts data in memory.
+ *
+ * Custom columns must configure a filter matcher and sort comparator to be filterable and sortable.
+ *
+ * For large datasets requiring pagination or server-side filtering and sorting, prefer implementing a custom datasource using {@link ɵprovideTableDatasource}.
+ *
+ * @example - Usage
+ * ```ts
+ * import {table, provideTableDatasource} from '@scion/components/table';
+ * import {httpResource} from '@angular/common/http';
+ *
+ * const users = httpResource<User[]>(() => '/api/users', {defaultValue: []});
+ *
+ * table({
+ *   datasource: provideTableDatasource(users.value),
+ *   columns: table => table.addStringColumn('Name', user => user.name),
+ * });
+ * ```
+ *
+ * @example - Displaying hierarchical data
+ * ```ts
+ * import {table, provideTableDatasource} from '@scion/components/table';
+ * import {httpResource} from '@angular/common/http';
+ *
+ * const users = httpResource<User[]>(() => '/api/users', {defaultValue: []});
+ *
+ * table({
+ *   datasource: provideTableDatasource(users.value, user => user.children),
+ *   columns: table => table.addStringColumn('Name', user => user.name),
+ * });
+ * ```
+ *
+ * @param data - Provides items to display in the table, or root items if displaying a tree structure.
+ * @param children - Function required to display a tree structure, returning an item's children or an empty array if the item has no children or is a leaf.
+ *                   Called eagerly for each item when initializing the table, inside a reactive context that re-evaluates when tracked signals change.
+ *
+ * @see SciTableDescriptor.datasource
+ */
+function provideTableDatasource(data, children) {
+    return {
+        [eSCI_TABLE_DATASOURCE_PROVIDER]: (table) => new SciInMemoryTableDatasource(data, table, { children }),
+    };
+}
+function ɵprovideTableDatasource(datasource) {
+    const isTreeTableDatesource = 'getTreeTableNodes' in datasource;
+    return {
+        [eSCI_TABLE_DATASOURCE_PROVIDER]: () => ({
+            getTreeTableNodes: (query) => isTreeTableDatesource ? datasource.getTreeTableNodes(query) : Observables.coerce(datasource.getIds(query)).pipe(mapArray(id => ({ id }))),
+            getItems: (ids) => datasource.getItems(ids),
+        }),
+    };
+}
+/**
+ * Symbol for providing a {@link SciTreeTableDatasource}.
+ */
+const eSCI_TABLE_DATASOURCE_PROVIDER = Symbol('eSCI_TABLE_DATASOURCE_PROVIDER');
+
+/*
+ * Copyright (c) 2018-2026 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+const skeletonRowId = Symbol('SKELETON_ROW');
+
 /**
  * Creates a {@link SciDateValue} from the given date-like input.
  *
@@ -78,6 +382,39 @@ function ensureIso8601DatePrefix(isoDate) {
     }
 }
 
+/*
+ * Copyright (c) 2018-2026 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+/**
+ * Creates a {@link SciEnumValue} from the given enum-like input.
+ */
+function coerceEnumValue(enumLike, options) {
+    const value = coerceSignal(enumLike, { coerceUndefined: true });
+    const enumeration = coerceSignal(options.enumeration);
+    const enumEntry = computed(() => value() !== undefined ? enumeration().find(entry => entry.value === value()) : undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enumEntry" }] : /* istanbul ignore next */ []));
+    const label = text(computed(() => enumEntry()?.label), { injector: options.injector ?? inject(Injector) });
+    const tooltip = text(computed(() => enumEntry()?.tooltip), { injector: options.injector ?? inject(Injector) });
+    return computed(() => {
+        if (!enumEntry()) {
+            return undefined;
+        }
+        return {
+            value: enumEntry().value,
+            label: label(),
+            icon: enumEntry().icon,
+            // Use tooltip if provided, or fall back to label, but only if it is not configured for display.
+            tooltip: tooltip() ?? (tooltip() === null || options.format.label ? undefined : label()),
+        };
+    });
+}
+
 /*
  * Copyright (c) 2018-2026 Swiss Federal Railways
  *
@@ -101,7 +438,7 @@ class ɵSciTableColumnFactory {
         this.columns.push({
             ...column,
             type: 'string',
-            value: item => coerceSignal(descriptor.value(item), { coerceUndefined: true }),
+            value: item => text(descriptor.value(item)),
             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),
@@ -128,15 +465,16 @@ class ɵSciTableColumnFactory {
     }
     addBooleanColumn(descriptorLike, value) {
         const descriptor = coerceColumnDescriptor(descriptorLike, value);
-        const column = this.mapToColumn(descriptor);
-        this.columns.push({
-            ...column,
-            type: 'boolean',
+        this.addEnumColumn({
+            ...descriptor,
             value: item => coerceSignal(descriptor.value(item), { coerceUndefined: true }),
-            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,
+            values: [
+                { value: true, icon: 'scion:true', label: '%scion:components:yes.value', tooltip: null },
+                { value: false, icon: 'scion:false', label: '%scion:components:no.value', tooltip: null },
+            ],
+            format: { icon: true },
+            filterable: descriptor.filterable === false ? false : 'single',
+            referenceType: 'boolean',
         });
         return this;
     }
@@ -161,392 +499,141 @@ class ɵSciTableColumnFactory {
         });
         return this;
     }
-    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.');
-        }
+    addEnumColumn(descriptor) {
         const column = this.mapToColumn(descriptor);
+        const enumeration = coerceSignal(descriptor.values);
+        const positionByEnumValue = computed(() => enumeration().reduce((acc, entry, index) => acc.set(entry.value, index), new Map()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "positionByEnumValue" }] : /* istanbul ignore next */ []));
+        const format = descriptor.format
+            ? { icon: descriptor.format.icon ?? false, label: descriptor.format.label ?? false, filter: { icon: descriptor.format.filter?.icon ?? false } } // eslint-disable-line @stylistic/operator-linebreak
+            : { icon: false, label: true, filter: { icon: true } }; // eslint-disable-line @stylistic/operator-linebreak
         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,
+            type: 'enum',
+            referenceType: descriptor.referenceType,
+            value: item => coerceEnumValue(descriptor.value(item), { enumeration, format }),
+            sortable: computed(() => this._table.sortable() && (descriptor.sortable ?? true)),
+            filterable: computed(() => this._table.filterable() && (descriptor.filterable ?? 'multi')),
+            enumeration,
+            compare: (a, b) => untracked(() => (positionByEnumValue().get(a.value.value) ?? 0) - (positionByEnumValue().get(b.value.value) ?? 0)),
+            matches: (filter, context) => {
+                if (typeof filter === 'string') { // table filter
+                    return context.value.label.toLowerCase().includes(filter.toLowerCase());
+                }
+                else {
+                    return filter.includes(context.value.value); // column filter
+                }
+            },
+            format,
         });
         return this;
     }
-    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,
+    addIconColumn(descriptor) {
+        const resizable = typeof descriptor.header === 'string' || !!descriptor.header?.label?.length;
+        this.addEnumColumn({
+            ...descriptor,
+            value: item => coerceSignal(descriptor.value(item), { coerceUndefined: true }),
+            format: { icon: true, filter: { icon: true } },
+            resizable: descriptor.resizable ?? resizable,
+            width: descriptor.width ?? (resizable ? undefined : 'max-content'), // adapt width to intrinsic size
+            minWidth: descriptor.minWidth ?? (resizable ? undefined : 32),
+            referenceType: 'icon',
         });
         return this;
     }
-    /**
-     * 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.`);
-        }
-        // 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.');
-        }
-        // 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.');
-        }
-        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;
-    }
-}
-
-/*
- * Copyright (c) 2018-2026 Swiss Federal Railways
- *
- * This program and the accompanying materials are made
- * available under the terms of the Eclipse Public License 2.0
- * which is available at https://www.eclipse.org/legal/epl-2.0/
- *
- * SPDX-License-Identifier: EPL-2.0
- */
-/**
- * Creates a range of integers starting at `start` and ending at `end` (including `end`).
- */
-function rangeInclusive(start, end) {
-    const range = [];
-    for (let i = start; i <= end; i++) {
-        range.push(i);
-    }
-    return range;
-}
-
-/*
- * Copyright (c) 2018-2026 Swiss Federal Railways
- *
- * This program and the accompanying materials are made
- * available under the terms of the Eclipse Public License 2.0
- * which is available at https://www.eclipse.org/legal/epl-2.0/
- *
- * SPDX-License-Identifier: EPL-2.0
- */
-const SCI_TABLE_STORAGE = new InjectionToken('SCI_TABLE_STORAGE', { factory: () => ({
-        load: (name) => localStorage.getItem(name),
-        store: (name, value) => localStorage.setItem(name, value),
-    }) });
-/**
- * Defaults to localStorage persistence.
- * @param storage
- */
-function provideTableStorage(storage) {
-    return makeEnvironmentProviders([
-        { provide: SCI_TABLE_STORAGE, useClass: storage },
-    ]);
-}
-
-/** @inheritDoc */
-class ɵSciTableCellValuePreloader {
-    _executor = new LatestTaskExecutor();
-    _queue = new Array(); // PERF: Do not change to signal to avoid array re-allocation on enqueue (expensive); queue size is tracked via a separate signal.
-    _queueSize = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_queueSize" }] : /* istanbul ignore next */ []));
-    _injector = inject(Injector);
-    /** @inheritDoc */
-    loading = computed(() => this._queueSize() > 0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
-    constructor() {
-        inject(DestroyRef).onDestroy(() => {
-            this._executor.destroy();
-            this._queue.length = 0;
-            this._queueSize.set(0);
-        });
-    }
-    /** @inheritDoc */
-    queue(cellValueFn) {
-        this._queue.push(cellValueFn);
-        this._queueSize.update(size => size + 1);
-        this._executor.submit(() => this.whenIdle().then(() => this.preloadQueuedBatch(PRELOAD_BATCH_SIZE)));
-    }
-    /**
-     * Preloads the next batch of queued cell values, FIFO, then, if the queue is not empty, schedules the next batch.
-     */
-    async preloadQueuedBatch(batchSize) {
-        this._queue.splice(0, batchSize).forEach(fn => fn());
-        this._queueSize.set(this._queue.length);
-        // Preload next batch when idle again.
-        if (this._queue.length) {
-            this._executor.submit(() => this.whenIdle().then(() => this.preloadQueuedBatch(PRELOAD_BATCH_SIZE)));
-        }
-    }
-    /**
-     * Resolves when the browser becomes idle.
-     *
-     * @see onIdle
-     */
-    whenIdle() {
-        return runInInjectionContext(this._injector, onIdle);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ɵSciTableCellValuePreloader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ɵSciTableCellValuePreloader });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: ɵSciTableCellValuePreloader, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-const PRELOAD_BATCH_SIZE = 50_000;
-
-/**
- * Preloads cell values in the background when the browser is idle. This prevents lag with large datasets, in particular
- * for expensive computations like formatting dates and generating ISO 8601 strings, providing faster sort and filter performance.
- *
- * If a cell's value is requested before background preloading finishes, it is computed synchronously.
- */
-class SciTableCellValuePreloader {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableCellValuePreloader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableCellValuePreloader, providedIn: 'root', useClass: ɵSciTableCellValuePreloader });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableCellValuePreloader, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root', useClass: ɵSciTableCellValuePreloader }]
-        }] });
-
-/*
- * Copyright (c) 2018-2026 Swiss Federal Railways
- *
- * This program and the accompanying materials are made
- * available under the terms of the Eclipse Public License 2.0
- * which is available at https://www.eclipse.org/legal/epl-2.0/
- *
- * SPDX-License-Identifier: EPL-2.0
- */
-function arrayDatasource(data, columns) {
-    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(),
-        })));
-    });
-}
-/**
- * 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 tableCellValuePreloader = inject(SciTableCellValuePreloader);
-        const dataset = computed(() => data().map(item => ({
-            item,
-            cells: columns().reduce((cells, column) => untracked(() => {
-                // PERF: Cell values are computed lazily (on idle or first use) to defer expensive computations like date formatting.
-                const tableCellValue = 'value' in column ? new eSciTableCellValue(tableCellValuePreloader, () => column.value(item)()) : undefined;
-                return cells.set(column.name, {
-                    column: column,
-                    value: () => tableCellValue?.value(),
-                });
-            }), 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))
-                .sort((a, b) => compareRows(a, b, sortCriteria))
-                .map(row => row.item));
-        }, /* @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));
-    }
-}
-/**
- * Tests whether a row matches the given global filter.
- */
-function matchesGlobalFilter(row, filter) {
-    if (!filter?.trim()) {
-        return true;
-    }
-    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;
-}
-/**
- * Tests whether a row matches the given column filters.
- */
-function matchesRow(row, columnFilters) {
-    if (!columnFilters.length) {
-        return true;
-    }
-    for (const columnFilter of columnFilters) {
-        const cell = row.cells.get(columnFilter.columnName);
-        if ('value' in cell.column && cell.value() === undefined) { // Component and template columns have no value.
-            return false;
+    addComponentColumn(descriptor) {
+        // Require a filter matcher if filterable using the built-in in-memory datasource.
+        if (this._table.isInMemoryDatasource() && descriptor.filterable === true) {
+            throw Error('[ColumnDefinitionError] Component column requires a filter matcher in order to be filterable.');
         }
-        if (!cell.column.matches(columnFilter.text, { item: row.item, value: cell.value() })) {
-            return false;
+        // Require a sort comparator if sortable using the built-in in-memory datasource.
+        if (this._table.isInMemoryDatasource() && 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 : () => false,
+            padding: descriptor.padding ?? true,
+        });
+        return this;
     }
-    return true;
-}
-/**
- * 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 cell1 = row1.cells.get(criterion.columnName);
-        const cell2 = row2.cells.get(criterion.columnName);
-        const value1 = cell1.value();
-        const value2 = cell2.value();
-        // Always place `undefined` values at the end, independent of the sort direction. Note that component and template columns have no value.
-        if (value1 === undefined && value2 !== undefined) {
-            return 1;
-        }
-        if (value2 === undefined && value1 !== undefined) {
-            return -1;
+    addTemplateColumn(descriptor) {
+        // Require a filter matcher if filterable using the built-in in-memory datasource.
+        if (this._table.isInMemoryDatasource() && descriptor.filterable === true) {
+            throw Error('[ColumnDefinitionError] Template column requires a filter matcher in order to be filterable.');
         }
-        const comparison = cell1.column.compare({ item: row1.item, value: value1 }, { item: row2.item, value: value2 });
-        if (comparison !== 0) {
-            return criterion.direction === 'asc' ? comparison : -comparison;
+        // Require a sort comparator if sortable using the built-in in-memory datasource.
+        if (this._table.isInMemoryDatasource() && 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 : () => false,
+            padding: descriptor.padding ?? true,
+        });
+        return this;
     }
-    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;
+    /**
+     * 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.`);
         }
-        case 'boolean': {
-            if (text === 'true' || text === '1') {
-                return true;
-            }
-            if (text === 'false' || text === '0') {
-                return false;
-            }
-            return undefined;
+        // Ensure filter matcher is only configured if using the built-in in-memory datasource.
+        if (!this._table.isInMemoryDatasource() && 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.');
         }
-        default: {
-            return text;
+        // Ensure sort comparator is only configured if using the built-in in-memory datasource.
+        if (!this._table.isInMemoryDatasource() && 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.');
         }
+        return {
+            name: name,
+            header: untracked(() => {
+                if (typeof descriptor.header === 'string') {
+                    return { label: text(descriptor.header), icon: undefined, tooltip: undefined };
+                }
+                return {
+                    label: descriptor.header?.label !== undefined ? text(descriptor.header.label) : undefined,
+                    icon: descriptor.header?.icon,
+                    tooltip: descriptor.header?.tooltip !== undefined ? text(descriptor.header.tooltip) : undefined,
+                };
+            }),
+            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`
+        };
     }
 }
-/**
- * Provides lazy loading for the cell's value, preloading it when idle for better sort/filter performance.
- *
- * The value is computed at most once, whether it gets preloaded during idle time or requested synchronously via {@link value()}.
- */
-class eSciTableCellValue {
-    _valueFn;
-    _value;
-    constructor(preloader, _valueFn) {
-        this._valueFn = _valueFn;
-        preloader.queue(() => {
-            this._value ??= this._valueFn();
-        });
-    }
-    value() {
-        return this._value ??= untracked(() => this._valueFn());
+function coerceColumnDescriptor(argument1, argument2) {
+    if (argument2 === undefined) {
+        return typeof argument1 === 'function' ? { value: argument1 } : argument1;
     }
+    return {
+        header: argument1,
+        value: argument2,
+    };
 }
 
 /*
@@ -559,57 +646,68 @@ class eSciTableCellValue {
  * SPDX-License-Identifier: EPL-2.0
  */
 class SciTableCache {
-    _cache = signal(new Map(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_cache" }] : /* istanbul ignore next */ []));
-    loading = computed(() => this.values().some(entry => entry.rows.isLoading()), /* @ts-ignore */
+    _entriesById = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_entriesById" }] : /* istanbul ignore next */ []));
+    _idsByEntry = computed(() => [...this._entriesById().entries()].reduce((map, [id, entry]) => {
+        const ids = map.get(entry) ?? new Set();
+        ids.add(id);
+        return map.set(entry, ids);
+    }, new Map()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_idsByEntry" }] : /* istanbul ignore next */ []));
+    rowsById = computed(() => this._entries()
+        .flatMap(entry => entry.status() === 'error' ? [] : entry.value())
+        .reduce((acc, row) => row.id !== skeletonRowId ? acc.set(row.id, row) : acc, new Map()), { ...(ngDevMode ? { debugName: "rowsById" } : /* istanbul ignore next */ {}), equal: Objects.isEqual });
+    _entries = computed(() => [...new Set(this._entriesById().values())], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_entries" }] : /* istanbul ignore next */ []));
+    loading = computed(() => this._entries().some(entry => entry.isLoading()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
-    error = computed(() => this.values().find(entry => entry.rows.error())?.rows.error(), /* @ts-ignore */
+    error = computed(() => this._entries().some(entry => entry.status() === 'error'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-    values = computed(() => [...this._cache().values()], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []));
-    rowsByIndex = computed(() => this.values()
-        .flatMap(page => page.rows.value())
-        .reduce((acc, row) => acc.set(row.index, row), new Map()), { ...(ngDevMode ? { debugName: "rowsByIndex" } : /* istanbul ignore next */ {}), equal: Objects.isEqual });
-    rowsById = computed(() => this.values()
-        .flatMap(page => page.rows.value())
-        .reduce((acc, row) => row.id !== undefined ? acc.set(row.id, row) : acc, new Map()), { ...(ngDevMode ? { debugName: "rowsById" } : /* istanbul ignore next */ {}), equal: Objects.isEqual });
     has(key) {
-        return this._cache().has(key);
+        return this._entriesById().has(key);
     }
-    get(key) {
-        return this._cache().get(key);
+    set(ids, entry) {
+        this._entriesById.update(cache => {
+            const newCache = new Map(cache);
+            for (const id of ids) {
+                newCache.set(id, entry);
+            }
+            return newCache;
+        });
     }
-    set(key, entry) {
-        this._cache.update(cache => {
+    deleteIfLoading(ids) {
+        this._entriesById.update(cache => {
             const cacheCopy = new Map(cache);
-            const existing = cacheCopy.get(key);
-            if (existing) {
-                cacheCopy.delete(key);
-                existing.dispose();
+            const entries = new Set(ids.map(id => cacheCopy.get(id)));
+            for (const id of ids) {
+                if (cacheCopy.get(id)?.isLoading()) {
+                    cacheCopy.delete(id);
+                }
+            }
+            // Dispose entries, which have no ids left pointing to them.
+            for (const entry of entries) {
+                if (!entry) {
+                    continue;
+                }
+                const idsByEntry = this._idsByEntry().get(entry);
+                if (entry.isLoading() && [...(idsByEntry ?? [])].every(id => ids.includes(id))) {
+                    entry.destroy();
+                }
             }
-            cacheCopy.set(key, entry);
             return cacheCopy;
         });
     }
-    /**
-     * Deletes the specified page from the cache, but only if still loading.
-     */
-    deleteIfLoading(key) {
-        const cacheEntry = this._cache().get(key);
-        if (!cacheEntry?.rows.isLoading()) {
-            return;
+    reloadFailed() {
+        for (const entry of this._entries()) {
+            if (entry.status() === 'error') {
+                entry.reload();
+            }
         }
-        this._cache.update(cache => {
-            const cacheCopy = new Map(cache);
-            cacheCopy.delete(key);
-            cacheEntry.dispose();
-            return cacheCopy;
-        });
     }
     clear() {
-        this._cache.update(cache => {
-            for (const entry of cache.values()) {
-                entry.dispose();
+        this._entriesById.update(cache => {
+            for (const entry of new Set(cache.values())) {
+                entry.destroy();
             }
             return new Map();
         });
@@ -625,32 +723,57 @@ class SciTableCache {
  *
  * SPDX-License-Identifier: EPL-2.0
  */
+/**
+ * Provides row bindings to tables in the scope of the injector providing the bindings.
+ *
+ * Multiple providers can be registered. Providers at different injector tree levels form a hierarchy.
+ */
 function provideTableRowBinding(bindings) {
-    return {
-        provide: SCI_TABLE_ROW_BINDING,
-        useValue: bindings,
-        multi: true,
-    };
+    return [
+        {
+            provide: SCI_TABLE_ROW_BINDING,
+            useValue: bindings,
+            multi: true,
+        },
+        {
+            provide: SCI_TABLE_ROW_BINDINGS,
+            useFactory: () => {
+                return [
+                    // Collect bindings registered in parent injectors.
+                    ...inject(SCI_TABLE_ROW_BINDINGS, { skipSelf: true, optional: true }) ?? [],
+                    // Collect bindings registered in this injector.
+                    ...inject(SCI_TABLE_ROW_BINDING),
+                ];
+            },
+        },
+    ];
 }
 class ɵSciTableRowBindingFactory {
-    attributeBindings = new Array();
-    classBindings = new Array();
-    partBindings = new Array();
-    addAttributeBinding(name, value) {
-        if (value !== undefined) {
-            this.attributeBindings.push([name, value]);
+    icons = new Array();
+    parts = new Array();
+    attributes = new Array();
+    classes = new Array();
+    addIconBinding(icon) {
+        if (icon) {
+            this.icons.push(icon);
         }
         return this;
     }
-    addClassBinding(name) {
+    addPartBinding(name) {
         if (name) {
-            this.classBindings.push(name);
+            this.parts.push(name);
         }
         return this;
     }
-    addPartBinding(name) {
+    addAttributeBinding(name, value) {
+        if (value !== undefined) {
+            this.attributes.push([name, value]);
+        }
+        return this;
+    }
+    addClassBinding(name) {
         if (name) {
-            this.partBindings.push(name);
+            this.classes.push(name);
         }
         return this;
     }
@@ -663,12 +786,341 @@ function coerceTableRowBindings(bindingsFn, item, index) {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "factory" }] : /* istanbul ignore next */ []));
     return {
-        attributes: computed(() => Object.fromEntries(factory().attributeBindings), { equal: Objects.isEqual }),
-        cssClass: computed(() => factory().classBindings, { equal: Objects.isEqual }),
-        part: computed(() => factory().partBindings, { equal: Objects.isEqual }),
+        icons: computed(() => factory().icons, { equal: Objects.isEqual }),
+        parts: computed(() => factory().parts, { equal: Objects.isEqual }),
+        attributes: computed(() => Object.fromEntries(factory().attributes), { equal: Objects.isEqual }),
+        classes: computed(() => factory().classes, { equal: Objects.isEqual }),
     };
 }
+/**
+ * Multi-DI token for registering a {@link SciTableRowBindingFactory}.
+ */
 const SCI_TABLE_ROW_BINDING = new InjectionToken('SCI_TABLE_ROW_BINDING');
+/**
+ * DI token to inject {@link SciTableRowBindingFactory} functions provided in the current and parent injectors.
+ */
+const SCI_TABLE_ROW_BINDINGS = new InjectionToken('SCI_TABLE_ROW_BINDINGS');
+
+/**
+ * Loads and builds the table's hierarchy using item IDs and parent relationships, without loading full items.
+ * Only operates on IDs, never full objects and regardless of the viewport / virtual scrolling state.
+ * For non-hierarchical datasources, treats each item as a root node and preserves the order from the unfiltered response.
+ *
+ * Uses two independent requests:
+ *  - An unfiltered request loads all nodes initially and whenever the sort criteria change.
+ *  - A filtered request loads matching nodes when a filter is present and whenever the filters change.
+ *
+ * Combines both responses to include matching nodes and their parents and children, preserving the order from the unfiltered response.
+ * When no filter is present, uses the unfiltered response directly.
+ *
+ * @example
+ * ```ts
+ * const unfilteredNodes = [
+ *   {item: 'Downloads'},
+ *   {item: 'Desktop'},
+ *   {item: 'New Folder', parent: 'Desktop'},
+ *   {item: 'notes.txt', parent: 'New Folder'},
+ * ];
+ *
+ * // Filtered by 'notes'
+ * const filteredNodes = [{item: 'notes.txt', parent: 'New Folder'}];
+ *
+ * // Result includes the matching node and its ancestors.
+ * const tree = [
+ *   {item: 'Desktop'},
+ *   {item: 'New Folder', parent: 'Desktop'},
+ *   {item: 'notes.txt', parent: 'New Folder'},
+ * ];
+ * ```
+ */
+class SciTableTree {
+    _injector = inject(Injector);
+    _datasource;
+    _sortCriteria;
+    _columnFilters;
+    _tableFilter;
+    _activeNode = this.computeActiveNode();
+    _selectedNodes = this.computeSelectedNodes();
+    _expandedNodes = this.computeExpandedNodes();
+    _unfilteredNodes = this.computeUnfilteredNodes();
+    _filteredNodes = this.computeFilteredNodes();
+    _tree = this.computeTree();
+    expandedNodes = this._expandedNodes.asReadonly();
+    selectedNodes = this._selectedNodes.asReadonly();
+    activeNode = this._activeNode.asReadonly();
+    error = computed(() => this._unfilteredNodes.status() === 'error' || this._filteredNodes.status() === 'error', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    loading = computed(() => this._unfilteredNodes.isLoading() || this._filteredNodes.isLoading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    unfilteredNodesById = computed(() => this._unfilteredNodes.status() === 'error' ? new Map() : this._unfilteredNodes.value().reduce((acc, node) => acc.set(node.id, node), new Map()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unfilteredNodesById" }] : /* istanbul ignore next */ []));
+    nodes = computed(() => this._tree().nodes, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+    nodesById = computed(() => this._tree().nodesById, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodesById" }] : /* istanbul ignore next */ []));
+    childrenIdsByParent = computed(() => this._tree().childrenIdsByParent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "childrenIdsByParent" }] : /* istanbul ignore next */ []));
+    visibleNodes = this.computeVisibleNodes();
+    nodeIndexById = computed(() => this.visibleNodes().reduce((map, node, index) => map.set(node.id, index), new Map()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nodeIndexById" }] : /* istanbul ignore next */ []));
+    visibleNodeCount = computed(() => this.visibleNodes().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleNodeCount" }] : /* istanbul ignore next */ []));
+    constructor(options) {
+        this._datasource = options.datasource;
+        this._columnFilters = options.columnFilters;
+        this._tableFilter = options.tableFilter;
+        this._sortCriteria = options.sortCriteria;
+    }
+    reload() {
+        this._unfilteredNodes.reload();
+    }
+    reloadFailed() {
+        if (this._unfilteredNodes.status() === 'error') {
+            this._unfilteredNodes.reload();
+        }
+        if (this._filteredNodes.status() === 'error') {
+            this._filteredNodes.reload();
+        }
+    }
+    expand(id) {
+        const ids = Arrays.coerce(id);
+        this._expandedNodes.update(toggledRows => new Set([...toggledRows, ...ids]));
+    }
+    expandAll() {
+        this._expandedNodes.set(new Set([...this.childrenIdsByParent().keys()].filter((id) => id !== undefined)));
+    }
+    collapse(id) {
+        const ids = Arrays.coerce(id);
+        this._expandedNodes.update(toggledRows => {
+            const newToggledRows = new Set(toggledRows);
+            ids.forEach(id => newToggledRows.delete(id));
+            return newToggledRows;
+        });
+    }
+    collapseAll() {
+        this._expandedNodes.set(new Set());
+    }
+    toggleRow(id) {
+        this._expandedNodes.update(toggledRows => {
+            if (toggledRows.has(id)) {
+                const newToggledRows = new Set(toggledRows);
+                newToggledRows.delete(id);
+                return newToggledRows;
+            }
+            else {
+                return new Set(toggledRows).add(id);
+            }
+        });
+    }
+    setActiveNode(id) {
+        this._activeNode.set(id);
+    }
+    updateSelectedNodes(updateFn) {
+        this._selectedNodes.update(updateFn);
+    }
+    select(ids) {
+        // Prevents selecting nodes which do not exist.
+        // Check against unfiltered nodes, to allow selecting nodes, which are filtered out.
+        const nodesById = this.unfilteredNodesById();
+        const nodeIds = Arrays.coerce(ids).filter(id => nodesById.has(id));
+        // Expand nodes.
+        nodeIds.forEach(id => {
+            const node = nodesById.get(id);
+            if (node?.parentId !== undefined && nodesById.has(node.parentId)) {
+                // Expand all nodes before the selected ones.
+                this.expand(getPathFromRoot(nodesById.get(node.parentId), nodesById));
+            }
+        });
+        // Wait for viewport height to update after expanding nodes.
+        // Else scrollActiveRowIntoViewport operates on an old viewport height.
+        requestAnimationFrame(() => {
+            this._selectedNodes.set(new Set(nodeIds));
+            // Find and activate last item based on the visual index.
+            const lastItemIndex = Math.max(...nodeIds.map(id => this.nodeIndexById().get(id) ?? -1));
+            const lastItem = this.visibleNodes()[lastItemIndex]?.id;
+            this._activeNode.set(lastItem);
+        });
+    }
+    getIds$(query, options) {
+        return runInInjectionContext(options.injector, () => Observables.coerce(this._datasource.getTreeTableNodes({
+            columnFilters: query.columnFilters ?? [],
+            sortCriteria: query.sortCriteria ?? [],
+            tableFilter: query.tableFilter,
+        })).pipe(catchError(error => {
+            console.error(error);
+            throw error;
+        })));
+    }
+    computeUnfilteredNodes() {
+        // Create separate injection context per resource invocation to clean up allocated resources.
+        const injectorFactory = new _SingleActiveInjectorFactory({ parent: this._injector });
+        return rxResource({
+            params: () => this._sortCriteria(),
+            stream: ({ params: sortCriteria }) => this.getIds$({ sortCriteria }, { injector: injectorFactory.create() }),
+            defaultValue: [],
+        });
+    }
+    computeFilteredNodes() {
+        // Create separate injection context per resource invocation to clean up allocated resources.
+        const injectorFactory = new _SingleActiveInjectorFactory({ parent: this._injector });
+        return rxResource({
+            params: () => ({
+                columnFilters: this._columnFilters(),
+                tableFilter: this._tableFilter() ?? undefined,
+            }),
+            stream: ({ params }) => {
+                const injector = injectorFactory.create();
+                if (params.columnFilters.length === 0 && params.tableFilter === undefined) {
+                    return runInInjectionContext(injector, () => toObservable(this._unfilteredNodes.value));
+                }
+                return this.getIds$({ columnFilters: params.columnFilters, tableFilter: params.tableFilter }, { injector });
+            },
+            defaultValue: [],
+        });
+    }
+    computeTree() {
+        return computed(() => {
+            if (this.error()) {
+                return {
+                    nodes: [],
+                    nodesById: new Map(),
+                    childrenIdsByParent: new Map(),
+                };
+            }
+            const filteredNodes = this._filteredNodes.value();
+            const unfilteredNodes = this._unfilteredNodes.value();
+            return untracked(() => createTree(filteredNodes, unfilteredNodes));
+        });
+    }
+    computeExpandedNodes() {
+        return linkedSignal({
+            source: () => ({ unfilteredNodesById: this.unfilteredNodesById(), loading: this._unfilteredNodes.isLoading(), columnFilters: this._columnFilters(), tableFilter: this._tableFilter() }),
+            computation: ({ unfilteredNodesById, loading, tableFilter, columnFilters }, previous) => {
+                // Wait until resource finished loading before changing the expanded nodes.
+                if (loading) {
+                    return previous?.value ?? new Set();
+                }
+                // Expand all items if filter is set.
+                if (columnFilters.length > 0 || tableFilter?.trim()) {
+                    return new Set(unfilteredNodesById.keys());
+                }
+                const expandedNodeIds = previous?.value ?? new Set();
+                return new Set([...expandedNodeIds].filter(id => unfilteredNodesById.has(id)));
+            },
+        });
+    }
+    computeSelectedNodes() {
+        return linkedSignal({
+            source: () => ({ unfilteredNodesById: this.unfilteredNodesById(), loading: this._unfilteredNodes.isLoading() }),
+            computation: ({ unfilteredNodesById, loading }, previous) => {
+                // Wait until resource finished loading before changing the selected nodes.
+                if (loading) {
+                    return previous?.value ?? new Set();
+                }
+                const selectedNodeIds = previous?.value ?? new Set();
+                return new Set([...selectedNodeIds].filter(id => unfilteredNodesById.has(id)));
+            },
+        });
+    }
+    computeActiveNode() {
+        return linkedSignal({
+            source: () => ({ unfilteredNodesById: this.unfilteredNodesById(), loading: this._unfilteredNodes.isLoading() }),
+            computation: ({ unfilteredNodesById, loading }, previous) => {
+                // Wait until resource finished loading before changing the active nodes.
+                if (loading) {
+                    return previous?.value;
+                }
+                return previous?.value !== undefined && unfilteredNodesById.has(previous.value) ? previous.value : undefined;
+            },
+        });
+    }
+    computeVisibleNodes() {
+        return computed(() => {
+            if (this.error()) {
+                return [];
+            }
+            const expandedNodes = this._expandedNodes();
+            const nodesById = this.nodesById();
+            const nodes = this.nodes();
+            const allAncestorsExpanded = (node) => {
+                if (node?.parentId === undefined) {
+                    return true;
+                }
+                if (!expandedNodes.has(node.parentId)) {
+                    return false;
+                }
+                return allAncestorsExpanded(nodesById.get(node.parentId));
+            };
+            return untracked(() => nodes.filter(allAncestorsExpanded));
+        });
+    }
+}
+function createTree(filteredNodes, unfilteredNodes) {
+    const nodesById = includeParentsAndChildren(unfilteredNodes, filteredNodes);
+    const sortedNodes = unfilteredNodes.filter(node => nodesById.has(node.id));
+    const childrenIdsByParent = groupChildrenByParent(sortedNodes);
+    const nodes = flattenTree(nodesById, childrenIdsByParent);
+    return ({ nodes, nodesById, childrenIdsByParent });
+}
+function includeParentsAndChildren(unfilteredNodes, filteredNodes) {
+    const nodesById = new Map(unfilteredNodes.map(node => [node.id, node]));
+    const filteredIds = new Set(filteredNodes.map(node => node.id));
+    return unfilteredNodes.reduce((acc, node) => {
+        const path = getPathFromRoot(node, nodesById);
+        // Include the full path (parents and children) of any filtered node.
+        // This ensures that all parents and children are displayed, even if they don't match the filter.
+        if (path.some(id => filteredIds.has(id))) {
+            path.forEach(id => acc.set(id, nodesById.get(id)));
+        }
+        return acc;
+    }, new Map());
+}
+function groupChildrenByParent(nodes) {
+    return nodes.reduce((acc, node) => {
+        const values = acc.get(node.parentId) ?? [];
+        values.push(node.id);
+        return acc.set(node.parentId, values);
+    }, new Map());
+}
+/**
+ * Flattens the tree in depth-first order, placing each parent before its descendants and preserving sibling order.
+ * Includes all nodes regardless of expansion state.
+ *
+ * Example:
+ * ```
+ * [
+ *   {id: '1'},
+ *   {id: '1.1', parentId: '1'},
+ *   {id: '1.2', parentId: '1'},
+ *   {id: '1.2.1', parentId: '1.2'},
+ *   {id: '1.3', parentId: '1'},
+ *   {id: '2'},
+ * ]
+ * ```
+ */
+function flattenTree(nodesById, childrenIdsByParent) {
+    const nodes = [];
+    const roots = childrenIdsByParent.get(undefined) ?? [];
+    const stack = roots.slice().reverse();
+    // Don't use recursion, to avoid stack overflow on large amount of root nodes (e.g. flat table).
+    while (stack.length > 0) {
+        const id = stack.pop();
+        nodes.push(nodesById.get(id));
+        // Push children in reverse order so the first child is visited next.
+        const children = childrenIdsByParent.get(id) ?? [];
+        for (let i = children.length - 1; i >= 0; i--) {
+            if (children[i] !== undefined) {
+                stack.push(children[i]);
+            }
+        }
+    }
+    return nodes;
+}
+function getPathFromRoot(node, nodesById) {
+    const parent = node.parentId !== undefined ? nodesById.get(node.parentId) : undefined;
+    const pathFromRoot = parent ? getPathFromRoot(parent, nodesById) : [];
+    return pathFromRoot.concat(node.id);
+}
 
 /*
  * Copyright (c) 2018-2026 Swiss Federal Railways
@@ -679,19 +1131,23 @@ const SCI_TABLE_ROW_BINDING = new InjectionToken('SCI_TABLE_ROW_BINDING');
  *
  * SPDX-License-Identifier: EPL-2.0
  */
+/**
+ * @docs-private Not public API. For internal use only.
+ */
 class ɵSciTable {
-    _tableStorage = inject(SCI_TABLE_STORAGE);
+    _tableStorage = inject(SCI_COMPONENTS_STORAGE);
     _injector = inject(Injector);
     name = signal(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     columns;
     rowActions;
     _rowBindings;
-    _dataLoaderFn;
+    _datasource;
     _trackBy;
     tableViewRef = signal(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tableViewRef" }] : /* istanbul ignore next */ []));
     userSettings;
+    type;
     bufferSize;
     pageSize;
     filterable;
@@ -710,42 +1166,38 @@ class ɵSciTable {
     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.
+    columnFilters = linkedSignal({ ...(ngDevMode ? { debugName: "columnFilters" } : /* 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();
     _tableCellValuePreloader = inject(SciTableCellValuePreloader);
     _tableFilter = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_tableFilter" }] : /* istanbul ignore next */ []));
-    _selectedItems = signal(new Map(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_selectedItems" }] : /* istanbul ignore next */ []));
-    // Reset total count on criteria change to show skeletons instead of stale data while loading.
-    totalCount = linkedSignal({ ...(ngDevMode ? { debugName: "totalCount" } : /* istanbul ignore next */ {}), source: () => this.criteria(),
-        computation: () => undefined });
-    activeItem = linkedSignal({ ...(ngDevMode ? { debugName: "activeItem" } : /* istanbul ignore next */ {}), source: () => this.criteria(),
-        computation: () => undefined });
+    _tableTree;
     hoveredIndex = linkedSignal({ ...(ngDevMode ? { debugName: "hoveredIndex" } : /* istanbul ignore next */ {}), source: () => {
             this.criteria(); // reset on criteria change
             this.scrolling(); // reset when start scrolling
         },
         computation: () => -1 });
-    criteria = computed(() => ({ sort: this.sortCriteria(), filter: this.filterCriteria(), tableFilter: this._tableFilter() }), /* @ts-ignore */
+    criteria = computed(() => ({ sort: this.sortCriteria(), filter: this.columnFilters(), tableFilter: this._tableFilter() }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "criteria" }] : /* istanbul ignore next */ []));
-    loading = computed(() => this._cache.loading() || this._tableCellValuePreloader.loading(), /* @ts-ignore */
+    loading = computed(() => this._tableTree.loading() || this._cache.loading() || this._tableCellValuePreloader.loading(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
-    error = this._cache.error;
+    error = computed(() => this._cache.error() || this._tableTree.error(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     activeRow;
-    hoveredRow = computed(() => this.rowsByIndex().get(this.hoveredIndex()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hoveredRow" }] : /* istanbul ignore next */ []));
-    selectedItems = computed(() => [...this._selectedItems().values()], /* @ts-ignore */
+    selectedItems = computed(() => [...this._tableTree.selectedNodes().values()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
-    selectedIds = computed(() => new Set([...this._selectedItems().keys()]), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
-    rowsByIndex = this._cache.rowsByIndex;
+    rowsById = this._cache.rowsById;
     rows = this.computeRows();
+    visibleRowCount;
+    visibleRows;
+    rowIndexById;
+    activeItem;
+    activeIndex = computed(() => this.activeItem() !== undefined ? (this.rowIndexById().get(this.activeItem()) ?? -1) : -1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     constructor(descriptor) {
-        // TODO [table] Remove after datasource is final. See ɵillegaldatasource.
-        descriptor = { ...descriptor, ɵdatasource: descriptor.ɵdatasource ?? descriptor.datasource };
+        this.type = descriptor.type ?? 'table';
         this.bufferSize = descriptor.bufferSize ?? 10;
         this.pageSize = descriptor.pageSize ?? 50;
         this.sortable = signal(descriptor.sortable ?? true, /* @ts-ignore */
@@ -771,11 +1223,21 @@ class ɵSciTable {
         this.rowActions = descriptor.rowActions;
         this._rowBindings = [
             ...descriptor.rowBindings ? [descriptor.rowBindings] : [],
-            ...inject(SCI_TABLE_ROW_BINDING, { optional: true }) ?? [],
+            ...inject(SCI_TABLE_ROW_BINDINGS, { optional: true }) ?? [],
         ];
         this._trackBy = descriptor.trackBy;
-        this._dataLoaderFn = isSignal(descriptor.ɵdatasource) ? arrayDatasource(descriptor.ɵdatasource, this.columns) : descriptor.ɵdatasource;
-        this.installCriteriaWatcher();
+        const datasourceProvider = isSignal(descriptor.datasource) ? provideTableDatasource(descriptor.datasource) : descriptor.datasource;
+        this._datasource = datasourceProvider[eSCI_TABLE_DATASOURCE_PROVIDER](this);
+        this._tableTree = new SciTableTree({
+            datasource: this._datasource,
+            sortCriteria: this.sortCriteria,
+            columnFilters: this.columnFilters,
+            tableFilter: this._tableFilter,
+        });
+        this.visibleRowCount = this._tableTree.visibleNodeCount;
+        this.rowIndexById = this._tableTree.nodeIndexById;
+        this.visibleRows = this._tableTree.visibleNodes;
+        this.activeItem = this._tableTree.activeNode;
         this.installPageLoader();
     }
     /**
@@ -790,17 +1252,13 @@ class ɵSciTable {
         this.tableViewRef.set(undefined);
     }
     computeColumns(descriptor) {
-        // Create separate injection context per factory invocation to clean up allocated resources, like RxJS subscriptions.
-        let injector;
-        return computed(() => {
-            injector?.destroy();
-            injector = createDestroyableInjector({ parent: this._injector });
-            return runInInjectionContext(injector, () => {
-                const tableColumnFactory = new ɵSciTableColumnFactory(this);
-                descriptor.columns(tableColumnFactory);
-                return tableColumnFactory.columns;
-            });
-        });
+        // Create a factory to instantiate a new injector per column factory execution, releasing resources allocated in the previous execution.
+        const injectorFactory = new _SingleActiveInjectorFactory();
+        return computed(() => runInInjectionContext(injectorFactory.create(), () => {
+            const tableColumnFactory = new ɵSciTableColumnFactory(this);
+            descriptor.columns(tableColumnFactory);
+            return tableColumnFactory.columns;
+        }));
     }
     /**
      * Computes the rows currently visible in the viewport (+buffer).
@@ -811,15 +1269,29 @@ class ɵSciTable {
             if (!scrollRange) {
                 return [];
             }
-            const rowsByIndex = this.rowsByIndex();
-            const rowCount = scrollRange.end - scrollRange.start;
+            const visibleNodes = this._tableTree.visibleNodes();
+            const rowsById = this.rowsById();
+            const rangeCount = scrollRange.end - scrollRange.start;
+            const rowCount = Math.min(rangeCount, this._tableTree.loading() ? rangeCount : visibleNodes.length);
             // Populate rows with cached rows in the range window, fallback to row shell to show skeleton.
-            return untracked(() => Array.from({ length: rowCount }, (_, i) => rowsByIndex.get(scrollRange.start + i) ?? createSyntheticRow(i)));
+            return untracked(() => Array.from({ length: rowCount }, (_, i) => {
+                const node = visibleNodes[scrollRange.start + i];
+                if (node && rowsById.has(node.id)) {
+                    return rowsById.get(node.id);
+                }
+                return createSkeletonRow(i);
+            }));
         });
-        function createSyntheticRow(index) {
+        function createSkeletonRow(index) {
             return {
                 index,
-                loading: true,
+                id: skeletonRowId,
+                item: undefined,
+                cells: [],
+                bindings: coerceTableRowBindings([], undefined, index),
+                level: 0,
+                hasChildren: signal(false).asReadonly(),
+                expanded: signal(false).asReadonly(),
                 active: signal(false).asReadonly(),
                 selected: signal(false).asReadonly(),
                 hovered: signal(false).asReadonly(),
@@ -841,7 +1313,8 @@ class ɵSciTable {
             const start = Math.floor(scrollTop / itemHeight);
             const viewportRowCount = Math.ceil(viewportHeight / itemHeight);
             const end = Math.min(start + viewportRowCount);
-            const totalCount = this.totalCount() ?? viewportRowCount; // fill viewport if no data loaded yet
+            // fill viewport if no data loaded yet
+            const totalCount = this._tableTree.loading() ? viewportRowCount : this.visibleRowCount();
             return {
                 start: clamp(start - this.bufferSize, { min: 0, max: Math.max(0, totalCount - viewportRowCount) }),
                 end: clamp(end + this.bufferSize, { max: totalCount }),
@@ -850,9 +1323,13 @@ class ɵSciTable {
     }
     computeVirtualScrollOffset() {
         return computed(() => {
+            // Remove virtual-scroll padding so the error message and retry button are in view.
+            if (this.error()) {
+                return { top: 0, bottom: 0 };
+            }
             const itemHeight = this.tableViewRef()?.itemHeight() ?? 0;
-            const totalCount = this.totalCount() ?? 0;
-            const rangeEnd = Math.min(this.scrollRange()?.end ?? 0, this.totalCount() ?? 0);
+            const totalCount = this.visibleRowCount();
+            const rangeEnd = Math.min(this.scrollRange()?.end ?? 0, totalCount);
             return {
                 top: (this.scrollRange()?.start ?? 0) * itemHeight,
                 bottom: (totalCount - rangeEnd) * itemHeight,
@@ -890,74 +1367,44 @@ class ɵSciTable {
                 .pipe(switchMap(() => concat(of(true), timer(150).pipe(map(() => false)))), startWith(false), subscribeIn(fn => zone.runOutsideAngular(fn))),
         }).value;
     }
-    /**
-     * Loads a range of rows, based on the current sort and filter criteria, into the cache.
-     */
-    async loadRange(start, end) {
-        const sortCriteria = this.sortCriteria();
-        const columnFilters = this.filterCriteria();
-        const tableFilter = this._tableFilter() ?? undefined;
-        // Calculate pages based on row indices and page size.
-        const pages = pagesByRange(start, end, this.pageSize);
-        if (!pages) {
-            return;
-        }
-        // Load pages and wait until completed loading.
-        await Promise.all(pages
-            .map(page => this.loadPage({ page, pageSize: this.pageSize, columnFilters, tableFilter, sortCriteria }))
-            .map(page => firstValueFrom(toLazyObservable(page.loading, { injector: this._injector }).pipe(first(loading => !loading), defaultIfEmpty(true)))));
-    }
     /**
      * Loads the requested page from the cache or datasource and returns its loading state with a cancelation handler.
      */
-    loadPage({ page, pageSize, sortCriteria, columnFilters, tableFilter }) {
-        const pageStart = page * pageSize;
-        const pageEnd = pageStart + pageSize;
-        const cacheKey = `${pageStart}-${pageEnd}`;
-        if (this._cache.has(cacheKey)) {
+    loadPage(nodeIds) {
+        const nodeIdsToLoad = nodeIds.filter(id => !this._cache.has(id));
+        if (nodeIdsToLoad.length === 0) {
             return {
-                loading: this._cache.get(cacheKey).rows.isLoading,
-                cancel: () => this._cache.deleteIfLoading(cacheKey),
+                cancel: () => this._cache.deleteIfLoading(nodeIds),
             };
         }
-        const cacheEntryInjector = createDestroyableInjector({ parent: this._injector });
-        const cacheEntry = {
-            rows: runInInjectionContext(cacheEntryInjector, () => {
-                // Fetch data.
-                const tableResponse$ = runSafe(() => Observables.coerce(this._dataLoaderFn({
-                    start: pageStart,
-                    end: pageEnd,
-                    pageSize,
-                    page,
-                    sortCriteria,
-                    tableFilter,
-                    columnFilters,
-                })), error => throwError(() => error));
-                const columns$ = toObservable(this.columns);
-                // Create a resource to track loading and error states.
-                return rxResource({
-                    stream: () => tableResponse$.pipe(combineLatestWith(columns$), map(([response, columns]) => ({
-                        rows: this.mapItemsToRow(response.items, columns, pageStart),
-                        totalCount: response.totalCount,
-                    })), tap({
-                        next: ({ totalCount }) => this.totalCount.set(totalCount),
-                        error: error => {
-                            console.error(error);
-                            // Reset count to scroll to the top so the user sees the error.
-                            this.totalCount.set(0);
-                        },
-                    }), map(({ rows }) => rows)),
-                    defaultValue: [],
-                });
-            }),
-            dispose: () => cacheEntryInjector.destroy(),
-            start: pageStart,
-            end: pageEnd,
-        };
-        this._cache.set(cacheKey, cacheEntry);
+        // Track consistent snapshot of columns and node Ids.
+        // If the access happens directly in `mapItemsToRow` they can be out of sync because `nodesById` depends on `columns`.
+        // Don't use the rowMapping data as resource params, since it should not refetch from the datasource on change.
+        const snapshot = computed(() => {
+            const columns = this.columns();
+            const nodesById = this._tableTree.nodesById();
+            const nodeIndexById = this._tableTree.nodeIndexById();
+            return { columns, nodesById, nodeIndexById };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "snapshot" }] : /* istanbul ignore next */ []));
+        // Create a resource to track loading and error states.
+        this._cache.set(nodeIdsToLoad, rxResource({
+            stream: () => {
+                // Injector for the datasource call; destroyed on stream completion to clean up allocated resources.
+                const datasourceInjector = _createDestroyableInjector({ parent: this._injector });
+                // Create separate injection context per items emission to clean up allocated resources.
+                const itemsInjectorFactory = new _SingleActiveInjectorFactory({ parent: datasourceInjector });
+                return runInInjectionContext(datasourceInjector, () => Observables.coerce(this._datasource.getItems(nodeIdsToLoad)))
+                    .pipe(combineLatestWith(toLazyObservable(snapshot, { injector: datasourceInjector })), map(([response, { columns, nodesById, nodeIndexById }]) => runInInjectionContext(itemsInjectorFactory.create(), () => this.mapItemsToRow(response, columns, nodesById, nodeIndexById))), catchError(error => {
+                    console.error(error);
+                    throw error;
+                }), finalize(() => datasourceInjector.destroy()));
+            },
+            injector: this._injector,
+            defaultValue: [],
+        }));
         return {
-            loading: cacheEntry.rows.isLoading,
-            cancel: () => this._cache.deleteIfLoading(cacheKey),
+            cancel: () => this._cache.deleteIfLoading(nodeIdsToLoad),
         };
     }
     /**
@@ -996,28 +1443,30 @@ class ɵSciTable {
         if (!column) {
             throw Error(`[NullColumnError] Column '${options.columnName}' not found in table '${this.name()}'.`);
         }
-        this.filterCriteria.update(filterCriterion => {
-            const otherFilterCriteria = filterCriterion.filter(filterCriterion => filterCriterion.columnName !== options.columnName);
-            if (text === null) {
-                return otherFilterCriteria;
-            }
-            return otherFilterCriteria.concat({ columnName: column.name, text });
+        this.columnFilters.update(filterCriteria => {
+            const newFilterCriteria = filterCriteria.filter(filterCriterion => filterCriterion.columnName !== options.columnName);
+            return text === null ? newFilterCriteria : newFilterCriteria.concat({ columnName: column.name, text });
         });
     }
+    setActiveItem(id) {
+        this._tableTree.setActiveNode(id);
+    }
     updateSelectedItems(updateFn) {
-        this._selectedItems.update(updateFn);
+        this._tableTree.updateSelectedNodes(updateFn);
     }
     /**
-     * Indicates whether the built-in array datasource is used.
-     *
-     * Supports out-of-the-box filtering and sorting for built-in table columns.
+     * Indicates whether the built-in in-memory datasource is used.
      */
-    isArrayDatasource() {
-        return isArrayDatasource(this._dataLoaderFn);
+    isInMemoryDatasource() {
+        return this._datasource instanceof SciInMemoryTableDatasource;
     }
-    reset() {
+    reload() {
         this._cache.clear();
-        this.totalCount.set(undefined);
+        this._tableTree.reload();
+    }
+    reloadFailed() {
+        this._cache.reloadFailed();
+        this._tableTree.reloadFailed();
     }
     dispose() {
         this._cache.clear();
@@ -1029,51 +1478,45 @@ class ɵSciTable {
     installPageLoader() {
         effect(onCleanup => {
             const scrollRange = this.scrollRange();
-            const sortCriteria = this.sortCriteria();
-            const columnFilters = this.filterCriteria();
-            const tableFilter = this._tableFilter() ?? undefined;
+            const visibleNodes = this._tableTree.visibleNodes();
             if (!scrollRange) {
                 return;
             }
             untracked(() => {
-                // Fall back to load the initial page if range is empty. Otherwise, if the table grows with its content,
-                // no data would ever load because the scroll range remains 0.
-                const pages = pagesByRange(scrollRange.start, scrollRange.end, this.pageSize) ?? [0];
-                pages.forEach(page => {
-                    const pageRef = this.loadPage({
-                        pageSize: this.pageSize,
-                        page,
-                        sortCriteria,
-                        tableFilter,
-                        columnFilters,
-                    });
+                // Calculate start and end pages that contain the range.
+                const startPage = Math.floor(scrollRange.start / this.pageSize);
+                const endPage = Math.floor((scrollRange.end - 1) / this.pageSize);
+                for (let page = startPage; page <= endPage; page++) {
+                    const index = page * this.pageSize;
+                    const nodes = visibleNodes.slice(index, index + this.pageSize).map(node => node.id);
+                    const pageRef = this.loadPage(nodes);
                     onCleanup(() => pageRef.cancel());
-                });
+                }
             });
         });
     }
-    /**
-     * Resets cache on criteria changes.
-     */
-    installCriteriaWatcher() {
-        toObservable(this.criteria).pipe(skip(1), // skip first emission to avoid race condition with loader on initialization.
-        takeUntilDestroyed()).subscribe(() => {
-            this._cache.clear();
-        });
-    }
-    mapItemsToRow(items, columns, pageStart) {
-        return items.map((item, i) => {
+    mapItemsToRow(items, columns, nodesById, nodeIndexById) {
+        // Indicates whether there are nodes with children.
+        const isTree = Array.from(nodesById.values()).some(node => node.parentId !== undefined);
+        return items.map((item) => {
             const id = this.trackBy(item);
-            const index = pageStart + i;
+            const index = nodeIndexById.get(id);
+            const node = nodesById.get(id);
+            if (node === undefined || index === undefined) {
+                return undefined;
+            }
             return {
                 id,
                 index,
                 item,
-                loading: false,
-                active: computed(() => item === this.activeItem()),
-                selected: computed(() => this.selectedIds().has(id)),
-                hovered: computed(() => this.hoveredRow()?.index === index),
-                bindings: coerceTableRowBindings(this._rowBindings, item, pageStart + i),
+                hovered: computed(() => this.hoveredIndex() === index),
+                active: computed(() => this.activeItem() === id),
+                selected: computed(() => this._tableTree.selectedNodes().has(id)),
+                expanded: computed(() => this._tableTree.expandedNodes().has(id)),
+                level: isTree ? calculateLevel(node) : undefined,
+                parentId: node.parentId,
+                hasChildren: computed(() => (this._tableTree.childrenIdsByParent().get(id)?.length ?? 0) > 0),
+                bindings: coerceTableRowBindings(this._rowBindings, item, index),
                 cells: columns.map(column => ({
                     value: 'value' in column ? column.value(item) : undefined,
                     component: column.type === 'component' ? column.component(item) : undefined,
@@ -1082,7 +1525,13 @@ class ɵSciTable {
                     column,
                 })),
             };
-        });
+        }).filter((node) => !!node);
+        function calculateLevel(node) {
+            if (node.parentId === undefined) {
+                return 0;
+            }
+            return calculateLevel(nodesById.get(node.parentId)) + 1;
+        }
     }
     /**
      * Creates a signal to read and write table user settings.
@@ -1092,7 +1541,7 @@ class ɵSciTable {
         const userSettings = resource({ ...(ngDevMode ? { debugName: "userSettings" } : /* istanbul ignore next */ {}), params: () => this.name(),
             loader: async ({ params: tableName }) => {
                 try {
-                    const serialized = await this._tableStorage.load(`scion.components.${tableName}`);
+                    const serialized = await this._tableStorage.load(`scion.components:${tableName}`);
                     return serialized ? JSON.parse(serialized) : { columns: [] };
                 }
                 catch (error) {
@@ -1104,7 +1553,7 @@ class ɵSciTable {
         // Persist settings to storage.
         effect(() => {
             if (userSettings.status() === 'local' && this.name()) {
-                untracked(() => void this._tableStorage.store(`scion.components.${this.name()}`, JSON.stringify(userSettings.value())));
+                untracked(() => void this._tableStorage.store(`scion.components:${this.name()}`, JSON.stringify(userSettings.value())));
             }
         });
         return userSettings.value;
@@ -1113,30 +1562,39 @@ class ɵSciTable {
      * Call trackBy function or fallback to track by object reference.
      */
     trackBy(item) {
-        return this._trackBy?.(item) ?? item;
+        if (this._trackBy !== undefined) {
+            return this._trackBy(item);
+        }
+        return item;
     }
     computeActiveRow() {
         return computed(() => {
             const activeItem = this.activeItem();
-            if (activeItem === undefined) {
-                return undefined;
-            }
-            const id = this.trackBy(activeItem);
-            if (id === undefined) {
-                return undefined;
-            }
-            return this._cache.rowsById().get(id);
+            const rowsById = this._cache.rowsById();
+            return rowsById.has(activeItem) ? rowsById.get(activeItem) : undefined;
         });
     }
-}
-/**
- * Gets pages by range and page size, or `null` if empty. End is exclusive.
- */
-function pagesByRange(start, end, pageSize) {
-    const startPage = Math.floor(start / pageSize);
-    const endPage = Math.floor((end - 1) / pageSize); // `end` is exclusive, so use the last included index (`end - 1`) for page calculation.
-    const pages = rangeInclusive(startPage, endPage);
-    return pages.length ? pages : null;
+    select(ids) {
+        this._tableTree.select(ids);
+    }
+    expand(ids) {
+        this._tableTree.expand(ids);
+    }
+    isExpanded(id) {
+        return this._tableTree.expandedNodes().has(id);
+    }
+    expandAll() {
+        this._tableTree.expandAll();
+    }
+    collapse(ids) {
+        this._tableTree.collapse(ids);
+    }
+    collapseAll() {
+        this._tableTree.collapseAll();
+    }
+    toggleRow(id) {
+        this._tableTree.toggleRow(id);
+    }
 }
 const ɵSCI_TABLE = new InjectionToken('ɵSciTable');
 
@@ -1149,16 +1607,16 @@ const ɵSCI_TABLE = new InjectionToken('ɵSciTable');
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-/**
- * TODO [table] Remove after datasource is final.
- *
- * @docs-private Not public API. For internal use only.
- * @experimental since 22.3.0; API and behavior may change in any version without notice.
- */
-function ɵillegaldatasource() {
-    return computed(() => {
-        throw Error('[SciTableError] Illegal state. ɵillegaldatasource should not be used.');
-    });
+function table(dataOrDescriptor, columnFactoryFn, options) {
+    assertNotInReactiveContext(table, 'Call table in a non-reactive (non-tracking) context, such as within the untracked() function.');
+    const descriptor = isSignal(dataOrDescriptor) ? ({ datasource: dataOrDescriptor, columns: columnFactoryFn, injector: options?.injector }) : dataOrDescriptor;
+    if (!descriptor.injector) {
+        assertInInjectionContext(table);
+    }
+    const injector = descriptor.injector ?? inject(Injector);
+    const sciTable = runInInjectionContext(injector, () => new ɵSciTable(descriptor));
+    injector.get(DestroyRef).onDestroy(() => sciTable.dispose());
+    return sciTable;
 }
 
 /*
@@ -1170,16 +1628,33 @@ function ɵillegaldatasource() {
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-function table(dataOrDescriptor, columnFactoryFn, options) {
-    assertNotInReactiveContext(table, 'Call table in a non-reactive (non-tracking) context, such as within the untracked() function.');
-    const descriptor = isSignal(dataOrDescriptor) ? ({ ɵdatasource: dataOrDescriptor, datasource: ɵillegaldatasource(), columns: columnFactoryFn, injector: options?.injector }) : dataOrDescriptor;
-    if (!descriptor.injector) {
-        assertInInjectionContext(table);
+/**
+ * Creates a range of integers starting at `start` and ending at `end` (including `end`).
+ */
+function rangeInclusive(start, end) {
+    const range = [];
+    for (let i = start; i <= end; i++) {
+        range.push(i);
     }
-    const injector = descriptor.injector ?? inject(Injector);
-    const sciTable = runInInjectionContext(injector, () => new ɵSciTable(descriptor));
-    injector.get(DestroyRef).onDestroy(() => sciTable.dispose());
-    return sciTable;
+    return range;
+}
+/**
+ * Indicates whether the given event was triggered from an input element.
+ */
+function isFromInput(event) {
+    if (event.target instanceof Element && event.target.closest('input, textarea, select') !== null) {
+        return true;
+    }
+    if (event.target instanceof HTMLElement && event.target.isContentEditable) {
+        return true;
+    }
+    return false;
+}
+/**
+ * Indicates whether the given keyboard event was triggered from a button.
+ */
+function isFromButton(event) {
+    return event.target instanceof Element && event.target.closest('button') !== null;
 }
 
 /*
@@ -1195,218 +1670,114 @@ class SciTableSelectionService {
     _table = inject(ɵSCI_TABLE);
     async onRowClick(index, event) {
         const table = this._table();
-        const rowsByIndex = table.rowsByIndex();
-        const row = rowsByIndex.get(index);
-        const item = rowsByIndex.get(index)?.item;
-        const previousFocusedIndex = table.activeRow()?.index ?? -1;
-        table.activeItem.set(item);
-        if (item === undefined || !table.selectable()) {
+        const rowId = table.visibleRows()?.[index]?.id;
+        const previousActiveIndex = table.activeIndex();
+        table.setActiveItem(rowId);
+        if (rowId === undefined || !table.selectable()) {
             return;
         }
         if (table.selectable() === 'single') {
-            table.updateSelectedItems(() => new Map().set(row.id, item));
+            table.updateSelectedItems(() => new Set().add(rowId));
             return;
         }
-        if (event.shiftKey && previousFocusedIndex >= 0) {
-            const start = Math.min(previousFocusedIndex, index);
-            const end = Math.max(previousFocusedIndex, index);
+        if (event.shiftKey && previousActiveIndex >= 0) {
+            const start = Math.min(previousActiveIndex, index);
+            const end = Math.max(previousActiveIndex, index);
             await this.selectItems(start, end, { add: true });
         }
         else if (event.ctrlKey || event.metaKey) {
-            this.toggleSelectedItem(item);
+            this.toggleSelectedItem(rowId);
         }
         else {
             // If no modifier is pressed set the selection to the clicked row.
-            table.updateSelectedItems(() => new Map().set(row.id, item));
+            table.updateSelectedItems(() => new Set().add(rowId));
         }
     }
     async onArrowUp(event) {
         event.preventDefault();
         const table = this._table();
-        const activeIndex = this._table().activeRow()?.index ?? -1;
-        if (activeIndex <= 0) {
-            return;
-        }
-        // Set active item.
-        const startIndex = activeIndex - 1;
-        await this.loadMissingItems(startIndex, startIndex);
-        const startItem = table.rowsByIndex().get(startIndex)?.item;
-        table.activeItem.set(startItem);
-        if (!table.selectable()) {
-            return;
-        }
-        const keyboardEvent = event;
-        const shift = keyboardEvent.shiftKey;
-        const ctrlOrMeta = keyboardEvent.ctrlKey || keyboardEvent.metaKey;
-        if (shift && ctrlOrMeta) {
-            await this.ctrlShiftUp({ startIndex, activeIndex });
-        }
-        else if (shift) {
-            await this.shiftUp({ startIndex, activeIndex });
-        }
-        else if (ctrlOrMeta) {
-            // Selection remains unchanged.
-        }
-        else {
-            await this.selectItems(startIndex, startIndex);
-        }
+        const activeIndex = table.activeIndex();
+        const targetIndex = Math.max(activeIndex - 1, 0);
+        await this.selectOnKeyboardNavigation(targetIndex, event);
     }
     async onArrowDown(event) {
         event.preventDefault();
         const table = this._table();
-        const activeIndex = this._table().activeRow()?.index ?? -1;
-        const endIndex = Math.min(activeIndex + 1, table.totalCount() - 1);
-        if (endIndex === activeIndex) {
-            return;
-        }
-        // Set active item.
-        await this.loadMissingItems(endIndex, endIndex);
-        const endItem = table.rowsByIndex().get(endIndex)?.item;
-        table.activeItem.set(endItem);
-        if (!table.selectable()) {
+        const activeIndex = table.activeIndex();
+        const targetIndex = Math.min(activeIndex + 1, table.visibleRowCount() - 1);
+        await this.selectOnKeyboardNavigation(targetIndex, event);
+    }
+    async onArrowLeft(event) {
+        event.preventDefault();
+        const table = this._table();
+        const activeRow = table.activeRow();
+        if (activeRow?.item === undefined || activeRow.id === skeletonRowId) {
             return;
         }
-        const keyboardEvent = event;
-        const shift = keyboardEvent.shiftKey;
-        const ctrlOrMeta = keyboardEvent.ctrlKey || keyboardEvent.metaKey;
-        if (shift && ctrlOrMeta) {
-            await this.ctrlShiftDown({ endIndex, activeIndex });
-        }
-        else if (shift) {
-            await this.shiftDown({ endIndex, activeIndex });
+        if (activeRow.hasChildren() && activeRow.expanded()) {
+            table.collapse(activeRow.id);
         }
-        else if (ctrlOrMeta) {
-            // Selection remains unchanged.
+        else if (activeRow.parentId !== undefined) {
+            const parentIndex = table.rowIndexById().get(activeRow.parentId) ?? -1;
+            await this.selectOnKeyboardNavigation(parentIndex, { shiftKey: false, ctrlKey: false, metaKey: false });
         }
+        // Root case
         else {
-            await this.selectItems(endIndex, endIndex);
+            const rows = table.visibleRows();
+            const row = findPreviousExpandedRow(activeRow.index - 1);
+            if (row !== undefined) {
+                const index = table.rowIndexById().get(row.id) ?? -1;
+                await this.selectOnKeyboardNavigation(index, { shiftKey: false, ctrlKey: false, metaKey: false });
+            }
+            function findPreviousExpandedRow(index) {
+                while (index > 0) {
+                    const row = rows?.[index];
+                    // Get the row expansion state whether the row is already loaded or not.
+                    if (row !== undefined && table.isExpanded(row.id)) {
+                        return row;
+                    }
+                    index--;
+                }
+                // Return the first row if no previous row is expanded.
+                return rows?.[index];
+            }
         }
     }
-    async onPageUp(event) {
+    async onArrowRight(event) {
         event.preventDefault();
         const table = this._table();
-        const activeIndex = this._table().activeRow()?.index ?? -1;
-        if (activeIndex === 0) {
-            return;
-        }
-        // Set active item.
-        const startIndex = Math.max(activeIndex - table.viewportPageSize() + 1, 0);
-        await this.loadMissingItems(startIndex, startIndex);
-        const startItem = table.rowsByIndex().get(startIndex)?.item;
-        table.activeItem.set(startItem);
-        if (!table.selectable()) {
+        const activeRow = table.activeRow();
+        const activeIndex = table.activeIndex();
+        const endIndex = Math.min(activeIndex + 1, table.visibleRowCount() - 1);
+        if (activeRow?.id !== skeletonRowId && activeRow?.hasChildren() && !activeRow.expanded()) {
+            table.expand(activeRow.id);
             return;
         }
-        const keyboardEvent = event;
-        const shift = keyboardEvent.shiftKey;
-        const ctrlOrMeta = keyboardEvent.ctrlKey || keyboardEvent.metaKey;
-        if (shift && ctrlOrMeta) {
-            await this.ctrlShiftUp({ startIndex, activeIndex });
-        }
-        else if (shift) {
-            await this.shiftUp({ startIndex, activeIndex });
-        }
-        else if (ctrlOrMeta) {
-            // Selection remains unchanged.
-        }
-        else {
-            await this.selectItems(startIndex, startIndex);
-        }
+        await this.selectOnKeyboardNavigation(endIndex, { shiftKey: false, ctrlKey: false, metaKey: false });
+    }
+    async onPageUp(event) {
+        event.preventDefault();
+        const table = this._table();
+        const activeIndex = table.activeIndex();
+        const targetIndex = Math.max(activeIndex - table.viewportPageSize() + 1, 0);
+        await this.selectOnKeyboardNavigation(targetIndex, event);
     }
     async onPageDown(event) {
         event.preventDefault();
         const table = this._table();
-        const activeIndex = this._table().activeRow()?.index ?? -1;
-        const endIndex = Math.min(activeIndex + table.viewportPageSize() - 1, table.totalCount() - 1);
-        if (endIndex === activeIndex) {
-            return;
-        }
-        // Set active item.
-        await this.loadMissingItems(endIndex, endIndex);
-        const endItem = table.rowsByIndex().get(endIndex)?.item;
-        table.activeItem.set(endItem);
-        if (!table.selectable()) {
-            return;
-        }
-        const keyboardEvent = event;
-        const shift = keyboardEvent.shiftKey;
-        const ctrlOrMeta = keyboardEvent.ctrlKey || keyboardEvent.metaKey;
-        if (shift && ctrlOrMeta) {
-            await this.ctrlShiftDown({ endIndex, activeIndex });
-        }
-        else if (shift) {
-            await this.shiftDown({ endIndex, activeIndex });
-        }
-        else if (ctrlOrMeta) {
-            // Selection remains unchanged.
-        }
-        else {
-            await this.selectItems(endIndex, endIndex);
-        }
+        const activeIndex = table.activeIndex();
+        const targetIndex = Math.min(activeIndex + table.viewportPageSize() - 1, table.visibleRowCount() - 1);
+        await this.selectOnKeyboardNavigation(targetIndex, event);
     }
     async onHome(event) {
         event.preventDefault();
-        const table = this._table();
-        const activeIndex = this._table().activeRow()?.index ?? -1;
-        if (activeIndex <= 0) {
-            return;
-        }
-        // Set active item.
-        const startIndex = 0;
-        await this.loadMissingItems(startIndex, startIndex);
-        const startItem = table.rowsByIndex().get(startIndex)?.item;
-        table.activeItem.set(startItem);
-        if (!table.selectable()) {
-            return;
-        }
-        const keyboardEvent = event;
-        const shift = keyboardEvent.shiftKey;
-        const ctrlOrMeta = keyboardEvent.ctrlKey || keyboardEvent.metaKey;
-        if (shift && ctrlOrMeta) {
-            await this.ctrlShiftUp({ startIndex, activeIndex });
-        }
-        else if (shift) {
-            await this.shiftUp({ startIndex, activeIndex });
-        }
-        else if (ctrlOrMeta) {
-            // Selection remains unchanged.
-        }
-        else {
-            await this.selectItems(startIndex, startIndex);
-        }
+        await this.selectOnKeyboardNavigation(0, event);
     }
     async onEnd(event) {
         event.preventDefault();
         const table = this._table();
-        const activeIndex = this._table().activeRow()?.index ?? -1;
-        const endIndex = table.totalCount() - 1;
-        if (endIndex === activeIndex) {
-            return;
-        }
-        // TODO [mmu] should active item be set before selection? this way, further methods cant rely on table.activeItem.
-        // But otherwise, loading and setting the active item needs to be done for each case, or once at the end.
-        // Set active item.
-        await this.loadMissingItems(endIndex, endIndex);
-        const endItem = table.rowsByIndex().get(endIndex)?.item;
-        table.activeItem.set(endItem);
-        if (!table.selectable()) {
-            return;
-        }
-        const keyboardEvent = event;
-        const shift = keyboardEvent.shiftKey;
-        const ctrlOrMeta = keyboardEvent.ctrlKey || keyboardEvent.metaKey;
-        if (shift && ctrlOrMeta) {
-            await this.ctrlShiftDown({ endIndex, activeIndex });
-        }
-        else if (shift) {
-            await this.shiftDown({ endIndex, activeIndex });
-        }
-        else if (ctrlOrMeta) {
-            // Selection remains unchanged.
-        }
-        else {
-            await this.selectItems(endIndex, endIndex);
-        }
+        const targetIndex = table.visibleRowCount() - 1;
+        await this.selectOnKeyboardNavigation(targetIndex, event);
     }
     onSpace(event) {
         event.preventDefault();
@@ -1414,168 +1785,126 @@ class SciTableSelectionService {
         if (!table.selectable()) {
             return;
         }
-        const activeItem = table.activeItem();
-        if (!activeItem) {
+        const activeItemId = table.activeItem();
+        if (activeItemId === undefined) {
             return;
         }
         const keyboardEvent = event;
         const ctrlOrMeta = keyboardEvent.ctrlKey || keyboardEvent.metaKey;
-        const activeItemId = table.trackBy(activeItem);
         if (ctrlOrMeta) {
-            this.toggleSelectedItem(activeItem);
+            this.toggleSelectedItem(activeItemId);
         }
         else {
-            table.updateSelectedItems(() => new Map().set(activeItemId, activeItem));
+            table.updateSelectedItems(() => new Set().add(activeItemId));
         }
     }
     async onControlA(event) {
         event.preventDefault();
         const table = this._table();
-        const totalCount = table.totalCount() ?? 0;
+        const totalCount = table.visibleRowCount();
         if (table.selectable() === 'multi' && totalCount >= 0) {
             await this.selectItems(0, totalCount - 1);
         }
     }
-    // TODO [mmu] Should we add overloads for all variants for better readability, but same logic?
-    // shiftArrowDown
-    // shiftPageDown
-    // ShiftEnd
-    async shiftDown(options) {
+    async selectOnKeyboardNavigation(targetIndex, event) {
         const table = this._table();
-        const selectedIds = table.selectedIds();
-        const activeIndex = options.activeIndex;
-        const startIndex = activeIndex;
-        const endIndex = options.endIndex;
-        const activeItem = table.rowsByIndex().get(activeIndex).item;
-        const activeItemId = table.trackBy(activeItem);
-        if (table.selectable() === 'single') {
-            await this.selectItems(endIndex, endIndex);
+        const targetItem = table.visibleRows()?.[targetIndex]?.id;
+        const activeIndex = table.activeIndex();
+        const direction = activeIndex > targetIndex ? 'up' : 'down';
+        const [startIndex, endIndex] = direction === 'up' ? [targetIndex, activeIndex] : [activeIndex, targetIndex];
+        const shift = event.shiftKey;
+        const ctrlOrMeta = event.ctrlKey || event.metaKey;
+        if (table.selectable() !== 'multi') {
+            // Don't modify selection when only ctrlOrMeta is pressed.
+            if (table.selectable() === 'single' && (shift || !ctrlOrMeta)) {
+                await this.selectItems(targetIndex, targetIndex);
+            }
+            table.setActiveItem(targetItem);
             return;
         }
-        if (!selectedIds.has(activeItemId)) {
-            await this.selectItems(startIndex, endIndex);
-            return;
+        if (shift && ctrlOrMeta) {
+            await this.selectItems(startIndex, endIndex, { add: true });
         }
-        if (this.isSelectionAtBlockStart(activeIndex)) {
-            await this.selectFromBlockStart(startIndex, endIndex);
-            return;
+        else if (shift) {
+            await this.selectOnShiftNavigation(direction, startIndex, endIndex);
         }
-        await this.selectItems(startIndex, endIndex, { add: true });
-    }
-    async ctrlShiftDown(options) {
-        const table = this._table();
-        const startIndex = options.activeIndex;
-        const endIndex = options.endIndex;
-        if (table.selectable() === 'single') {
-            await this.selectItems(endIndex, endIndex);
+        else if (ctrlOrMeta) {
+            // Selection remains unchanged.
         }
         else {
-            await this.selectItems(startIndex, endIndex, { add: true });
+            await this.selectItems(targetIndex, targetIndex);
         }
+        table.setActiveItem(targetItem);
     }
-    async shiftUp(options) {
+    selectOnShiftNavigation(direction, startIndex, endIndex) {
         const table = this._table();
-        const selectedIds = table.selectedIds();
-        const activeIndex = options.activeIndex;
-        const startIndex = options.startIndex;
-        const endIndex = activeIndex;
-        const activeItem = table.rowsByIndex().get(activeIndex).item;
-        const activeItemId = table.trackBy(activeItem);
-        if (table.selectable() === 'single') {
-            await this.selectItems(startIndex, startIndex);
-            return;
-        }
-        if (!selectedIds.has(activeItemId)) {
-            await this.selectItems(startIndex, endIndex);
-            return;
-        }
-        if (this.isSelectionAtBlockEnd(activeIndex)) {
-            await this.selectFromBlockEnd(startIndex, endIndex);
-            return;
+        const activeIndex = table.activeIndex();
+        const selectedIds = table.selectedItems();
+        // If the active item is outside the selection, start a new selection.
+        if (!selectedIds.includes(table.activeItem())) {
+            return this.selectItems(startIndex, endIndex);
         }
-        await this.selectItems(startIndex, endIndex, { add: true });
-    }
-    async ctrlShiftUp(options) {
-        const table = this._table();
-        const startIndex = options.startIndex;
-        const endIndex = options.activeIndex;
-        if (table.selectable() === 'single') {
-            await this.selectItems(startIndex, startIndex);
+        // Moving down from the block start shrinks the selection until the block end, then extends it.
+        if (direction === 'down' && this.isSelectionAtBlockStart(activeIndex)) {
+            return this.selectFromBlockStart(startIndex, endIndex);
         }
-        else {
-            await this.selectItems(startIndex, endIndex, { add: true });
+        // Moving up from the block end shrinks the selection until the block start, then extends it.
+        if (direction === 'up' && this.isSelectionAtBlockEnd(activeIndex)) {
+            return this.selectFromBlockEnd(startIndex, endIndex);
         }
+        // In other cases, e.g. going down at the end of a selection block, select all items in the range.
+        return this.selectItems(startIndex, endIndex, { add: true });
     }
     isSelectionAtBlockStart(activeIndex) {
         const table = this._table();
-        const selectedIds = table.selectedIds();
-        const previousItem = table.rowsByIndex().get(activeIndex - 1)?.item;
-        const previousItemId = previousItem ? table.trackBy(previousItem) : undefined;
-        const nextItem = table.rowsByIndex().get(activeIndex + 1)?.item;
-        const nextItemId = nextItem ? table.trackBy(nextItem) : undefined;
-        return !selectedIds.has(previousItemId) && selectedIds.has(nextItemId);
+        const selectedIds = table.selectedItems();
+        const previousItemId = table.visibleRows()?.[activeIndex - 1]?.id;
+        const nextItemId = table.visibleRows()?.[activeIndex + 1]?.id;
+        return (previousItemId === undefined || !selectedIds.includes(previousItemId)) && nextItemId !== undefined && selectedIds.includes(nextItemId);
     }
     isSelectionAtBlockEnd(activeIndex) {
         const table = this._table();
-        const selectedIds = table.selectedIds();
-        const previousItem = table.rowsByIndex().get(activeIndex - 1)?.item;
-        const previousItemId = previousItem ? table.trackBy(previousItem) : undefined;
-        const nextItem = table.rowsByIndex().get(activeIndex + 1)?.item;
-        const nextItemId = nextItem ? table.trackBy(nextItem) : undefined;
-        return selectedIds.has(previousItemId) && !selectedIds.has(nextItemId);
-    }
-    async loadMissingItems(startIndex, endIndex) {
-        const table = this._table();
-        const indices = rangeInclusive(startIndex, endIndex + 1);
-        const rows = indices.map(i => table.rowsByIndex().get(i));
-        if (rows.some(row => row?.id === undefined)) {
-            await Promise.race([
-                table.loadRange(startIndex, endIndex + 1),
-                firstValueFrom(timer(5_000)),
-            ]);
-        }
+        const selectedIds = table.selectedItems();
+        const previousItemId = table.visibleRows()?.[activeIndex - 1]?.id;
+        const nextItemId = table.visibleRows()?.[activeIndex + 1]?.id;
+        return previousItemId !== undefined && selectedIds.includes(previousItemId) && (nextItemId === undefined || !selectedIds.includes(nextItemId));
     }
     async selectItems(startIndex, endIndex, options) {
         const table = this._table();
+        if (!table.selectable()) {
+            return;
+        }
         const indices = rangeInclusive(startIndex, endIndex);
         const add = options?.add ?? false;
-        let rows = indices.map(i => table.rowsByIndex().get(i));
-        if (rows.some(row => row?.id === undefined)) {
-            // If not all id's could be found load the missing items.
-            await Promise.race([
-                table.loadRange(startIndex, endIndex),
-                firstValueFrom(timer(5_000)),
-            ]);
-            rows = indices.map(i => table.rowsByIndex().get(i));
-        }
-        table.updateSelectedItems(existing => new Map([
+        const rows = indices.map(i => table.visibleRows()?.[i]);
+        table.updateSelectedItems(existing => new Set([
             ...(add ? existing : []),
             ...rows
-                .filter((row) => row?.id !== undefined && row.item !== undefined)
-                .map((row) => [row.id, row.item]),
+                .filter((row) => !!row)
+                .map(row => row.id),
         ]));
     }
     async selectFromBlockStart(startIndex, endIndex) {
         const table = this._table();
-        await this.loadMissingItems(startIndex, endIndex);
         const indices = rangeInclusive(startIndex, endIndex);
         table.updateSelectedItems(selection => {
-            const newSelection = new Map(selection);
+            const newSelection = new Set(selection);
+            let shrinking = true;
             for (let i = 0; i < indices.length; i++) {
                 const currentIndex = indices[i];
                 const nextIndex = indices[i + 1];
-                const item = table.rowsByIndex().get(currentIndex)?.item;
-                if (!item) {
+                const itemId = table.visibleRows()?.[currentIndex]?.id;
+                if (itemId === undefined) {
                     continue;
                 }
-                const itemId = table.trackBy(item);
-                const nextItem = table.rowsByIndex().get(nextIndex)?.item;
-                const nextItemId = nextItem ? table.trackBy(nextItem) : undefined;
-                if (selection.has(nextItemId)) {
+                const nextItemId = table.visibleRows()?.[nextIndex]?.id;
+                if (shrinking && nextItemId !== undefined && selection.has(nextItemId)) {
                     newSelection.delete(itemId);
                 }
                 else {
-                    newSelection.set(itemId, item);
+                    // Once outside the active block, only add items, even when crossing another selected block.
+                    shrinking = false;
+                    newSelection.add(itemId);
                 }
             }
             return newSelection;
@@ -1583,35 +1912,34 @@ class SciTableSelectionService {
     }
     async selectFromBlockEnd(startIndex, endIndex) {
         const table = this._table();
-        await this.loadMissingItems(startIndex, endIndex);
         const indices = rangeInclusive(startIndex, endIndex);
         table.updateSelectedItems(selection => {
-            const newSelection = new Map(selection);
+            const newSelection = new Set(selection);
+            let shrinking = true;
             for (let i = indices.length - 1; i >= 0; i--) {
                 const currentIndex = indices[i];
                 const previousIndex = indices[i - 1];
-                const item = table.rowsByIndex().get(currentIndex)?.item;
-                if (!item) {
+                const itemId = table.visibleRows()?.[currentIndex]?.id;
+                if (itemId === undefined) {
                     continue;
                 }
-                const itemId = table.trackBy(item);
-                const previousItem = table.rowsByIndex().get(previousIndex)?.item;
-                const previousItemId = previousItem ? table.trackBy(previousItem) : undefined;
-                if (selection.has(previousItemId)) {
+                const previousItemId = table.visibleRows()?.[previousIndex]?.id;
+                if (shrinking && previousItemId !== undefined && selection.has(previousItemId)) {
                     newSelection.delete(itemId);
                 }
                 else {
-                    newSelection.set(itemId, item);
+                    // Once outside the active block, only add items, even when crossing another selected block.
+                    shrinking = false;
+                    newSelection.add(itemId);
                 }
             }
             return newSelection;
         });
     }
-    toggleSelectedItem(item) {
+    toggleSelectedItem(id) {
         const table = this._table();
-        const id = table.trackBy(item);
         table.updateSelectedItems(selection => {
-            const next = new Map(selection);
+            const next = new Set(selection);
             if (next.has(id)) {
                 next.delete(id);
             }
@@ -1619,7 +1947,7 @@ class SciTableSelectionService {
                 if (table.selectable() === 'single') {
                     next.clear();
                 }
-                next.set(id, item);
+                next.add(id);
             }
             return next;
         });
@@ -1669,9 +1997,11 @@ class SciTableCellComponent {
     ...(ngDevMode ? [{ debugName: "cell" }] : /* istanbul ignore next */ []));
     row = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    _table = inject(ɵSCI_TABLE);
     template = this.computeTemplate();
     templateContext = this.computeTemplateContext();
     partAttribute = this.computePartAttribute();
+    value = this.computeValueAttribute();
     computeTemplate() {
         return computed(() => {
             const cell = this.cell();
@@ -1699,28 +2029,51 @@ class SciTableCellComponent {
     }
     computePartAttribute() {
         return computed(() => {
+            const cell = this.cell();
+            const partType = this._table().type === 'tree' ? 'node' : 'row';
+            const referenceType = cell.type === 'enum' ? cell.column.referenceType : undefined;
             return Arrays.distinct([
-                // Enable column styling based on column type.
-                `column:${this.cell().column.type}`,
+                // Enable column styling based on column type. For enum columns, resolves to the reference type, if any, i.e., boolean or icon.
+                `column:${referenceType ?? cell.column.type}`,
                 // Enable column styling based on column name.
-                this.cell().column.name,
+                cell.column.name,
                 // Enable row styling based on selection state.
-                this.row().selected() ? 'row:selected' : 'row:not:selected',
+                this.row().selected() ? `${partType}:selected` : `${partType}:not:selected`,
                 // Enable row styling based on active state.
-                this.row().active() ? 'row:active' : 'row:not:active',
+                this.row().active() ? `${partType}:active` : `${partType}:not:active`,
                 // Enable row styling based on row bindings.
-                ...Arrays.coerce(this.row().bindings?.part()),
+                ...Arrays.coerce(this.row().bindings.parts()),
             ]).join(' ');
         });
     }
+    computeValueAttribute() {
+        return computed(() => {
+            const cell = this.cell();
+            const value = (() => {
+                switch (cell.type) {
+                    case 'string':
+                    case 'number':
+                        return cell.value();
+                    case 'enum':
+                        return cell.value()?.value;
+                    case 'date':
+                        return cell.value()?.isoString;
+                    default:
+                        return undefined;
+                }
+            })();
+            return value !== undefined ? `${value}` : undefined;
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciTableCellComponent, isStandalone: true, selector: "sci-table-cell", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-type": "cell().column.type", "attr.data-column": "cell().column.name", "attr.data-padding": "!cell().column.padding ? false : null", "attr.part": "partAttribute()" } }, ngImport: i0, template: "@let cell = this.cell();\n\n@switch (cell.type) {\n  @case ('template') {\n    <ng-template *ngTemplateOutlet=\"template(); context: templateContext()\"/>\n  }\n  @case ('component') {\n    <ng-container *sciComponentOutlet=\"cell.component\"/>\n  }\n  @case ('boolean') {\n    @if (cell.value() !== undefined) {\n      <!-- TODO [dwi] Use another ligature for icon scion.clear -->\n      <sci-icon class=\"checkbox\">{{cell.value() ? 'scion.checkmark' : 'scion.clear'}}</sci-icon>\n    }\n  }\n  @case ('date') {\n    {{cell.value()?.formatted}}\n  }\n  @case ('number') {\n    {{cell.value() | sciNumber:cell.column.format()}}\n  }\n  @default {\n    {{cell.value()}}\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-grid;position:relative;border-inline:var(--\\275sci-table-cell-padding-inline) solid transparent;align-items:center;overflow:hidden}:host:is([data-type=string],[data-type=number],[data-type=date]){display:inline;white-space:nowrap;text-overflow:ellipsis;line-height:var(--\\275sci-table-row-height)}:host[data-type=number]{text-align:end}:host:is([data-type=number],[data-type=date]){font-variant-numeric:tabular-nums}:host[data-padding=false]{border-inline:none;align-items:stretch}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "directive", type: SciComponentOutletDirective, selector: "ng-template[sciComponentOutlet]", inputs: ["sciComponentOutlet"] }, { kind: "pipe", type: SciNumberPipe, name: "sciNumber" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciTableCellComponent, isStandalone: true, selector: "sci-table-cell", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-type": "cell().column.type", "attr.data-column": "cell().column.name", "attr.data-value": "value()", "attr.data-padding": "!cell().column.padding ? false : null", "attr.part": "partAttribute()" } }, hostDirectives: [{ directive: i1.SciTooltipOnOverflowDirective }], ngImport: i0, template: "@let cell = this.cell();\n\n@switch (cell.type) {\n  @case ('template') {\n    <ng-template *ngTemplateOutlet=\"template(); context: templateContext()\"/>\n  }\n  @case ('component') {\n    <ng-container *sciComponentOutlet=\"cell.component\"/>\n  }\n  @case ('date') {\n    {{cell.value()?.formatted}}\n  }\n  @case ('number') {\n    {{cell.value() | sciNumber:cell.column.format()}}\n  }\n  @case ('enum') {\n    @let value = cell.value();\n    @if (value !== undefined) {\n      @if (cell.column.format.icon && value.icon !== undefined) {\n        <sci-icon [attr.title]=\"value.tooltip\">{{value.icon}}</sci-icon>\n      }\n      @if (cell.column.format.label) {\n        <span>{{value.label}}</span>\n      }\n    }\n  }\n  @default {\n    {{cell.value()}}\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-grid;position:relative;border-inline:var(--\\275sci-table-cell-padding-inline) solid transparent;align-items:center;overflow:hidden}:host:is([data-type=string],[data-type=number],[data-type=date],[data-type=enum]){display:inline;white-space:nowrap;text-overflow:ellipsis;line-height:var(--\\275sci-table-row-height)}:host[data-type=number]{text-align:end}:host:is([data-type=number],[data-type=date]){font-variant-numeric:tabular-nums}:host[data-padding=false]{border-inline:none;align-items:stretch}:host>sci-icon:not(:last-child){margin-right:.75em}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "directive", type: SciComponentOutletDirective, selector: "ng-template[sciComponentOutlet]", inputs: ["sciComponentOutlet"] }, { kind: "pipe", type: SciNumberPipe, name: "sciNumber" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sci-table-cell', host: {
                         '[attr.data-type]': 'cell().column.type',
                         '[attr.data-column]': 'cell().column.name',
+                        '[attr.data-value]': 'value()',
                         '[attr.data-padding]': '!cell().column.padding ? false : null',
                         '[attr.part]': 'partAttribute()',
                     }, imports: [
@@ -1728,7 +2081,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         SciIconComponent,
                         SciComponentOutletDirective,
                         SciNumberPipe,
-                    ], template: "@let cell = this.cell();\n\n@switch (cell.type) {\n  @case ('template') {\n    <ng-template *ngTemplateOutlet=\"template(); context: templateContext()\"/>\n  }\n  @case ('component') {\n    <ng-container *sciComponentOutlet=\"cell.component\"/>\n  }\n  @case ('boolean') {\n    @if (cell.value() !== undefined) {\n      <!-- TODO [dwi] Use another ligature for icon scion.clear -->\n      <sci-icon class=\"checkbox\">{{cell.value() ? 'scion.checkmark' : 'scion.clear'}}</sci-icon>\n    }\n  }\n  @case ('date') {\n    {{cell.value()?.formatted}}\n  }\n  @case ('number') {\n    {{cell.value() | sciNumber:cell.column.format()}}\n  }\n  @default {\n    {{cell.value()}}\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-grid;position:relative;border-inline:var(--\\275sci-table-cell-padding-inline) solid transparent;align-items:center;overflow:hidden}:host:is([data-type=string],[data-type=number],[data-type=date]){display:inline;white-space:nowrap;text-overflow:ellipsis;line-height:var(--\\275sci-table-row-height)}:host[data-type=number]{text-align:end}:host:is([data-type=number],[data-type=date]){font-variant-numeric:tabular-nums}:host[data-padding=false]{border-inline:none;align-items:stretch}\n"] }]
+                    ], hostDirectives: [
+                        SciTooltipOnOverflowDirective,
+                    ], template: "@let cell = this.cell();\n\n@switch (cell.type) {\n  @case ('template') {\n    <ng-template *ngTemplateOutlet=\"template(); context: templateContext()\"/>\n  }\n  @case ('component') {\n    <ng-container *sciComponentOutlet=\"cell.component\"/>\n  }\n  @case ('date') {\n    {{cell.value()?.formatted}}\n  }\n  @case ('number') {\n    {{cell.value() | sciNumber:cell.column.format()}}\n  }\n  @case ('enum') {\n    @let value = cell.value();\n    @if (value !== undefined) {\n      @if (cell.column.format.icon && value.icon !== undefined) {\n        <sci-icon [attr.title]=\"value.tooltip\">{{value.icon}}</sci-icon>\n      }\n      @if (cell.column.format.label) {\n        <span>{{value.label}}</span>\n      }\n    }\n  }\n  @default {\n    {{cell.value()}}\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-grid;position:relative;border-inline:var(--\\275sci-table-cell-padding-inline) solid transparent;align-items:center;overflow:hidden}:host:is([data-type=string],[data-type=number],[data-type=date],[data-type=enum]){display:inline;white-space:nowrap;text-overflow:ellipsis;line-height:var(--\\275sci-table-row-height)}:host[data-type=number]{text-align:end}:host:is([data-type=number],[data-type=date]){font-variant-numeric:tabular-nums}:host[data-padding=false]{border-inline:none;align-items:stretch}:host>sci-icon:not(:last-child){margin-right:.75em}\n"] }]
         }], propDecorators: { cell: [{ type: i0.Input, args: [{ isSignal: true, alias: "cell", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
 
 /*
@@ -1745,27 +2100,35 @@ class SciTableRowComponent {
     ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
     primaryAction = output();
     table = inject(ɵSCI_TABLE);
+    _selectionService = inject(SciTableSelectionService);
     rowActionToolbar = viewChild(SciToolbarComponent, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rowActionToolbar" }] : /* istanbul ignore next */ []));
     rowActionsToolbarName = `toolbar:${UUID.randomUUID()}`;
-    _selectionService = inject(SciTableSelectionService);
     constructor() {
         this.contributeRowActions();
     }
     onRowClick(event) {
-        if (this.row().loading) {
+        const row = this.row();
+        if (row.id === skeletonRowId) {
             return;
         }
-        void this._selectionService.onRowClick(this.row().index, event);
+        const index = this.table().rowIndexById().get(row.id) ?? -1;
+        void this._selectionService.onRowClick(index, event);
     }
     onRowDblClick(event) {
-        if (this.row().loading) {
+        const row = this.row();
+        if (row.id === skeletonRowId || isFromInput(event) || isFromButton(event)) {
             return;
         }
-        this.primaryAction.emit({ sourceEvent: event, items: [this.row().item] });
+        this.primaryAction.emit({ sourceEvent: event, items: [row.id] });
     }
     onRowMouseEnter() {
-        this.table().hoveredIndex.set(this.row().index);
+        const row = this.row();
+        if (row.id === skeletonRowId) {
+            return;
+        }
+        const index = this.table().rowIndexById().get(row.id) ?? -1;
+        this.table().hoveredIndex.set(index);
     }
     onRowMouseLeave(event) {
         const next = event.relatedTarget;
@@ -1776,35 +2139,49 @@ class SciTableRowComponent {
         this.table().hoveredIndex.set(-1);
     }
     onActionToolbarClick(event) {
+        const row = this.row();
+        if (row.id === skeletonRowId) {
+            return;
+        }
+        event.stopPropagation(); // prevent selecting the row
+        this.table().setActiveItem(row.id);
+    }
+    onTreeNodeHandle(event) {
+        const row = this.row();
+        if (row.id === skeletonRowId) {
+            return;
+        }
         event.stopPropagation(); // prevent selecting the row
-        this.table().activeItem.set(this.row().item);
+        this.table().toggleRow(row.id);
     }
     contributeRowActions() {
         contributeMenu(this.rowActionsToolbarName, toolbar => {
-            const rowActionsFactoryFn = this.table().rowActions;
-            if (!this.row().loading && rowActionsFactoryFn) {
-                rowActionsFactoryFn(toolbar, this.row().item, this.row().index);
+            if (this.row().id !== skeletonRowId) {
+                this.table().rowActions?.(toolbar, this.row().item, this.row().index);
             }
         });
     }
     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  <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:.5s;animation-timing-function:ease-in;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"] }] });
+    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", "attr.data-level": "row().level", "attr.data-state": "row().level !== undefined && row().hasChildren() ? (row().expanded() ? 'expanded' : 'collapsed') : null", "style.--\u0275sci-table-row-level": "row().level" } }, viewQueries: [{ propertyName: "rowActionToolbar", first: true, predicate: SciToolbarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@let row = this.row();\n\n<!-- Handle to expand or collapse a tree node -->\n@if (row.level !== undefined) {\n  <button class=\"tree-node-handle e2e-tree-node-handle\" (click)=\"onTreeNodeHandle($event)\" [attr.disabled]=\"!row.hasChildren() || null\">\n    @if (row.expanded()) {\n      <sci-icon class=\"e2e-expanded\">scion:chevron_down</sci-icon>\n    } @else {\n      <sci-icon class=\"e2e-collapsed\">scion:chevron_right</sci-icon>\n    }\n  </button>\n}\n\n<!-- Row Icons -->\n@if (row.cells.length) {\n  @for (icon of row.bindings.icons(); track $index) {\n    <sci-icon>{{icon}}</sci-icon>\n  }\n}\n\n<!-- Table Cells -->\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<!--Row Actions -->\n@let hasRowActions = !!table().rowActions;\n@let isRowHovered = table().hoveredIndex() === row.index;\n@let isRowActionMenuOpen = rowActionToolbar()?.menuOpen();\n\n@if (hasRowActions && (isRowHovered || isRowActionMenuOpen)) {\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:.5s;animation-timing-function:ease-in;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>button.tree-node-handle{all:unset;display:inline-grid;position:relative;order:1}:host>button.tree-node-handle:disabled{display:none}:host>:is(sci-icon,button.tree-node-handle):has(~sci-table-cell:first-of-type){grid-column:1;grid-row:1;align-self:center;margin-left:calc(var(--\\275sci-table-cell-padding-inline) + (sibling-index() - 1) * 24px + var(--\\275sci-table-row-level, 0) * var(--sci-table-row-indent));--sci-icon-size: 16px;width:auto;max-width:var(--sci-icon-size)}:host>:is(sci-icon,button.tree-node-handle):has(~sci-table-cell:first-of-type)+sci-table-cell{grid-column:1;grid-row:1;border-left-width:calc(var(--\\275sci-table-cell-padding-inline) + (sibling-index() - 1) * 24px + var(--\\275sci-table-row-level, 0) * var(--sci-table-row-indent))}:host>:is(sci-icon,button.tree-node-handle):has(~sci-table-cell:first-of-type)+sci-table-cell[data-padding=false]{border-left-width:calc(var(--\\275sci-table-cell-padding-inline) + (sibling-index() - 1) * 24px + var(--\\275sci-table-row-level, 0) * var(--sci-table-row-indent) - 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"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sci-table-row', imports: [
                         SciTableCellComponent,
                         SciToolbarComponent,
+                        SciIconComponent,
                     ], host: {
                         '[attr.data-active]': `row().active() ? '' : null`,
                         '[attr.data-selected]': `row().selected() ? '' : null`,
                         '[attr.data-hovered]': `row().hovered() ? '' : null`,
-                        '[class]': 'row().bindings?.cssClass?.()',
+                        '[attr.data-level]': 'row().level',
+                        '[attr.data-state]': `row().level !== undefined && row().hasChildren() ? (row().expanded() ? 'expanded' : 'collapsed') : null`,
+                        '[style.--ɵsci-table-row-level]': 'row().level', // only set if hierarchical
                         '(click)': 'onRowClick($event)',
                         '(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  <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:.5s;animation-timing-function:ease-in;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"] }]
+                    }, template: "@let row = this.row();\n\n<!-- Handle to expand or collapse a tree node -->\n@if (row.level !== undefined) {\n  <button class=\"tree-node-handle e2e-tree-node-handle\" (click)=\"onTreeNodeHandle($event)\" [attr.disabled]=\"!row.hasChildren() || null\">\n    @if (row.expanded()) {\n      <sci-icon class=\"e2e-expanded\">scion:chevron_down</sci-icon>\n    } @else {\n      <sci-icon class=\"e2e-collapsed\">scion:chevron_right</sci-icon>\n    }\n  </button>\n}\n\n<!-- Row Icons -->\n@if (row.cells.length) {\n  @for (icon of row.bindings.icons(); track $index) {\n    <sci-icon>{{icon}}</sci-icon>\n  }\n}\n\n<!-- Table Cells -->\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<!--Row Actions -->\n@let hasRowActions = !!table().rowActions;\n@let isRowHovered = table().hoveredIndex() === row.index;\n@let isRowActionMenuOpen = rowActionToolbar()?.menuOpen();\n\n@if (hasRowActions && (isRowHovered || isRowActionMenuOpen)) {\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:.5s;animation-timing-function:ease-in;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>button.tree-node-handle{all:unset;display:inline-grid;position:relative;order:1}:host>button.tree-node-handle:disabled{display:none}:host>:is(sci-icon,button.tree-node-handle):has(~sci-table-cell:first-of-type){grid-column:1;grid-row:1;align-self:center;margin-left:calc(var(--\\275sci-table-cell-padding-inline) + (sibling-index() - 1) * 24px + var(--\\275sci-table-row-level, 0) * var(--sci-table-row-indent));--sci-icon-size: 16px;width:auto;max-width:var(--sci-icon-size)}:host>:is(sci-icon,button.tree-node-handle):has(~sci-table-cell:first-of-type)+sci-table-cell{grid-column:1;grid-row:1;border-left-width:calc(var(--\\275sci-table-cell-padding-inline) + (sibling-index() - 1) * 24px + var(--\\275sci-table-row-level, 0) * var(--sci-table-row-indent))}:host>:is(sci-icon,button.tree-node-handle):has(~sci-table-cell:first-of-type)+sci-table-cell[data-padding=false]{border-left-width:calc(var(--\\275sci-table-cell-padding-inline) + (sibling-index() - 1) * 24px + var(--\\275sci-table-row-level, 0) * var(--sci-table-row-indent) - 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 }] }] } });
 
 /*
@@ -1817,27 +2194,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * SPDX-License-Identifier: EPL-2.0
  */
 class SciTableKeyboardNavigatorDirective {
+    _table = inject(ɵSCI_TABLE);
     selectionService = inject(SciTableSelectionService);
-    /**
-     * Indicates whether the given keyboard event was triggered from an input element.
-     */
-    isFromInput(event) {
-        if (event.target instanceof Element && event.target.closest('input, textarea, select') !== null) {
-            return true;
+    isFromInput = isFromInput;
+    isFromButton = isFromButton;
+    async onKeydown(event) {
+        if (event.key === '+' && event.location === 3) { // NumpadAdd
+            void this.onNumpadAdd(event);
         }
-        if (event.target instanceof HTMLElement && event.target.isContentEditable) {
-            return true;
+        else if (event.key === '-' && event.location === 3) { // NumpadSubtract
+            void this.onNumpadSubtract(event);
         }
-        return false;
     }
-    /**
-     * Indicates whether the given keyboard event was triggered from a button.
-     */
-    isFromButton(event) {
-        return event.target instanceof Element && event.target.closest('button') !== null;
+    async onNumpadAdd(event) {
+        event.preventDefault();
+        const table = this._table();
+        if (event.ctrlKey || event.metaKey) {
+            table.expandAll();
+            return;
+        }
+        const activeRow = table.activeRow();
+        if (activeRow?.id !== skeletonRowId && activeRow?.hasChildren()) {
+            table.expand(activeRow.id);
+        }
+    }
+    async onNumpadSubtract(event) {
+        event.preventDefault();
+        const table = this._table();
+        if (event.ctrlKey || event.metaKey) {
+            table.collapseAll();
+            return;
+        }
+        const activeRow = table.activeRow();
+        if (activeRow?.id !== skeletonRowId && activeRow?.hasChildren()) {
+            table.collapse(activeRow.id);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableKeyboardNavigatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SciTableKeyboardNavigatorDirective, isStandalone: true, selector: "[sciTableKeyboardNavigator]", host: { listeners: { "keydown.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.shift.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.control.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.meta.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.shift.control.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.shift.meta.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.shift.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.control.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.meta.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.shift.control.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.shift.meta.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.space": "isFromInput($event) || isFromButton($event) || selectionService.onSpace($event)", "keydown.control.space": "isFromInput($event) || isFromButton($event) || selectionService.onSpace($event)", "keydown.meta.space": "isFromInput($event) || isFromButton($event) || selectionService.onSpace($event)", "keydown.control.a": "isFromInput($event) || selectionService.onControlA($event)", "keydown.meta.a": "isFromInput($event) || selectionService.onControlA($event)", "keydown.pageUp": "isFromInput($event) || selectionService.onPageUp($event)", "keydown.shift.pageUp": "isFromInput($event) || selectionService.onPageUp($event)", "keydown.control.pageUp": "isFromInput($event) || selectionService.onPageUp($event)", "keydown.shift.control.pageUp": "isFromInput($event) || selectionService.onPageUp($event)", "keydown.pageDown": "isFromInput($event) || selectionService.onPageDown($event)", "keydown.shift.pageDown": "isFromInput($event) || selectionService.onPageDown($event)", "keydown.control.pageDown": "isFromInput($event) || selectionService.onPageDown($event)", "keydown.shift.control.pageDown": "isFromInput($event) || selectionService.onPageDown($event)", "keydown.home": "isFromInput($event) || selectionService.onHome($event)", "keydown.shift.home": "isFromInput($event) || selectionService.onHome($event)", "keydown.control.home": "isFromInput($event) || selectionService.onHome($event)", "keydown.shift.control.home": "isFromInput($event) || selectionService.onHome($event)", "keydown.end": "isFromInput($event) || selectionService.onEnd($event)", "keydown.shift.end": "isFromInput($event) || selectionService.onEnd($event)", "keydown.control.end": "isFromInput($event) || selectionService.onEnd($event)", "keydown.shift.control.end": "isFromInput($event) || selectionService.onEnd($event)" }, properties: { "attr.tabindex": "0" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SciTableKeyboardNavigatorDirective, isStandalone: true, selector: "[sciTableKeyboardNavigator]", host: { listeners: { "keydown.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.shift.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.control.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.meta.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.shift.control.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.shift.meta.arrowUp": "isFromInput($event) || selectionService.onArrowUp($event)", "keydown.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.shift.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.control.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.meta.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.shift.control.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.shift.meta.arrowDown": "isFromInput($event) || selectionService.onArrowDown($event)", "keydown.arrowLeft": "isFromInput($event) || selectionService.onArrowLeft($event)", "keydown.arrowRight": "isFromInput($event) || selectionService.onArrowRight($event)", "keydown.space": "isFromInput($event) || isFromButton($event) || selectionService.onSpace($event)", "keydown.control.space": "isFromInput($event) || isFromButton($event) || selectionService.onSpace($event)", "keydown.meta.space": "isFromInput($event) || isFromButton($event) || selectionService.onSpace($event)", "keydown.control.a": "isFromInput($event) || selectionService.onControlA($event)", "keydown.meta.a": "isFromInput($event) || selectionService.onControlA($event)", "keydown.pageUp": "isFromInput($event) || selectionService.onPageUp($event)", "keydown.shift.pageUp": "isFromInput($event) || selectionService.onPageUp($event)", "keydown.control.pageUp": "isFromInput($event) || selectionService.onPageUp($event)", "keydown.meta.pageUp": "isFromInput($event) || selectionService.onPageUp($event)", "keydown.shift.control.pageUp": "isFromInput($event) || selectionService.onPageUp($event)", "keydown.shift.meta.pageUp": "isFromInput($event) || selectionService.onPageUp($event)", "keydown.pageDown": "isFromInput($event) || selectionService.onPageDown($event)", "keydown.shift.pageDown": "isFromInput($event) || selectionService.onPageDown($event)", "keydown.control.pageDown": "isFromInput($event) || selectionService.onPageDown($event)", "keydown.meta.pageDown": "isFromInput($event) || selectionService.onPageDown($event)", "keydown.shift.control.pageDown": "isFromInput($event) || selectionService.onPageDown($event)", "keydown.shift.meta.pageDown": "isFromInput($event) || selectionService.onPageDown($event)", "keydown.home": "isFromInput($event) || selectionService.onHome($event)", "keydown.shift.home": "isFromInput($event) || selectionService.onHome($event)", "keydown.control.home": "isFromInput($event) || selectionService.onHome($event)", "keydown.meta.home": "isFromInput($event) || selectionService.onHome($event)", "keydown.shift.control.home": "isFromInput($event) || selectionService.onHome($event)", "keydown.shift.meta.home": "isFromInput($event) || selectionService.onHome($event)", "keydown.end": "isFromInput($event) || selectionService.onEnd($event)", "keydown.shift.end": "isFromInput($event) || selectionService.onEnd($event)", "keydown.control.end": "isFromInput($event) || selectionService.onEnd($event)", "keydown.meta.end": "isFromInput($event) || selectionService.onEnd($event)", "keydown.shift.control.end": "isFromInput($event) || selectionService.onEnd($event)", "keydown.shift.meta.end": "isFromInput($event) || selectionService.onEnd($event)", "keydown": "isFromInput($event) || onKeydown($event)" }, properties: { "attr.tabindex": "0" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableKeyboardNavigatorDirective, decorators: [{
             type: Directive,
@@ -1857,6 +2251,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '(keydown.meta.arrowDown)': 'isFromInput($event) || selectionService.onArrowDown($event)',
                         '(keydown.shift.control.arrowDown)': 'isFromInput($event) || selectionService.onArrowDown($event)',
                         '(keydown.shift.meta.arrowDown)': 'isFromInput($event) || selectionService.onArrowDown($event)',
+                        '(keydown.arrowLeft)': 'isFromInput($event) || selectionService.onArrowLeft($event)',
+                        '(keydown.arrowRight)': 'isFromInput($event) || selectionService.onArrowRight($event)',
                         '(keydown.space)': 'isFromInput($event) || isFromButton($event) || selectionService.onSpace($event)',
                         '(keydown.control.space)': 'isFromInput($event) || isFromButton($event) || selectionService.onSpace($event)',
                         '(keydown.meta.space)': 'isFromInput($event) || isFromButton($event) || selectionService.onSpace($event)',
@@ -1865,19 +2261,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '(keydown.pageUp)': 'isFromInput($event) || selectionService.onPageUp($event)',
                         '(keydown.shift.pageUp)': 'isFromInput($event) || selectionService.onPageUp($event)',
                         '(keydown.control.pageUp)': 'isFromInput($event) || selectionService.onPageUp($event)',
+                        '(keydown.meta.pageUp)': 'isFromInput($event) || selectionService.onPageUp($event)',
                         '(keydown.shift.control.pageUp)': 'isFromInput($event) || selectionService.onPageUp($event)',
+                        '(keydown.shift.meta.pageUp)': 'isFromInput($event) || selectionService.onPageUp($event)',
                         '(keydown.pageDown)': 'isFromInput($event) || selectionService.onPageDown($event)',
                         '(keydown.shift.pageDown)': 'isFromInput($event) || selectionService.onPageDown($event)',
                         '(keydown.control.pageDown)': 'isFromInput($event) || selectionService.onPageDown($event)',
+                        '(keydown.meta.pageDown)': 'isFromInput($event) || selectionService.onPageDown($event)',
                         '(keydown.shift.control.pageDown)': 'isFromInput($event) || selectionService.onPageDown($event)',
+                        '(keydown.shift.meta.pageDown)': 'isFromInput($event) || selectionService.onPageDown($event)',
                         '(keydown.home)': 'isFromInput($event) || selectionService.onHome($event)',
                         '(keydown.shift.home)': 'isFromInput($event) || selectionService.onHome($event)',
                         '(keydown.control.home)': 'isFromInput($event) || selectionService.onHome($event)',
+                        '(keydown.meta.home)': 'isFromInput($event) || selectionService.onHome($event)',
                         '(keydown.shift.control.home)': 'isFromInput($event) || selectionService.onHome($event)',
+                        '(keydown.shift.meta.home)': 'isFromInput($event) || selectionService.onHome($event)',
                         '(keydown.end)': 'isFromInput($event) || selectionService.onEnd($event)',
                         '(keydown.shift.end)': 'isFromInput($event) || selectionService.onEnd($event)',
                         '(keydown.control.end)': 'isFromInput($event) || selectionService.onEnd($event)',
+                        '(keydown.meta.end)': 'isFromInput($event) || selectionService.onEnd($event)',
                         '(keydown.shift.control.end)': 'isFromInput($event) || selectionService.onEnd($event)',
+                        '(keydown.shift.meta.end)': 'isFromInput($event) || selectionService.onEnd($event)',
+                        '(keydown)': 'isFromInput($event) || onKeydown($event)',
                     },
                 }]
         }] });
@@ -2092,14 +2497,14 @@ class SciTableColumnsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciTableColumnsComponent, isStandalone: true, selector: "sci-table-columns", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<!-- Render a resize splitter per resizable column. -->\n@for (column of table().columns(); track column.name; let i = $index) {\n  @if (column.resizable()) {\n    <sci-splitter orientation=\"vertical\"\n                  [class.resizing]=\"column.resizing()\"\n                  [attr.data-column]=\"column.name\"\n                  [style.grid-column]=\"i + 1\"\n                  (start)=\"onResizeStart(column)\"\n                  (move)=\"onResize(column, $event)\"\n                  (end)=\"onResizeEnd()\"\n                  (reset)=\"onPack(column)\"\n                  (mouseenter)=\"onMouseEnter()\"\n                  (mouseleave)=\"onMouseLeave()\"/>\n  }\n}\n\n<!-- Render an invisible synthetic column per column to read current widths and set minimum widths. -->\n@for (column of table().columns(); track column.name; let i = $index) {\n  <sci-table-column [column]=\"column\" [style.grid-column]=\"i + 1\"/>\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;grid-template-columns:subgrid;overflow-x:clip;pointer-events:none}@container (style(--sci-table-header-column-divider: visible)) and (style(--\\275sci-table-header-visible: true)){:host{--\\275sci-table-header-column-divider-visible: true}}:host:has(>sci-splitter:hover){--\\275sci-column-splitter-hover: true}:host>sci-splitter,:host>sci-table-column{grid-row:1}:host>sci-splitter{--sci-splitter-size: var(--\\275sci-table-border-size);--sci-splitter-size-hover: var(--\\275sci-table-border-size);--sci-splitter-cross-axis-size: 0;--sci-splitter-background-color: var(--\\275sci-table-border-color);justify-self:end;pointer-events:auto}@container style(--\\275sci-table-header-column-divider-visible: true){:host>sci-splitter{--sci-splitter-cross-axis-start: .5em;--sci-splitter-cross-axis-size: calc(var(--\\275sci-table-header-height) - 2 * var(--sci-splitter-cross-axis-start))}@container style(--\\275sci-table-viewport-client-width >= --\\275sci-table-viewport-width){:host>sci-splitter:last-of-type:not(.resizing):not(:hover){--sci-splitter-cross-axis-size: 0}}}:host>sci-splitter:is(:hover,.resizing){--sci-splitter-background-color: rgb(from var(--\\275sci-table-border-color) r g b / .5);--sci-splitter-cross-axis-size: 100%}@container style(--\\275sci-table-header-column-divider-visible: true){:host>sci-splitter:is(:hover,.resizing){--sci-splitter-cross-axis-size: auto;--sci-splitter-cross-axis-end: 0}}@container style(--\\275sci-table-resizing: true){:host>sci-splitter:not(.resizing){pointer-events:none}}@container (style(--\\275sci-table-scrolling: true)) and (not style(--\\275sci-table-resizing: true)) and (not style(--\\275sci-column-splitter-hover: true)){:host>sci-splitter{pointer-events:none}}:host>sci-table-column{height:0}\n"], dependencies: [{ kind: "component", type: SciSplitterComponent, selector: "sci-splitter", inputs: ["orientation"], outputs: ["start", "move", "end", "reset"] }, { kind: "component", type: SciTableColumnComponent, selector: "sci-table-column", inputs: ["column"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciTableColumnsComponent, isStandalone: true, selector: "sci-table-columns", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<!-- Render splitters, also for non-resizable columns, as non-interactive column header dividers. -->\n@for (column of table().columns(); track column.name; let i = $index) {\n  <sci-splitter orientation=\"vertical\"\n                [class.resizing]=\"column.resizing()\"\n                [attr.data-column]=\"column.name\"\n                [attr.data-non-interactive]=\"!column.resizable() ? '' : null\"\n                [style.grid-column]=\"i + 1\"\n                (start)=\"onResizeStart(column)\"\n                (move)=\"onResize(column, $event)\"\n                (end)=\"onResizeEnd()\"\n                (reset)=\"onPack(column)\"\n                (mouseenter)=\"onMouseEnter()\"\n                (mouseleave)=\"onMouseLeave()\"/>\n}\n\n<!-- Render an invisible synthetic column per column to read current widths and set minimum widths. -->\n@for (column of table().columns(); track column.name; let i = $index) {\n  <sci-table-column [column]=\"column\" [style.grid-column]=\"i + 1\"/>\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;grid-template-columns:subgrid;overflow-x:clip;pointer-events:none}@container (style(--sci-table-header-column-divider: visible)) and (style(--\\275sci-table-header-visible: true)){:host{--\\275sci-table-header-column-divider-visible: true}}:host:has(>sci-splitter:hover){--\\275sci-column-splitter-hover: true}:host>sci-splitter,:host>sci-table-column{grid-row:1}:host>sci-splitter{--sci-splitter-size: var(--\\275sci-table-border-size);--sci-splitter-size-hover: var(--\\275sci-table-border-size);--sci-splitter-cross-axis-size: 0;--sci-splitter-background-color: var(--\\275sci-table-border-color);justify-self:end}:host>sci-splitter:where(:not([data-non-interactive])){pointer-events:auto}@container style(--\\275sci-table-header-column-divider-visible: true){:host>sci-splitter{--sci-splitter-cross-axis-start: .5em;--sci-splitter-cross-axis-size: calc(var(--\\275sci-table-header-height) - 2 * var(--sci-splitter-cross-axis-start))}@container style(--\\275sci-table-viewport-client-width >= --\\275sci-table-viewport-width){:host>sci-splitter:last-of-type:not(.resizing):not(:hover){--sci-splitter-cross-axis-size: 0}}}:host>sci-splitter:is(:hover,.resizing){--sci-splitter-background-color: rgb(from var(--\\275sci-table-border-color) r g b / .5);--sci-splitter-cross-axis-start: .5em;--sci-splitter-cross-axis-size: auto;--sci-splitter-cross-axis-end: 0}@container not style(--\\275sci-table-header-column-divider-visible: true){:host>sci-splitter:is(:hover,.resizing){--sci-splitter-cross-axis-start: 0}}@container style(--\\275sci-table-resizing: true){:host>sci-splitter:not(.resizing){pointer-events:none}}@container (style(--\\275sci-table-scrolling: true)) and (not style(--\\275sci-table-resizing: true)) and (not style(--\\275sci-column-splitter-hover: true)){:host>sci-splitter{pointer-events:none}}:host>sci-table-column{height:0}\n"], dependencies: [{ kind: "component", type: SciSplitterComponent, selector: "sci-splitter", inputs: ["orientation"], outputs: ["start", "move", "end", "reset"] }, { kind: "component", type: SciTableColumnComponent, selector: "sci-table-column", inputs: ["column"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciTableColumnsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sci-table-columns', imports: [
                         SciSplitterComponent,
                         SciTableColumnComponent,
-                    ], template: "<!-- Render a resize splitter per resizable column. -->\n@for (column of table().columns(); track column.name; let i = $index) {\n  @if (column.resizable()) {\n    <sci-splitter orientation=\"vertical\"\n                  [class.resizing]=\"column.resizing()\"\n                  [attr.data-column]=\"column.name\"\n                  [style.grid-column]=\"i + 1\"\n                  (start)=\"onResizeStart(column)\"\n                  (move)=\"onResize(column, $event)\"\n                  (end)=\"onResizeEnd()\"\n                  (reset)=\"onPack(column)\"\n                  (mouseenter)=\"onMouseEnter()\"\n                  (mouseleave)=\"onMouseLeave()\"/>\n  }\n}\n\n<!-- Render an invisible synthetic column per column to read current widths and set minimum widths. -->\n@for (column of table().columns(); track column.name; let i = $index) {\n  <sci-table-column [column]=\"column\" [style.grid-column]=\"i + 1\"/>\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;grid-template-columns:subgrid;overflow-x:clip;pointer-events:none}@container (style(--sci-table-header-column-divider: visible)) and (style(--\\275sci-table-header-visible: true)){:host{--\\275sci-table-header-column-divider-visible: true}}:host:has(>sci-splitter:hover){--\\275sci-column-splitter-hover: true}:host>sci-splitter,:host>sci-table-column{grid-row:1}:host>sci-splitter{--sci-splitter-size: var(--\\275sci-table-border-size);--sci-splitter-size-hover: var(--\\275sci-table-border-size);--sci-splitter-cross-axis-size: 0;--sci-splitter-background-color: var(--\\275sci-table-border-color);justify-self:end;pointer-events:auto}@container style(--\\275sci-table-header-column-divider-visible: true){:host>sci-splitter{--sci-splitter-cross-axis-start: .5em;--sci-splitter-cross-axis-size: calc(var(--\\275sci-table-header-height) - 2 * var(--sci-splitter-cross-axis-start))}@container style(--\\275sci-table-viewport-client-width >= --\\275sci-table-viewport-width){:host>sci-splitter:last-of-type:not(.resizing):not(:hover){--sci-splitter-cross-axis-size: 0}}}:host>sci-splitter:is(:hover,.resizing){--sci-splitter-background-color: rgb(from var(--\\275sci-table-border-color) r g b / .5);--sci-splitter-cross-axis-size: 100%}@container style(--\\275sci-table-header-column-divider-visible: true){:host>sci-splitter:is(:hover,.resizing){--sci-splitter-cross-axis-size: auto;--sci-splitter-cross-axis-end: 0}}@container style(--\\275sci-table-resizing: true){:host>sci-splitter:not(.resizing){pointer-events:none}}@container (style(--\\275sci-table-scrolling: true)) and (not style(--\\275sci-table-resizing: true)) and (not style(--\\275sci-column-splitter-hover: true)){:host>sci-splitter{pointer-events:none}}:host>sci-table-column{height:0}\n"] }]
+                    ], template: "<!-- Render splitters, also for non-resizable columns, as non-interactive column header dividers. -->\n@for (column of table().columns(); track column.name; let i = $index) {\n  <sci-splitter orientation=\"vertical\"\n                [class.resizing]=\"column.resizing()\"\n                [attr.data-column]=\"column.name\"\n                [attr.data-non-interactive]=\"!column.resizable() ? '' : null\"\n                [style.grid-column]=\"i + 1\"\n                (start)=\"onResizeStart(column)\"\n                (move)=\"onResize(column, $event)\"\n                (end)=\"onResizeEnd()\"\n                (reset)=\"onPack(column)\"\n                (mouseenter)=\"onMouseEnter()\"\n                (mouseleave)=\"onMouseLeave()\"/>\n}\n\n<!-- Render an invisible synthetic column per column to read current widths and set minimum widths. -->\n@for (column of table().columns(); track column.name; let i = $index) {\n  <sci-table-column [column]=\"column\" [style.grid-column]=\"i + 1\"/>\n}\n", styles: ["@charset \"UTF-8\";:host{display:grid;grid-template-columns:subgrid;overflow-x:clip;pointer-events:none}@container (style(--sci-table-header-column-divider: visible)) and (style(--\\275sci-table-header-visible: true)){:host{--\\275sci-table-header-column-divider-visible: true}}:host:has(>sci-splitter:hover){--\\275sci-column-splitter-hover: true}:host>sci-splitter,:host>sci-table-column{grid-row:1}:host>sci-splitter{--sci-splitter-size: var(--\\275sci-table-border-size);--sci-splitter-size-hover: var(--\\275sci-table-border-size);--sci-splitter-cross-axis-size: 0;--sci-splitter-background-color: var(--\\275sci-table-border-color);justify-self:end}:host>sci-splitter:where(:not([data-non-interactive])){pointer-events:auto}@container style(--\\275sci-table-header-column-divider-visible: true){:host>sci-splitter{--sci-splitter-cross-axis-start: .5em;--sci-splitter-cross-axis-size: calc(var(--\\275sci-table-header-height) - 2 * var(--sci-splitter-cross-axis-start))}@container style(--\\275sci-table-viewport-client-width >= --\\275sci-table-viewport-width){:host>sci-splitter:last-of-type:not(.resizing):not(:hover){--sci-splitter-cross-axis-size: 0}}}:host>sci-splitter:is(:hover,.resizing){--sci-splitter-background-color: rgb(from var(--\\275sci-table-border-color) r g b / .5);--sci-splitter-cross-axis-start: .5em;--sci-splitter-cross-axis-size: auto;--sci-splitter-cross-axis-end: 0}@container not style(--\\275sci-table-header-column-divider-visible: true){:host>sci-splitter:is(:hover,.resizing){--sci-splitter-cross-axis-start: 0}}@container style(--\\275sci-table-resizing: true){:host>sci-splitter:not(.resizing){pointer-events:none}}@container (style(--\\275sci-table-scrolling: true)) and (not style(--\\275sci-table-resizing: true)) and (not style(--\\275sci-column-splitter-hover: true)){:host>sci-splitter{pointer-events:none}}:host>sci-table-column{height:0}\n"] }]
         }], propDecorators: { rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }] } });
 
 /*
@@ -2215,15 +2620,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 class SciColumnHeaderComponent {
     column = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    labelElement = viewChild('label', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelElement" }] : /* istanbul ignore next */ [])); // public visibility required to be accessible in `configureTooltip` function
     table = inject(ɵSCI_TABLE);
-    header = text(computed(() => this.column().header()));
     sortDirection = computed(() => this.table().sortCriteria().find(criteria => criteria.columnName === this.column().name)?.direction, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sortDirection" }] : /* istanbul ignore next */ []));
     onSort(event) {
         this.table().sort(this.column().name, event.ctrlKey || event.metaKey);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciColumnHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciColumnHeaderComponent, isStandalone: true, selector: "sci-column-header", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-column": "column().name", "attr.title": "header()" } }, ngImport: i0, template: "@if (column().sortable()) {\n  <button class=\"sort e2e-sort\"\n          [attr.data-sort-direction]=\"sortDirection()\"\n          (click)=\"onSort($event)\">\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"header_template\"/>\n\n    <!-- Sort Indicator -->\n    @switch (sortDirection()) {\n      @case ('asc') {\n        <sci-icon>scion.sort_ascending</sci-icon>\n      }\n      @case ('desc') {\n        <sci-icon>scion.sort_descending</sci-icon>\n      }\n      @default {\n        <sci-icon class=\"no-sort\">scion.sort_indicator</sci-icon>\n      }\n    }\n  </button>\n} @else {\n  <ng-container *ngTemplateOutlet=\"header_template\"/>\n}\n\n<ng-template #header_template>\n  <span class=\"header e2e-header\" [class.wrap]=\"table().wrapHeader()\">{{header()}}</span>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:grid;align-items:center}:host:not(:has(button.sort)){padding-inline:var(--\\275sci-table-cell-padding-inline)}:host:is(:focus-visible,:hover){--\\275sci-table-column-header-hover: true}:host>button.sort{all:unset;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5em;padding-inline:var(--\\275sci-table-cell-padding-inline);cursor:var(--sci-table-header-cursor);align-self:stretch}@container not style(--\\275sci-table-column-header-hover: true){:host>button.sort>sci-icon.no-sort{visibility:hidden}}@container style(--\\275sci-table-column-header-hover: true){:host>button.sort{background-color:var(--sci-table-header-background-color-hover)}}:host span.header{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sci-table-header-text-color);font-family:var(--sci-table-header-font-family),sans-serif;font-weight:var(--sci-table-header-font-weight);font-size:var(--sci-table-header-font-size);padding-block:.25em}:host span.header.wrap{white-space:wrap}\n"], dependencies: [{ kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciColumnHeaderComponent, isStandalone: true, selector: "sci-column-header", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-column": "column().name" } }, providers: [
+            configureTooltip$1(),
+        ], viewQueries: [{ propertyName: "labelElement", first: true, predicate: ["label"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.SciTooltipOnOverflowDirective }], ngImport: i0, template: "@if (column().sortable()) {\n  <button class=\"sort e2e-sort\"\n          [attr.data-sort-direction]=\"sortDirection()\"\n          (click)=\"onSort($event)\">\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"header_template\"/>\n\n    <!-- Sort Indicator -->\n    @switch (sortDirection()) {\n      @case ('asc') {\n        <sci-icon>scion:sort_ascending</sci-icon>\n      }\n      @case ('desc') {\n        <sci-icon>scion:sort_descending</sci-icon>\n      }\n      @default {\n        <sci-icon class=\"no-sort\">scion:sort_indicator</sci-icon>\n      }\n    }\n  </button>\n} @else {\n  <ng-container *ngTemplateOutlet=\"header_template\"/>\n}\n\n<ng-template #header_template>\n  @if (column().header.icon) {\n    <sci-icon class=\"icon e2e-icon\">{{column().header.icon}}</sci-icon>\n  }\n\n  @if (column().header.label) {\n    <span [class.wrap]=\"table().wrapHeader()\" class=\"label\" #label>\n      {{column().header.label!()}}\n    </span>\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:grid;align-items:center;gap:.25em}:host:not(:has(button.sort)){padding-inline:var(--\\275sci-table-cell-padding-inline)}:host:is(:focus-visible,:hover){--\\275sci-table-column-header-hover: true}:host:has(>sci-icon.icon):has(>span.label){grid-template-columns:auto 1fr}:host>button.sort{all:unset;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25em;padding-inline:var(--\\275sci-table-cell-padding-inline);cursor:var(--sci-table-header-cursor);align-self:stretch}:host>button.sort:has(>sci-icon.icon):has(>span.label){grid-template-columns:auto minmax(0,1fr) auto}:host>button.sort:not(:has(>:is(sci-icon.icon,span.label))){grid-template-columns:1fr;justify-items:end}@container not style(--\\275sci-table-column-header-hover: true){:host>button.sort>sci-icon.no-sort{visibility:hidden}}@container style(--\\275sci-table-column-header-hover: true){:host>button.sort{background-color:var(--sci-table-header-background-color-hover)}}:host span.label{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sci-table-header-text-color);font-family:var(--sci-table-header-font-family),sans-serif;font-weight:var(--sci-table-header-font-weight);font-size:var(--sci-table-header-font-size);padding-block:.25em}:host span.label.wrap{white-space:wrap}\n"], dependencies: [{ kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciColumnHeaderComponent, decorators: [{
             type: Component,
@@ -2232,9 +2640,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         NgTemplateOutlet,
                     ], host: {
                         '[attr.data-column]': 'column().name',
-                        '[attr.title]': 'header()',
-                    }, template: "@if (column().sortable()) {\n  <button class=\"sort e2e-sort\"\n          [attr.data-sort-direction]=\"sortDirection()\"\n          (click)=\"onSort($event)\">\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"header_template\"/>\n\n    <!-- Sort Indicator -->\n    @switch (sortDirection()) {\n      @case ('asc') {\n        <sci-icon>scion.sort_ascending</sci-icon>\n      }\n      @case ('desc') {\n        <sci-icon>scion.sort_descending</sci-icon>\n      }\n      @default {\n        <sci-icon class=\"no-sort\">scion.sort_indicator</sci-icon>\n      }\n    }\n  </button>\n} @else {\n  <ng-container *ngTemplateOutlet=\"header_template\"/>\n}\n\n<ng-template #header_template>\n  <span class=\"header e2e-header\" [class.wrap]=\"table().wrapHeader()\">{{header()}}</span>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:grid;align-items:center}:host:not(:has(button.sort)){padding-inline:var(--\\275sci-table-cell-padding-inline)}:host:is(:focus-visible,:hover){--\\275sci-table-column-header-hover: true}:host>button.sort{all:unset;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.5em;padding-inline:var(--\\275sci-table-cell-padding-inline);cursor:var(--sci-table-header-cursor);align-self:stretch}@container not style(--\\275sci-table-column-header-hover: true){:host>button.sort>sci-icon.no-sort{visibility:hidden}}@container style(--\\275sci-table-column-header-hover: true){:host>button.sort{background-color:var(--sci-table-header-background-color-hover)}}:host span.header{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sci-table-header-text-color);font-family:var(--sci-table-header-font-family),sans-serif;font-weight:var(--sci-table-header-font-weight);font-size:var(--sci-table-header-font-size);padding-block:.25em}:host span.header.wrap{white-space:wrap}\n"] }]
-        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }] } });
+                    }, hostDirectives: [
+                        SciTooltipOnOverflowDirective,
+                    ], providers: [
+                        configureTooltip$1(),
+                    ], template: "@if (column().sortable()) {\n  <button class=\"sort e2e-sort\"\n          [attr.data-sort-direction]=\"sortDirection()\"\n          (click)=\"onSort($event)\">\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"header_template\"/>\n\n    <!-- Sort Indicator -->\n    @switch (sortDirection()) {\n      @case ('asc') {\n        <sci-icon>scion:sort_ascending</sci-icon>\n      }\n      @case ('desc') {\n        <sci-icon>scion:sort_descending</sci-icon>\n      }\n      @default {\n        <sci-icon class=\"no-sort\">scion:sort_indicator</sci-icon>\n      }\n    }\n  </button>\n} @else {\n  <ng-container *ngTemplateOutlet=\"header_template\"/>\n}\n\n<ng-template #header_template>\n  @if (column().header.icon) {\n    <sci-icon class=\"icon e2e-icon\">{{column().header.icon}}</sci-icon>\n  }\n\n  @if (column().header.label) {\n    <span [class.wrap]=\"table().wrapHeader()\" class=\"label\" #label>\n      {{column().header.label!()}}\n    </span>\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:grid;align-items:center;gap:.25em}:host:not(:has(button.sort)){padding-inline:var(--\\275sci-table-cell-padding-inline)}:host:is(:focus-visible,:hover){--\\275sci-table-column-header-hover: true}:host:has(>sci-icon.icon):has(>span.label){grid-template-columns:auto 1fr}:host>button.sort{all:unset;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25em;padding-inline:var(--\\275sci-table-cell-padding-inline);cursor:var(--sci-table-header-cursor);align-self:stretch}:host>button.sort:has(>sci-icon.icon):has(>span.label){grid-template-columns:auto minmax(0,1fr) auto}:host>button.sort:not(:has(>:is(sci-icon.icon,span.label))){grid-template-columns:1fr;justify-items:end}@container not style(--\\275sci-table-column-header-hover: true){:host>button.sort>sci-icon.no-sort{visibility:hidden}}@container style(--\\275sci-table-column-header-hover: true){:host>button.sort{background-color:var(--sci-table-header-background-color-hover)}}:host span.label{display:inline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sci-table-header-text-color);font-family:var(--sci-table-header-font-family),sans-serif;font-weight:var(--sci-table-header-font-weight);font-size:var(--sci-table-header-font-size);padding-block:.25em}:host span.label.wrap{white-space:wrap}\n"] }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], labelElement: [{ type: i0.ViewChild, args: ['label', { isSignal: true }] }] } });
+function configureTooltip$1() {
+    return [
+        {
+            provide: TOOLTIP_ON_OVERFLOW_DIRECTIVE_ADDITIONAL_TEXT,
+            useFactory: () => {
+                const host = inject(SciColumnHeaderComponent);
+                return computed(() => host.column().header.tooltip?.());
+            },
+        },
+        {
+            provide: TOOLTIP_ON_OVERFLOW_DIRECTIVE_SOURCE_ELEMENT,
+            useFactory: () => inject(SciColumnHeaderComponent).labelElement,
+        },
+    ];
+}
 
 /*
  * Copyright (c) 2018-2026 Swiss Federal Railways
@@ -2245,22 +2671,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-class SciColumnFilterBooleanLabelPipe {
-    transform(value) {
-        if (value === true) {
-            return '%scion.components.yes.value';
-        }
-        if (value === false) {
-            return '%scion.components.no.value';
-        }
-        return null;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciColumnFilterBooleanLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: SciColumnFilterBooleanLabelPipe, isStandalone: true, name: "sciColumnFilterBooleanLabel" });
+/**
+ * Creates a comma-separated string with localized labels of the given enum values.
+ */
+class SciEnumLabelPipe {
+    _injector = inject(Injector);
+    transform(values, enumeration) {
+        return computed(() => Arrays.coerce(values)
+            .map(value => enumeration.find(entry => entry.value === value)?.label)
+            .map(label => untracked(() => text(label, { injector: this._injector }))())
+            .filter(Boolean)
+            .join(', ') || undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciEnumLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: SciEnumLabelPipe, isStandalone: true, name: "sciEnumLabel" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciColumnFilterBooleanLabelPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciEnumLabelPipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'sciColumnFilterBooleanLabel' }]
+            args: [{ name: 'sciEnumLabel' }]
         }] });
 
 /*
@@ -2275,33 +2703,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
 class SciColumnFilterComponent {
     column = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+    inputElement = viewChild('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputElement" }] : /* istanbul ignore next */ [])); // public visibility required to be accessible in `configureTooltip` function
     filter = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
-    input = viewChild('input', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
+    dimension = dimension(inject(ElementRef));
     _table = inject(ɵSCI_TABLE);
     _menuService = inject(_SciMenuService);
     _injector = inject(Injector);
     _host = inject(ElementRef).nativeElement;
-    _menu;
+    menu;
     constructor() {
         this.bindToModel();
     }
     onFilterClick() {
-        if (this.column().type === 'boolean') {
-            this.toggleBooleanMenu();
+        if (this.column().type === 'enum') {
+            this.toggleEnumChooser();
+        }
+        else {
+            this.inputElement().nativeElement.focus();
         }
-        this.input().nativeElement.focus();
     }
     onReset(event) {
         this.filter.set(null);
-        this.input().nativeElement.focus();
+        this.inputElement().nativeElement.focus();
         event.stopPropagation(); // prevent opening menu
     }
     bindToModel() {
         const filterDebounced = debounced(computed(() => trim(this.filter())), async (value) => {
-            // Debounce only if not empty.
-            if (value !== null && typeof value !== 'boolean') {
+            // Debounce only if not empty and not an enum.
+            if (value !== null && this.column().type !== 'enum') {
                 await firstValueFrom(timer(200));
             }
         });
@@ -2314,56 +2745,93 @@ class SciColumnFilterComponent {
             });
         });
     }
-    toggleBooleanMenu() {
+    toggleEnumChooser() {
         // Close menu if already opened.
-        if (this._menu) {
-            this._menu.close();
+        if (this.menu) {
+            this.menu.close();
             return;
         }
-        const injector = createDestroyableInjector({ parent: this._injector });
+        const column = this.column();
+        const injector = _createDestroyableInjector({ parent: this._injector });
         runInInjectionContext(injector, () => {
+            const menuId = `menu:column-filter-${UUID.randomUUID()}`;
             // Contribute menu items.
-            contributeMenu('menu:column-filter', menu => menu
-                .addMenuItem({ label: '%scion.components.yes.value', attributes: { 'data-option': 'true' }, onSelect: () => this.filter.set(true) })
-                .addMenuItem({ label: '%scion.components.no.value', attributes: { 'data-option': 'false' }, onSelect: () => this.filter.set(false) }));
+            contributeMenu(menuId, menu => {
+                const multi = column.filterable() === 'multi';
+                column.enumeration().forEach(entry => menu.addMenuItem({
+                    label: entry.label,
+                    checked: multi ? computed(() => this.filter()?.includes(entry.value) ?? false) : undefined,
+                    icon: column.format.filter.icon ? entry.icon : undefined,
+                    attributes: { 'data-option': `${entry.value}` },
+                    onSelect: () => this.filter.update(filter => {
+                        if (multi) {
+                            const values = new Set(filter ?? []);
+                            values.has(entry.value) ? values.delete(entry.value) : values.add(entry.value);
+                            return values.size ? Array.from(values) : null;
+                        }
+                        else {
+                            return entry.value;
+                        }
+                    }),
+                }));
+            });
             // Open menu.
-            this._menu = this._menuService.open('menu:column-filter', {
+            this.menu = this._menuService.open(menuId, {
                 anchor: this._host,
                 minWidth: `${this._host.offsetWidth}px`,
+                maxHeight: '300px',
+                cssClass: 'e2e-filter',
+                filter: column.enumeration().length >= 8 ? { focus: true } : false,
+                maxWidth: `max(300px, ${this._host.offsetWidth}px)`, // overflow long enumeration labels
                 offset: { y: -1 },
             });
             // Close menu when start resizing a column. By default, closes the menu only on mouse up.
             toObservable(this._table().resizing)
                 .pipe(skip(1))
-                .subscribe(() => this._menu?.close());
-            this._menu.onClose(() => {
+                .subscribe(() => this.menu?.close());
+            this.menu.onClose(() => {
                 injector.destroy();
                 // Restore focus manually as it is not restored automatically since opening the popover inside Shadow DOM.
                 // TODO [menu] Consider restore focus manually in Menu API due to restriction in shadow DOM.
-                this.input().nativeElement.focus();
-                this._menu = undefined;
+                this.inputElement().nativeElement.focus();
+                this.menu = undefined;
             });
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciColumnFilterComponent, isStandalone: true, selector: "sci-column-filter", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "column().filterable() && onFilterClick()" }, properties: { "attr.data-column": "column().name", "attr.data-disabled": "!column().filterable() ? '' : null" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (column().filterable()) {\n  @let active = filter() !== null && filter() !== '';\n\n  <sci-icon class=\"filter e2e-filter\" [class.active]=\"active\">scion.filter</sci-icon>\n\n  @switch (column().type) {\n    @case ('number') {\n      <input [(ngModel)]=\"filter\" type=\"number\" #input/>\n    }\n    @case ('boolean') {\n      <input [ngModel]=\"(filter() | sciColumnFilterBooleanLabel | sciText)()\" type=\"button\" #input>\n      <sci-icon class=\"chevron\">scion.chevron_down</sci-icon>\n    }\n    @default {\n      <input [(ngModel)]=\"filter\" type=\"text\" #input/>\n    }\n  }\n\n  @if (active) {\n    <button class=\"clear e2e-clear\" (click)=\"onReset($event)\">\n      <sci-icon>scion.clear</sci-icon>\n    </button>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;gap:.5em;align-items:center;padding-inline:var(--\\275sci-table-cell-padding-inline);border-bottom:var(--\\275sci-table-border-size) solid transparent;margin-bottom:-1px;transition:border-bottom-color ease-in-out .15s,color ease-in-out .15s}:host:focus-within:not(:disabled):not(:has(input:disabled)){border-bottom-color:var(--sci-color-accent)}:host>sci-icon.filter.active{color:var(--sci-color-accent)}:host>sci-icon.chevron{--sci-icon-size: var(--sci-button-icon-size)}:host:has(input[type=button]){cursor:var(--sci-button-cursor)}:host:has(input[type=button]):has(button.clear)>sci-icon.chevron{display:none}:host>input{all:unset;flex:auto;align-self:stretch;width:0;min-width:0;color:var(--sci-color-text);appearance:auto;box-sizing:border-box}:host>input[type=number]::-webkit-outer-spin-button,:host>input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}:host>button.clear{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>button.clear:hover:where(:not(:disabled)){background-color:var(--sci-button-background-color-hover)}:host>button.clear:active:where(:not(:disabled)){background-color:var(--sci-button-background-color-active)}:host>button.clear:focus:not(:focus-visible){outline:none}:host>button.clear:focus-visible{outline:var(--sci-button-outline-width) solid var(--sci-color-accent)}:host>button.clear:disabled{color:var(--sci-button-text-color-disabled)}:host>button.clear{padding:1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "pipe", type: SciTextPipe, name: "sciText" }, { kind: "pipe", type: SciColumnFilterBooleanLabelPipe, name: "sciColumnFilterBooleanLabel" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SciColumnFilterComponent, isStandalone: true, selector: "sci-column-filter", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "column().filterable() && onFilterClick()" }, properties: { "attr.data-column": "column().name", "attr.data-disabled": "!column().filterable() ? '' : null", "class.collapsed": "dimension().clientWidth < 50" } }, providers: [
+            configureTooltip(),
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.SciTooltipOnOverflowDirective }], ngImport: i0, template: "@let column = this.column();\n@if (column.filterable()) {\n  @let active = filter() !== null && filter() !== '';\n\n  <sci-icon class=\"filter e2e-filter\" [class.active]=\"active\">scion:filter</sci-icon>\n\n  @switch (column.type) {\n    @case ('number') {\n      <input [(ngModel)]=\"filter\" type=\"number\" #input/>\n    }\n    @case ('enum') {\n      <input [ngModel]=\"(filter() | sciEnumLabel:column.enumeration())()\" type=\"button\" #input>\n      <sci-icon class=\"chevron\">{{menu ? 'scion:chevron_up' : 'scion:chevron_down'}}</sci-icon>\n    }\n    @default {\n      <input [(ngModel)]=\"filter\" type=\"text\" #input/>\n    }\n  }\n\n  @if (active) {\n    <button class=\"clear e2e-clear\" (click)=\"onReset($event)\" [attr.title]=\"('%scion:components:clear.tooltip' | sciText)()\">\n      <sci-icon>scion:clear</sci-icon>\n    </button>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;gap:.25em;align-items:center;padding-inline:var(--\\275sci-table-cell-padding-inline);border-bottom:var(--\\275sci-table-border-size) solid transparent;margin-bottom:-1px;transition:border-bottom-color ease-in-out .15s,color ease-in-out .15s}:host:focus-within:not(:disabled):not(:has(input:disabled)){border-bottom-color:var(--sci-color-accent)}:host>sci-icon.filter.active{color:var(--sci-color-accent)}:host:has(input[type=button]){cursor:var(--sci-button-cursor)}:host:has(input[type=button]):has(button.clear)>sci-icon.chevron{display:none}:host.collapsed{gap:0}:host>input{all:unset;flex:auto;align-self:stretch;width:0;min-width:0;color:var(--sci-color-text);appearance:auto;box-sizing:border-box}:host>input[type=number]::-webkit-outer-spin-button,:host>input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}:host>input[type=button]{white-space:nowrap;text-overflow:ellipsis}:host>button.clear{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>button.clear:hover:where(:not(:disabled)){background-color:var(--sci-button-background-color-hover)}:host>button.clear:active:where(:not(:disabled)){background-color:var(--sci-button-background-color-active)}:host>button.clear:focus:not(:focus-visible){outline:none}:host>button.clear:focus-visible{outline:var(--sci-button-outline-width) solid var(--sci-color-accent)}:host>button.clear:disabled{color:var(--sci-button-text-color-disabled)}:host>button.clear{padding:1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SciIconComponent, selector: "sci-icon" }, { kind: "pipe", type: SciEnumLabelPipe, name: "sciEnumLabel" }, { kind: "pipe", type: SciTextPipe, name: "sciText" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SciColumnFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sci-column-filter', imports: [
                         FormsModule,
                         SciIconComponent,
+                        SciEnumLabelPipe,
                         SciTextPipe,
-                        SciColumnFilterBooleanLabelPipe,
+                    ], hostDirectives: [
+                        SciTooltipOnOverflowDirective,
                     ], host: {
                         '[attr.data-column]': 'column().name',
                         '[attr.data-disabled]': `!column().filterable() ? '' : null`,
+                        '[class.collapsed]': 'dimension().clientWidth < 50',
                         '(click)': 'column().filterable() && onFilterClick()',
-                    }, template: "@if (column().filterable()) {\n  @let active = filter() !== null && filter() !== '';\n\n  <sci-icon class=\"filter e2e-filter\" [class.active]=\"active\">scion.filter</sci-icon>\n\n  @switch (column().type) {\n    @case ('number') {\n      <input [(ngModel)]=\"filter\" type=\"number\" #input/>\n    }\n    @case ('boolean') {\n      <input [ngModel]=\"(filter() | sciColumnFilterBooleanLabel | sciText)()\" type=\"button\" #input>\n      <sci-icon class=\"chevron\">scion.chevron_down</sci-icon>\n    }\n    @default {\n      <input [(ngModel)]=\"filter\" type=\"text\" #input/>\n    }\n  }\n\n  @if (active) {\n    <button class=\"clear e2e-clear\" (click)=\"onReset($event)\">\n      <sci-icon>scion.clear</sci-icon>\n    </button>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;gap:.5em;align-items:center;padding-inline:var(--\\275sci-table-cell-padding-inline);border-bottom:var(--\\275sci-table-border-size) solid transparent;margin-bottom:-1px;transition:border-bottom-color ease-in-out .15s,color ease-in-out .15s}:host:focus-within:not(:disabled):not(:has(input:disabled)){border-bottom-color:var(--sci-color-accent)}:host>sci-icon.filter.active{color:var(--sci-color-accent)}:host>sci-icon.chevron{--sci-icon-size: var(--sci-button-icon-size)}:host:has(input[type=button]){cursor:var(--sci-button-cursor)}:host:has(input[type=button]):has(button.clear)>sci-icon.chevron{display:none}:host>input{all:unset;flex:auto;align-self:stretch;width:0;min-width:0;color:var(--sci-color-text);appearance:auto;box-sizing:border-box}:host>input[type=number]::-webkit-outer-spin-button,:host>input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}:host>button.clear{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>button.clear:hover:where(:not(:disabled)){background-color:var(--sci-button-background-color-hover)}:host>button.clear:active:where(:not(:disabled)){background-color:var(--sci-button-background-color-active)}:host>button.clear:focus:not(:focus-visible){outline:none}:host>button.clear:focus-visible{outline:var(--sci-button-outline-width) solid var(--sci-color-accent)}:host>button.clear:disabled{color:var(--sci-button-text-color-disabled)}:host>button.clear{padding:1px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
+                    }, providers: [
+                        configureTooltip(),
+                    ], template: "@let column = this.column();\n@if (column.filterable()) {\n  @let active = filter() !== null && filter() !== '';\n\n  <sci-icon class=\"filter e2e-filter\" [class.active]=\"active\">scion:filter</sci-icon>\n\n  @switch (column.type) {\n    @case ('number') {\n      <input [(ngModel)]=\"filter\" type=\"number\" #input/>\n    }\n    @case ('enum') {\n      <input [ngModel]=\"(filter() | sciEnumLabel:column.enumeration())()\" type=\"button\" #input>\n      <sci-icon class=\"chevron\">{{menu ? 'scion:chevron_up' : 'scion:chevron_down'}}</sci-icon>\n    }\n    @default {\n      <input [(ngModel)]=\"filter\" type=\"text\" #input/>\n    }\n  }\n\n  @if (active) {\n    <button class=\"clear e2e-clear\" (click)=\"onReset($event)\" [attr.title]=\"('%scion:components:clear.tooltip' | sciText)()\">\n      <sci-icon>scion:clear</sci-icon>\n    </button>\n  }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;gap:.25em;align-items:center;padding-inline:var(--\\275sci-table-cell-padding-inline);border-bottom:var(--\\275sci-table-border-size) solid transparent;margin-bottom:-1px;transition:border-bottom-color ease-in-out .15s,color ease-in-out .15s}:host:focus-within:not(:disabled):not(:has(input:disabled)){border-bottom-color:var(--sci-color-accent)}:host>sci-icon.filter.active{color:var(--sci-color-accent)}:host:has(input[type=button]){cursor:var(--sci-button-cursor)}:host:has(input[type=button]):has(button.clear)>sci-icon.chevron{display:none}:host.collapsed{gap:0}:host>input{all:unset;flex:auto;align-self:stretch;width:0;min-width:0;color:var(--sci-color-text);appearance:auto;box-sizing:border-box}:host>input[type=number]::-webkit-outer-spin-button,:host>input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}:host>input[type=button]{white-space:nowrap;text-overflow:ellipsis}:host>button.clear{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>button.clear:hover:where(:not(:disabled)){background-color:var(--sci-button-background-color-hover)}:host>button.clear:active:where(:not(:disabled)){background-color:var(--sci-button-background-color-active)}:host>button.clear:focus:not(:focus-visible){outline:none}:host>button.clear:focus-visible{outline:var(--sci-button-outline-width) solid var(--sci-color-accent)}:host>button.clear:disabled{color:var(--sci-button-text-color-disabled)}:host>button.clear{padding:1px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], inputElement: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
 function trim(value) {
     return typeof value === 'string' ? value.trim() || null : value;
 }
+function configureTooltip() {
+    return [
+        {
+            provide: TOOLTIP_ON_OVERFLOW_DIRECTIVE_SOURCE_ELEMENT,
+            useFactory: () => inject(SciColumnFilterComponent).inputElement,
+        },
+    ];
+}
 
 /*
  * Copyright (c) 2018-2026 Swiss Federal Railways
@@ -2405,6 +2873,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  * SPDX-License-Identifier: EPL-2.0
  */
 /**
+ * Provides a table to display tabular or hierarchical data.
+ *
+ * ### Usage
+ *
+ * Create a table using the `table()` function, passing a signal containing the items to display in the table and a factory function to define the columns.
+ * Alternatively, pass a descriptor to display a tree structure, configure a custom datasource, or set additional options.
+ *
+ * ```ts
+ * import {SciTableComponent, table} from '@scion/components/table';
+ * import {httpResource} from '@angular/common/http';
+ *
+ * // Load data to display in the table.
+ * const users = httpResource<User[]>(() => '/api/users', {defaultValue: []});
+ *
+ * // Create the table and pass data.
+ * const userTable = table(users.value, table => table
+ *   .addNumberColumn('ID', user => user.id)
+ *   .addStringColumn('Name', user => user.name)
+ *   .addBooleanColumn('Inactive', user => user.inactive)
+ *   .addDateColumn('Expiration', user => user.expiration),
+ * );
+ * ```
+ *
+ * In the HTML, bind the created table instance to `<sci-table>` and assign it a name.
+ * The name must start with the `table:` prefix and is used to store user settings.
+ *
+ * ```html
+ * <sci-table name="table:users" [table]="userTable"/>
+ * ```
+ *
+ * ### Fixed Row Height
+ *
+ * All rows in the table must have equal height, which is `2em` by default. The height can be changed per table using the CSS variable `--sci-table-row-height`.
+ *
+ * ```scss
+ * sci-table {
+ *   --sci-table-row-height: 30px;
+ * }
+ * ```
+ *
+ * ### Styling
+ *
+ * The appearance of the table can be customized using the following CSS variables, either globally in the `:root` or at the table level.
+ *
+ * - `--sci-table-gridline-color`
+ * - `--sci-table-header-height`
+ * - `--sci-table-header-cursor`
+ * - `--sci-table-header-background-color`
+ * - `--sci-table-header-background-color-hover`
+ * - `--sci-table-header-font-family`
+ * - `--sci-table-header-font-size`
+ * - `--sci-table-header-font-weight`
+ * - `--sci-table-header-text-color`
+ * - `--sci-table-header-column-divider`
+ * - `--sci-table-row-height`
+ * - `--sci-table-row-indent`
+ * - `--sci-table-row-background-color-hover`
+ * - `--sci-table-row-background-color-selected`
+ * - `--sci-table-row-border-radius`
+ * - `--sci-table-row-outline-color`
+ * - `--sci-table-row-outline-width`
+ * - `--sci-table-row-outline-style`
+ * - `--sci-table-row-action-background-color`
+ * - `--sci-table-row-action-background-color-selected`
+ * - `--sci-table-cell-padding-inline`
+ *
  * @experimental since 22.3.0; API and behavior may change in any version without notice.
  */
 class SciTableComponent {
@@ -2437,9 +2971,10 @@ class SciTableComponent {
     }
     onRowPrimaryAction(event) {
         this.primaryAction.emit(event);
+        event.items.forEach(item => this.table().toggleRow(item));
     }
     onRetry() {
-        this.table().reset();
+        this.table().reloadFailed();
     }
     connectToModel() {
         const viewportDimension = dimension(this._viewport);
@@ -2470,15 +3005,16 @@ class SciTableComponent {
     }
     scrollActiveRowIntoViewport() {
         effect(() => {
-            const activeRow = this.table().activeRow();
-            if (!activeRow) {
+            const activeItem = this.table().activeItem();
+            if (activeItem === undefined) {
                 return;
             }
             untracked(() => {
                 const viewport = this._viewport().nativeElement;
                 const viewportHeight = this.table().tableViewRef()?.viewportHeight() ?? 0;
                 const itemHeight = this.table().tableViewRef()?.itemHeight() ?? 0;
-                const activeRowTop = activeRow.index * itemHeight;
+                const activeIndex = this.table().rowIndexById().get(activeItem) ?? -1;
+                const activeRowTop = activeIndex * itemHeight;
                 const activeRowBottom = activeRowTop + itemHeight;
                 const scrollTop = viewport.scrollTop;
                 const scrollBottom = scrollTop + viewportHeight;
@@ -2495,7 +3031,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\" class=\"loading-indicator e2e-loading-indicator\"/>\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.loading-indicator{--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<!-- TODO [#384] Replace with sci-viewport -->\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\" [sciAttributes]=\"row.bindings.attributes()\" [class]=\"row.bindings.classes()\" (primaryAction)=\"onRowPrimaryAction($event)\"/>\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            <sci-icon>scion:reload</sci-icon>\n            <span>{{('%scion:components:retry.action' | 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\" class=\"loading-indicator e2e-loading-indicator\"/>\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>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:is(:not(:hover),:has(sci-table-header:hover))~sci-scrollbar{opacity:0}: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{display:flex;gap:.5em;border:1px solid var(--sci-color-border);padding:.35em 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.loading-indicator{--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,
@@ -2519,7 +3055,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\" class=\"loading-indicator e2e-loading-indicator\"/>\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.loading-indicator{--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<!-- TODO [#384] Replace with sci-viewport -->\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\" [sciAttributes]=\"row.bindings.attributes()\" [class]=\"row.bindings.classes()\" (primaryAction)=\"onRowPrimaryAction($event)\"/>\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            <sci-icon>scion:reload</sci-icon>\n            <span>{{('%scion:components:retry.action' | 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\" class=\"loading-indicator e2e-loading-indicator\"/>\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>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:is(:not(:hover),:has(sci-table-header:hover))~sci-scrollbar{opacity:0}: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{display:flex;gap:.5em;border:1px solid var(--sci-color-border);padding:.35em 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.loading-indicator{--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 {
@@ -2542,5 +3078,5 @@ function provideSciTable() {
  * Generated bundle index. Do not edit.
  */
 
-export { SciTableComponent, provideTableRowBinding, provideTableStorage, table, ɵillegaldatasource };
+export { SciTableComponent, provideTableDatasource, provideTableRowBinding, table, ɵSciTable, ɵSciTableRowBindingFactory, ɵprovideTableDatasource };
 //# sourceMappingURL=scion-components-table.mjs.map