generated:catalog.entry.table.title
generated:catalog.entry.table.description
@xngui/components/table@xngui/components/tablechrome:demo.section
chrome:demo.preview
Team
demo-preview:table.name
demo-preview:table.role
demo-preview:table.status
Ada Lovelace
Engineer
Grace Hopper
Lead
Alan Turing
Research
Katherine Johnson
Engineer
Margaret Hamilton
Lead
Dorothy Vaughan
Research
import { Component } from '@angular/core';
import { XBadge } from '@xngui/components/badge';
import { XEmptyState } from '@xngui/components/empty-state';
import { XTable, XTableBody, XTableCell, XTableHead, XTableHeader, XTableRow } from '@xngui/components/table';
@Component({
selector: 'app-example',
imports: [XBadge, XEmptyState, XTable, XTableBody, XTableCell, XTableHead, XTableHeader, XTableRow],
templateUrl: './table.component.html',
})
export class ExampleComponent {}
chrome:demo.events.title
chrome:demo.events.empty
chrome:demo.api.title
x-table
chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
stripedbooleanfalseAlternating row background on body rows.
hoverbooleantrueHighlights body rows on hover.
densebooleanfalseApplies compact density — backward-compat alias for `density="compact"`.
sizeXSize—Visual size tier — falls back to XConfigService when unset.
densityXDensity—Spacing offsets — orthogonal to `size`; falls back to XConfigService when unset.
stickyHeaderbooleanfalsePins header cells while the body scrolls.
loadingbooleanfalseSets `aria-busy` and loading overlay when data is fetching.
captionstring—Accessible table caption text.
dataSourceXDataSource<unknown>—Row pipeline — filter, sort, and pagination via XDataSource.
selectionModeXSelectionMode | 'none''none'Row selection behavior — `none` disables table-level selection.