Protected ReadonlyactiveThe index of the currently active (keyboard-focused) row, or −1 when no row is active.
Protected ReadonlycaptionProtected ReadonlycaptionProtected ReadonlycolumnColumn widths as a record (key → px). Used by both header and body.
Whether the table view is disabled.
Explicitly provided column directives. When set (non-empty), the table
uses these instead of the projected contentChildren. This allows
wrapper components like UIMasterDetailView to query their own
content children and forward them here.
Protected ReadonlyisWhether resizing is actually enabled (explicit input or inferred from tableId).
External page index (zero-based). When provided, the adapter uses
this as the current page. Leave undefined to let the built-in
paginator manage the index.
External page size. When provided, the adapter's page size is set
to this value. Leave undefined to use the default
(INITIAL_PAGE_SIZE).
Row rendering strategy for the table body.
'plain' — renders all rows in a scrollable <div> using @for.
No CDK dependency. Best for small-to-medium datasets.'virtual' — renders rows inside a CDK VirtualScrollViewport.
Best for large datasets where only a window of rows should be in
the DOM.Defaults to the value provided by the TABLE_ROW_RENDERING_STRATEGY
DI token (workspace default: 'plain').
Whether columns can be resized by dragging header borders. Defaults to true when a tableId is provided.
Protected ReadonlyresolvedProtected ReadonlyresolvedThe effective rendering strategy. Prefers the explicit input, falls back to the workspace-wide DI default.
Whether clicking / tapping a row toggles its selection (in addition to clicking the radio / checkbox itself).
Row height in pixels for the virtual-scroll viewport. Each row is rendered at exactly this height. Defaults to DEFAULT_ROW_HEIGHT (36 px).
Protected ReadonlyrowProtected ReadonlyselectionThe resolved selection model. Uses the externally-provided model if given, otherwise falls back to the internal one.
Emitted whenever the selection changes. Carries the full list of currently selected row objects.
Selection mode for the table.
'none' (default): no selection UI.'single': radio-button column for one-at-a-time selection.'multiple': checkbox column for multi-row selection.Optional external selection model. When provided the table will use this instance instead of creating its own, giving the consumer full programmatic control.
Whether to show the leading radio / checkbox column.
Defaults to true. Set to false when you want row-click
selection without a dedicated selection column (e.g. in a
master-detail list).
Protected ReadonlysortedProtected ReadonlysortProtected ReadonlysupportsWhether the underlying datasource supports filtering via IFilterableDatasource. When true, filtering is delegated to the datasource; otherwise, filtering is not available.
Protected ReadonlysupportsWhether the underlying datasource supports sorting via ISortableDatasource. When true, sorting is delegated to the datasource; otherwise, rows are sorted in-component.
Unique identifier for this table instance. Used as key for persisting column widths in localStorage. When set, column resizing is enabled and widths are persisted.
Protected ReadonlytotalComputed total row width (px) when at least one column has been explicitly resized. Flex columns get a 120px minimum. Returns 0 when no columns have explicit widths (natural sizing).
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
ProtectedonProtectedonHandles keyboard navigation within the table.
Arrow keys move the active row; Home / End jump to the
first / last row. When selectionMode is not 'none',
the active row is automatically selected.
ProtectedonProtectedonProtectedonProtectedonForce the table to rebuild its internal adapter and re-read data
from the current datasource. Call this after mutating the datasource
externally (e.g. after calling filterBy on a
FilterableArrayDatasource).
Table View Component
The UITableView component provides a flexible table with sorting, filtering, selection, and column resizing capabilities. It uses Angular's dependency injection system to discover and manage table columns through DI forwarding.
Column Inheritance and DI Forwarding
All column types (UITextColumn, UIBadgeColumn, UINumberColumn, UITemplateColumn) extend UITableViewColumn and provide themselves via Angular's DI system using forwardRef to enable the parent table to discover all projected columns through a single contentChildren() query on the base class token.
This pattern allows for extensibility - new column types can be added without modifying the parent table component, as long as they follow the DI forwarding pattern described in the documentation.
Usage Example
Selector
ui-table-view
Standalone
true
Imports
UITableViewHeader, UITableBody, UITableFooter, ColumnResizeService, DatasourceAdapter