Table
@xui/core/tableA data table. Layout is flex rather than table-layout, so a column can grow while the rest stay sized to their content, and the row parts stay addressable for striping and selection.
Install
pnpm add @xui/core/tableExamples
This package has no Storybook story yet, so there is nothing to render here. The API below is still extracted from the source.
API
The body-cell template of an x-column-def, rendered once per row.
Defines one column of an x-table: its name, its shared cell classes, and the header, body and footer templates projected into it.
Inputs
namestringThe column's key, as listed in the table's displayedColumns.classstringExtra classes the styled cells (xui-th/xui-td) merge into this column.''The footer-cell template of an x-column-def, rendered once below the body.
The header-cell template of an x-column-def.
Headless pagination: the page maths and navigation, handed to your own template.
Inputs
totalElementsnumber | null | undefinedHow many items there are in total, across all pages. null while unknown — the last page cannot be computed without it.nullcurrentPagenumberThe zero-based page to show. Navigation writes over it locally, so this is a starting point rather than a binding the directive keeps in sync.0pageSizenumberItems per page. Changing it resets to the first page.10Outputs
stateChangeXPaginatorStateEmits the full page state whenever it changes — the cue to fetch the corresponding slice of data.Methods
ngOnInit()goToLastPage(): voiddecrementPage(): voidincrementPage(): voidreset(): voidThe headless data table: a signal-based wrapper over the CDK's cdk-table, with no styling of its own.
Inputs
dataSourceXTableDataSourceInput<T>The rows: an array, an Observable, or a CDK DataSource.[]fixedLayoutbooleanUse table-layout: fixed, sizing columns from the header row alone instead of measuring every cell.falsemultiTemplateDataRowsbooleanAllow more than one row template per data item, e.g. for an expandable detail row.falsedisplayedColumnsstring[]Which columns to render, in order, by x-column-def name. A defined column not listed here is not shown.[]trackByTrackByFunction<T>How rows are tracked across data changes. Defaults to item identity, matching the CDK.(_index, item) => itemcustomTemplateDataRowsbooleanSuppress the built-in body row so you can supply your own *cdkRowDef — for grouped, expandable or otherwise non-uniform rows.falseinteractiveRowsbooleanMarks the default body rows as clickable: they become focusable, get role="button" and the row-interactive class. rowClick emits regardless, so a listener without the visual affordance is possible — but usually these two go together.falsestickyHeaderbooleanPin the header row while the body scrolls.falsetableClassesstringClasses for the cdk-table element. Written by the styling layer as well as the consumer, hence a model.''headerRowClassesstringClasses for the header row. Written by the styling layer as well as the consumer, hence a model.''bodyRowClassesstringClasses for each body row. Written by the styling layer as well as the consumer, hence a model.''Outputs
contentChangedvoidEmits after the table re-renders its rows.rowClickTEmits the clicked row. Fires on Enter too, and independently of interactiveRows — that input only adds the affordance.