← Components
Table
Compound table system with sortable columns, searchable headers, expandable rows, and scroll events.
DataListingBarThe strip over a listing table: FilterTriggerBar with UxColumnPicker seated as its last segment — "which rows" and "which columns" in one right-aligned row (c95). Pass `columns` and the picker appears, drawn in the bar's TONE colours and reading "Columns" until something is hidden, then the count; omit `columns` or set columnPicker=false for the bar alone. The key dropdown is restricted to the table: only filter keys the catalog has a column for are offered (a column matches by key or by its filterKey), and one key renders as a fixed label. Its canonical seat is DataTable's #toolbar slot; the picker opens above by default so the table under it stays in view.
UxColumnPickerCheckbox popover that shows/hides table columns — full catalog in, visible keys out via v-model in catalog order; locked columns and the last visible column cannot be unchecked.
UxTableLightweight static table — styles slotted thead/tbody with line or band header variants.
UxTableListRoot table wrapper with scroll event detection, loading indicators, and empty state.
UxTableListColumnHeaderColumn header that auto-delegates to Sorter or Search based on a metric config object.
UxTableListExpandRowTable row that expands to reveal a details well; by default the details slot renders inside one ExpandSection card with a close X.
UxTableListExpandSectionSection card for stacking inside a UxTableListExpandRow details well — the tinted well shows through the gaps. Default theme is borderless-with-shadow; theme="grape" is the child register (grape-50 fill, light grape border, no shadow) for a card that belongs to a row of the section above it.
UxTableListHeaderSticky thead wrapper with z-index handling for table column headers. Pins at var(--q-sticky-top, 0px) — under the page's sticky band when there is one (c104) — and eases with the band as it compacts or docks the pills (c106; instant without a band); compact pins at top-0. A scroll box around it must reset the var (UxOverflowX, UxModal do).
UxTableListSearchSearchable column header with inline input field and magnifying glass icon.
UxTableListSorterSortable column header with rotating arrow indicator and sort direction toggle.
UxTableListToggleRowSimpler toggle-to-expand row with full-width expansion and fade animation.
UxTableListTotalsFooter totals row with bold text-25 styling for summary data.
DataListingBar
See full demo
UxColumnPicker
See full demo
UxTable
See full demo
UxTableList
See full demo
UxTableListColumnHeader
See full demo
UxTableListExpandRow
See full demo
UxTableListExpandSection
See full demo
UxTableListHeader
See full demo
UxTableListSearch
See full demo
UxTableListSorter
See full demo
UxTableListToggleRow
See full demo
UxTableListTotals
See full demo