Angular Datentabelle & Listen | ng-hub-ui-paginable

Angular Datentabelle und paginierte Liste mit serverseitiger Paginierung, Sortierung, Filterung, Auswahl, Templates und CSS-Variablen.

Zuletzt aktualisiert 24.08.2026

Übersicht

Warum Teams nach dieser Bibliothek suchen

Nutze diese Angular-Bibliothek für Datentabellen und paginierte Listen, wenn du serverseitige Operationen, Auswahl, Filterung und wiederverwendbares Listen-Rendering benötigst, ohne die Tabellenlogik in jedem Projekt neu zu bauen.

Installieren

npm install ng-hub-ui-paginable

Springen zu

Ideal für

  • Admin-Tabellen
  • CRM-Datensätze
  • Suchergebnisse
  • Management-Back-Offices

Über paginable

ng-hub-ui-paginable richtet sich an Angular-Teams, die Admin-Panels, Suchergebnisse, CRM-Bildschirme und Management-Back-Offices erstellen. Es kombiniert eine wiederverwendbare Tabellen- und Listenschicht mit den Operationen, die in der Produktion meist am wichtigsten sind: Paginierung, Filterung, Sortierung, Auswahl und individuelle Templates.

Funktionsleitfäden

Grundnutzung

Grundlegendes table-Rendering und Pagination.

Beispiele:
Grundlegende Verwendung der Tabelle

Grundlegende Verwendung der Tabelle

ID
Name
Email
Role
1John Doejohn@example.comAdmin
2Jane Smithjane@example.comEditor
3Bob Johnsonbob@example.comUser
4Alice Brownalice@example.comEditor

Zeige 4 von 4 Zeilen

Agnostische Formularsteuerelemente

Agnostische Formularsteuerelemente

ID
Name
Email
Role
Department
1John Doejohn.doe@example.comAdminIT
2Jane Smithjane.smith@example.comEditorMarketing
3Bob Johnsonbob.johnson@example.comUserSales
4Alice Brownalice.brown@example.comEditorIT
5Charlie Wilsoncharlie.wilson@example.comUserHR

Zeige 5 von 8 Zeilen

Search and rows-per-page are rendered by ng-hub-ui-forms (hub-input / hub-select). Remove the provider and they fall back to native controls.

Paginierung der Tabelle

Paginierung der Tabelle

ID
Name
Department
Position
Salary
Email
1John DoeEngineeringSenior Developer85000john.doe@company.com
2Jane SmithMarketingMarketing Manager72000jane.smith@company.com
3Bob JohnsonEngineeringFrontend Developer65000bob.johnson@company.com
4Alice BrownHRHR Specialist58000alice.brown@company.com
5Charlie WilsonSalesSales Representative55000charlie.wilson@company.com

Zeige 5 von 20 Zeilen

Total employees: 20 | Current page: 1 | Page size: 5
CSS-Variablen der Tabelle

CSS-Variablen der Tabelle

Sunrise Theme
ID
Name
Email
Role
1John Doejohn@example.comAdmin
2Jane Smithjane@example.comEditor
3Bob Johnsonbob@example.comUser
4Alice Brownalice@example.comReviewer

Zeige 4 von 4 Zeilen

Midnight Theme
ID
Name
Email
Role
1John Doejohn@example.comAdmin
2Jane Smithjane@example.comEditor
3Bob Johnsonbob@example.comUser
4Alice Brownalice@example.comReviewer

Zeige 4 von 4 Zeilen

Datenverwaltung

Sortierung, Filterung, Auswahl und serverseitige Operationen.

Beispiele:
Grundlegendes Sortieren und Filtern

Grundlegendes Sortieren und Filtern

ID
Name
Role
Status
4Alice BrownEditorActive
3Bob JohnsonUserPending
5Charlie WilsonUserDeleted
2Jane SmithEditorInactive
1John DoeAdminActive

Zeige 5 von 5 Zeilen

Erweitertes Filtern (Menüs und Bereiche)

Erweitertes Filtern (Menüs und Bereiche)

ID
Product
Price ($)
Added Date
Category
1Laptop1200Sun Oct 01 2023 00:00:00 GMT+0000 (Coordinated Universal Time)Electronics
2Mouse25Wed Nov 15 2023 00:00:00 GMT+0000 (Coordinated Universal Time)Electronics
3Keyboard75Mon Nov 20 2023 00:00:00 GMT+0000 (Coordinated Universal Time)Electronics
4Desk Lamp45Tue Dec 05 2023 00:00:00 GMT+0000 (Coordinated Universal Time)Office
5Chair250Sun Dec 10 2023 00:00:00 GMT+0000 (Coordinated Universal Time)Office

Zeige 5 von 5 Zeilen

Auswahl und Stapelaktionen

Auswahl und Stapelaktionen

ID
Name
Email
Role
1John Doejohn@example.comAdmin
2Jane Smithjane@example.comEditor
3Bob Johnsonbob@example.comUser
4Alice Brownalice@example.comEditor
5Charlie Wilsoncharlie@example.comUser

Zeige 5 von 5 Zeilen

Stapelaktionen (batchActions)

Stapelaktionen (batchActions)

ID
Name
Email
Status
1John Doejohn.doe@example.comActive
2Jane Smithjane.smith@example.comActive
3Bob Johnsonbob.johnson@example.comInactive
4Alice Brownalice.brown@example.comActive
5Charlie Wilsoncharlie.wilson@example.comInactive

Zeige 5 von 5 Zeilen

Serverseitige Operationen

Serverseitige Operationen

ID
Name
Email
Role
Status
1John Doeuser1@example.comAdminActive
2Jane Smithuser2@example.comEditorInactive
3Bob Johnsonuser3@example.comUserPending
4Alice Brownuser4@example.comModeratorActive
5Charlie Wilsonuser5@example.comAdminInactive
6Diana Martinezuser6@example.comEditorPending
7Edward Tayloruser7@example.comUserActive
8Fiona Andersonuser8@example.comModeratorInactive
9George Leeuser9@example.comAdminPending
10Hannah Whiteuser10@example.comEditorActive

Zeige 10 von 50 Zeilen

Server Request Info:
  • Page: 1
  • Search: None
  • Sort: None (None)
  • Total Items: 50

Erweiterte Funktionen

Aufklappbare Zeilen, benutzerdefinierte Templates, responsives Layout und dynamisches Styling.

Beispiele:
Erweiterbare Zeilen und klebende Spalten

Erweiterbare Zeilen und klebende Spalten

ID
Name
Role
Email
Actions
1John DoeAdminjohn@example.com
2Jane SmithEditorjane@example.com
3Bob JohnsonUserbob@example.com
4Alice BrownEditoralice@example.com

Zeige 4 von 4 Zeilen

Mehrere Sticky-Spalten

Mehrere Sticky-Spalten

Scroll horizontally. Two columns pin to the left (ID + Full Name) and two to the right (Salary + Status) — each offset by the width of its sticky neighbours, so they never overlap.
ID
Full Name
Email Address
Department
Position
Office Location
Salary
Status
1John Doejohn.doe@example.comEngineeringSenior DeveloperNew York$120,000Active
2Jane Smithjane.smith@example.comMarketingMarketing ManagerLos Angeles$95,000Active
3Bob Johnsonbob.johnson@example.comSalesSales RepresentativeChicago$75,000On leave
4Alice Brownalice.brown@example.comEngineeringTechnical LeadSan Francisco$140,000Active
5Charlie Wilsoncharlie.wilson@example.comHRHR SpecialistBoston$65,000Active

Zeige 5 von 5 Zeilen

Themenfähiger Header & Trenner

Themenfähiger Header & Trenner

Invoice
Client
Amount
Status
INV-1001Acme Corp$3,200Paid
INV-1002Globex$1,750Pending
INV-1003Initech$980Paid
INV-1004Umbrella$5,410Overdue

Zeige 4 von 4 Zeilen

Sticky-Header beim Scrollen

Sticky-Header beim Scrollen

Scroll vertically. Both tables cap the body at 280px and keep the header pinned — the first via [stickyHeader] inside a plain scroll div, the second via the built-in options.scrollable frame.
With [stickyHeader] (any scroll container)
ID
Name
Department
Location
Status
1Employee 1EngineeringNew YorkOn leave
2Employee 2MarketingLondonActive
3Employee 3SalesBerlinActive
4Employee 4HRTokyoActive
5Employee 5EngineeringNew YorkActive
6Employee 6MarketingLondonOn leave
7Employee 7SalesBerlinActive
8Employee 8HRTokyoActive
9Employee 9EngineeringNew YorkActive
10Employee 10MarketingLondonActive

Zeige 10 von 40 Zeilen

With options.scrollable (built-in frame)
ID
Name
Department
Location
Status
1Employee 1EngineeringNew YorkOn leave
2Employee 2MarketingLondonActive
3Employee 3SalesBerlinActive
4Employee 4HRTokyoActive
5Employee 5EngineeringNew YorkActive
6Employee 6MarketingLondonOn leave
7Employee 7SalesBerlinActive
8Employee 8HRTokyoActive
9Employee 9EngineeringNew YorkActive
10Employee 10MarketingLondonActive

Zeige 10 von 40 Zeilen

Dunkles Re-Theming per Tag-Selektor

Dunkles Re-Theming per Tag-Selektor

Re-themed by a bare hub-table tag selector — no!important.
ID
Name
Email
Role
1John Doejohn@example.comAdmin
2Jane Smithjane@example.comEditor
3Bob Johnsonbob@example.comUser
4Alice Brownalice@example.comReviewer
Überschreibbare Expander-Symbole

Überschreibbare Expander-Symbole

Expand a row. The expander uses custom plus / minus glyphs via --hub-table-icon-caret-up / --hub-table-icon-caret-down.
Product
SKU
Price
Stock
Wireless MouseWM-100$24.99132
Mechanical KeyboardMK-220$89.0047
USB-C HubUH-330$39.5088

Zeige 3 von 3 Zeilen

Eigenes Icon-Set

Eigenes Icon-Set

Search, sort and expand to see the swapped glyphs. Every icon is a --hub-table-icon-* variable.
Name
Role
Team
Ada LovelaceEngineerCore
Alan TuringResearcherLabs
Grace HopperArchitectPlatform
Katherine JohnsonAnalystData

Zeige 4 von 4 Zeilen

Theming per Mixin

Theming per Mixin

Code
Name
Owner
A-01AlphaAda
B-02BravoAlan
C-03CharlieGrace

Zeige 3 von 3 Zeilen

Anpassung mit Vorlagen

Anpassung mit Vorlagen

ID
Name
Role
Status
1John Doe Admin
Active
2Jane Smith Editor
Active
3Bob Johnson User
Inactive

Zeige 3 von 3 Zeilen

Responsives Layout und Zustände

Responsives Layout und Zustände

ID
Name
Role
1John DoeAdmin
2Jane SmithEditor

Zeige 2 von 2 Zeilen

Standard-Statuskomponenten

Standard-Statuskomponenten

ID
Name
Role
1John DoeAdmin
2Jane SmithEditor
3Bob JohnsonUser

Zeige 3 von 3 Zeilen

Dynamische Zeilenstile (rowClass)

Dynamische Zeilenstile (rowClass)

ID
Name
Email
Role
Status
1John Doejohn.doe@example.comAdminactive
2Jane Smithjane.smith@example.comEditorinactive
3Bob Johnsonbob.johnson@example.comUserpending
4Alice Brownalice.brown@example.comEditoractive
5Charlie Wilsoncharlie.wilson@example.comUserdeleted

Zeige 5 von 5 Zeilen

Master-Detail-Auswahl (rowClass)

Master-Detail-Auswahl (rowClass)

Order
Customer
Total
Status
1001Ada Lovelace$1,240.00Paid
1002Alan Turing$890.50Pending
1003Grace Hopper$2,415.00Paid
1004Katherine Johnson$540.75Refunded
1005Edsger Dijkstra$1,975.20Paid

Click a row to open its detail — the active row shows the tint + accent bar.

Select an order to see its detail.

Internationalisierung (i18n)

Internationalisierung (i18n)

ID
Name
Email
Role
1John Doejohn@example.comAdmin
2Jane Smithjane@example.comEditor
3Bob Johnsonbob@example.comUser
4Alice Brownalice@example.comModerator
5Charlie Wilsoncharlie@example.comAdmin
6Diana Martinezdiana@example.comEditor
7Edward Tayloredward@example.comUser
8Fiona Andersonfiona@example.comModerator
9George Leegeorge@example.comAdmin
10Hannah Whitehannah@example.comEditor
11Ivan Clarkivan@example.comUser
12Julia Scottjulia@example.comModerator

Showing 12 of 12 rows

RTL-Design (rechts-nach-links)

RTL-Design (rechts-nach-links)

ID
Name
Email
Role
1John Doejohn@example.comAdmin
2Jane Smithjane@example.comEditor
3Bob Johnsonbob@example.comUser
4Alice Brownalice@example.comReviewer

Zeige 4 von 4 Zeilen

  • Start the project kickoff
  • Prepare requirements document
  • Review API contract
  • Plan deployment checklist

Zeige 4 von 4 Zeilen

Reihenfolge der unteren Leiste (CSS-Variablen)

Reihenfolge der unteren Leiste (CSS-Variablen)

Table bottom bar ordering
ID
Name
Role
1John DoeAdmin
2Jane SmithEditor
3Bob JohnsonUser

Zeige 3 von 3 Zeilen

List bottom bar ordering
  • Task A
  • Task B

Zeige 2 von 3 Zeilen

List-Komponenten

Flexible Listenansichten mit denselben leistungsstarken Paginierungs- und Auswahlfunktionen.

Beispiele:
Paginierbare und auswählbare Liste

Paginierbare und auswählbare Liste

  • J
    John Doe
    john@example.com
  • J
    Jane Smith
    jane@example.com
  • B
    Bob Johnson
    bob@example.com
  • A
    Alice Brown
    alice@example.com
  • C
    Charlie Wilson
    charlie@example.com
  • D
    Diana Prince
    diana@example.com
  • E
    Evan Brooks
    evan@example.com
  • F
    Fiona Green
    fiona@example.com

Zeige 8 von 8 Zeilen

Selected: 0 items
Verbundene Liste (Timeline)

Verbundene Liste (Timeline)

  • 09:00
    Order placed
    Payment confirmed
  • 11:20
    Processing
    Picked from warehouse
  • 14:05
    Shipped
    Handed to courier
  • —
    Out for delivery
    Estimated today
Auswählbare Liste

Auswählbare Liste

Hover a row. Selectable items show a pointer cursor; tick the checkbox to select.
  • EngAda Lovelace
  • ResearchAlan Turing
  • ArchGrace Hopper
  • DataKatherine Johnson
Selected: 0 — []
Single
One of these, and only one. Picking a row releases the previous one.
  • EngAda Lovelace
  • ResearchAlan Turing
  • ArchGrace Hopper
  • DataKatherine Johnson
Lead:null
Flush — eine Liste, kein Kartenstapel

Flush — eine Liste, kein Kartenstapel

Default — a stack of cards

Each row is its own surface. On a page, that is what separates it from the page.

  • Despacho 1 · Officefrom 900,00 € / month
  • Sala Timple · Meeting roomfrom 90,00 € / day
  • Zona compartida · Coworkingfrom 180,00 € / month
Flush — one list

Inside a dialog the frame is already drawn, so the rows only need a rule between them.

  • Despacho 1 · Officefrom 900,00 € / month
  • Sala Timple · Meeting roomfrom 90,00 € / day
  • Zona compartida · Coworkingfrom 180,00 € / month
The table takes it too

Outer border, radius and head rule go; the row divider and the cell padding stay, because those are what keep a table readable across its columns.

Room
Kind
Rate
Despacho 1Officefrom 900,00 € / month
Sala TimpleMeeting roomfrom 90,00 € / day
Zona compartidaCoworkingfrom 180,00 € / month
Editierbar — Steuerelemente als Tabellenblatt

Editierbar — Steuerelemente als Tabellenblatt

Default — every control brings its own box
Product
Quantity
Unit
u.
box
u.
box
u.
kg
With flushFields — the same controls, read as a sheet
Product
Quantity
Unit
u.
box
u.
box
u.
kg
Einen Baum auswählen, und was ein Klick übergibt

Einen Baum auswählen, und was ein Klick übergibt

Tick a building to take its rooms. Tick one room and the building goes indeterminate. Type in the search box to narrow the tree.
  • Building A
    • Meeting room 1
    • Meeting room 2
    • Phone booth
  • Building B
    • Studio
    • Workshop
  • Rooftop
Single, over the same tree
Only rooms carry a radio. A heading is not one of the things to choose.
  • Building A
    • Meeting room 1
    • Meeting room 2
    • Phone booth
  • Building B
    • Studio
    • Workshop
  • Rooftop
Selected:[]
Last click:(none yet)
CSS-Variablen der Liste

CSS-Variablen der Liste

Forest Theme
  • John DoeProduct Manager
  • Jane SmithEngineer
  • Bob JohnsonDesigner

Zeige 3 von 5 Zeilen

Dusk Theme
  • John DoeProduct Manager
  • Jane SmithEngineer
  • Bob JohnsonDesigner

Zeige 3 von 5 Zeilen

Ocean Theme — one-call hub-list-theme() mixin
  • John DoeProduct Manager
  • Jane SmithEngineer
  • Bob JohnsonDesigner

Zeige 3 von 5 Zeilen

Liste in Karten

Liste in Karten

  • MR

    Marta Ruiz

    Product Designer

    Available

    Email: marta.ruiz@example.com

    Phone: +34 600 111 222

  • CV

    Carlos Vega

    Frontend Engineer

    Busy

    Email: carlos.vega@example.com

    Phone: +34 600 333 444

  • LM

    Lucia Moreno

    Engineering Manager

    Available

    Email: lucia.moreno@example.com

    Phone: +34 600 555 666

  • PS

    Pablo Serra

    QA Lead

    Offline

    Email: pablo.serra@example.com

    Phone: +34 600 777 888

Verschachtelte Listen

Verschachtelte Listen

Tree list
  • Documents
    • Reports
      • Q1-2026.pdf
      • Q2-2026.pdf
    • Invoices
  • Media
    • Photos
    • Videos
  • Readme.txt
Cards with nested items
  • Documents
    • Reports
      • Q1-2026.pdf
      • Q2-2026.pdf
    • Invoices
  • Media
    • Photos
    • Videos
  • Readme.txt
Lade-, Fehler- und Leerzustände der Liste

Lade-, Fehler- und Leerzustände der Liste

  • John Doe
    john.doe@example.com
  • Jane Smith
    jane.smith@example.com
  • Bob Johnson
    bob.johnson@example.com

Hauptfunktionen

Letzte Änderungen

Version 22.13.0 - 8/18/26, 12:00 AM

added: flushFields on hub-table: the controls in the cells drawn as a spreadsheet, not as a form. The fields lose their border and surface, a static addon reads as its own content rather than as a chip, and a projected button stops being welded to its neighbour — corners back, a gap, and its own border colour, since two actions in a cell are two things to press. Done by assigning ng-hub-ui-forms tokens to the cells, which is why it reaches your own cell templates; it needs forms 22.21.0 for the seam tokens.

Version 22.12.1 - 8/17/26, 12:00 AM

fixed: A group row gets no radio in single selection. The control was drawn on every row, so in a list grouped with `bindChildren` a heading became one of the things to choose — picking a building answered with a building, which nobody can book. Only leaves carry a radio now, which is the single-selection twin of the cascade 22.12.0 gave `multiple`.

Version 22.12.0 - 8/17/26, 12:00 AM

changed: BREAKING — `clickFn` hands over the item, not the internal wrapper. `ListClickEvent.item` carried the form group wrapping each row (`{selected, collapsed, data, children}`) while the published type said `item: T`, so a consumer reading `event.item.<field>` by the types got `undefined`: no error, no warning, every guard silently false. It is the item now; `value` reads `bindLabel` from the item rather than from the wrapper, and a new `children: T[]` hands over a group's children as items. Adding an alias and deprecating `item` was rejected: it would leave the library carrying, for ever, a field documented as the item that is not one, to protect code depending on a contradiction between the runtime and the type.

changed: BREAKING — a group row selects its children instead of itself. With `bindChildren`, a group's checkbox put the group's own value into the selection and left its children alone, so ticking a building meant "the building", which nobody can book, and a building with one room chosen looked exactly like one with none. Ticking a group now takes everything under it, a partly-selected group renders indeterminate, and only leaves travel in the value.

fixed: Rebuilding `items` no longer clears the selection, nor claims the user did. The setter emptied the form and published the empty selection through the CVA, so a list that merely re-read its data dropped the choice and told the consumer the user had cleared it, with no way to tell a refresh from an edit. The selection is carried across and matched by `bindValue`, only what the new items no longer offer falls out, and nothing is published unless something really went.

fixed: `setDisabledState` disables. It assigned a flag the template never read, so a disabled list still changed its selection. It now disables the form, reaching every `selected` control however deep — through the form and not a `[disabled]` binding, because Angular ignores that binding on a reactive control: it warns and the box stays live.

fixed: `options.searchable` searches. The component rendered a search box wired to a `filter()` whose body was entirely commented out. It filters now, with a `searchTerm` model and an optional `searchFn` — the same two names `hub-table` uses, so the components do not disagree about what "searchable" means. A group survives while any descendant matches, and submitting returns to the first page.

Version 22.11.0 - 8/17/26, 12:00 AM

added: `flush` on `hub-list` and `hub-table`: the collection drawn as a list rather than as a stack of cards. Every row wears its own border, radius and surface by default — right for a collection standing on a page, wrong for a list of choices inside a dialog, where a bordered box per row reads as a region of its own and the surface has already drawn the frame. It had to be an input rather than something CSS can reach, and the reason is a trap the whole token catalogue shares: the defaults are declared on the host, which is the very element a consumer puts a class on, so their assignment ties on specificity and loses on source order — silently, which reads as "the token does nothing". Two tokens come with it, read only under the variant: --hub-list-divider-width and --hub-list-divider-color, the rule that stands in for the gap. It falls between siblings only, a group and the collection it opens keep none, and the cards display gets none at all because a grid separated by rules would draw them across the gaps. On the table the row divider survives on purpose.

fixed: The single-selection radio has a rule. It shipped with the mode in 22.10.0 and had no CSS at all — .hub-list__radio matched nothing in the component — so the control rendered at the browser's own size beside a themed list, visibly not part of it. It now takes --hub-list-radio-size, defaulting to the checkbox's since the two are the same control wearing a different rule about how many may be on, and the list's accent.

Version 22.8.1 - 8/16/26, 12:00 AM

fixed: Row-action icons sat low in their buttons. The button took its height from the line box of the glyph, and an icon font glyph is an inline-block resting on the baseline, so a 16px glyph in a 24px line box left the descender gap underneath — 4px above and 8px below on a 28px button. The content row now carries an explicit height and centres the glyph in it: 28px tall, 6/6 exactly. Worth recording that both obvious repairs make it worse — display: flex on the button or the icon host removes the line box that sets the height and collapses it to 20px, and vertical-align: middle overshoots to 7.78/4.22.

Version 22.8.0 - 8/14/26, 12:00 AM

changed: Translation lookups now resolve HUBUI.PAGINABLE.* before the legacy flat keys. The table, list and paginator provide the namespace through HUB_TRANSLATION_PREFIX, so an application dictionary can feed them via provideHubTranslationAdapter() without reserving generic top-level keys. Existing flat dictionaries keep working — the bare key is still the fallback.

added: README documentation for the application-wide translation adapter (provideHubTranslationAdapter() from ng-hub-ui-utils).

removed: Removed the @angular/animations peer dependency and the unused table fadeInOut trigger declaration. The package is deprecated upstream and the trigger was never bound in the template. Applications that installed it only for ng-hub-ui-paginable can drop it.

Version 22.7.1 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.7.0 - 7/29/26, 12:00 AM

added: --hub-table-head-border-width — the header's bottom-border thickness, defaulting to the shared --hub-table-border-width (zero visual change); set it to calc(var(--hub-table-border-width) * 2) for the Bootstrap-style thicker header and it keeps following the base width.

added: --hub-table-head-text-transform (none) and --hub-table-head-letter-spacing (normal) on the header titles — uppercase or tracked column headers without reaching for a th rule.

Version 22.6.1 - 7/26/26, 12:00 AM

fixed: Importing the package no longer crashes under SSR: the module-scope navigator access behind DEFAULT_LANGUAGE is now guarded.

removed: Dead internal ViewsService (never exported; its only working method threw 'not developed').

Version 22.6.0 - 7/7/26, 12:00 AM

fixed: Table: `[stickyHeader]` now pins the header inside a consumer’s OWN scroll container. The built-in container no longer traps the sticky header (new `--hub-table-container-overflow`, flipped to `visible` when `[stickyHeader]` is set), so a `max-height`/`overflow:auto` box you own keeps the header pinned.

fixed: Table: row/cell background is re-themeable by a plain `hub-table { --hub-table-bg: … }` tag selector (dark mode). The surface tokens are no longer declared on `:host` (which out-ranked the tag rule); each consumption site reads them as `var(--hub-table-bg, <default>)`, so a consumer’s tag rule reaches the cells with NO `!important`, and the sticky header stays opaque via the same fallback.

added: Table: optional selected-row accent bar — `--hub-table-selected-bar-width` (default `0`, no visual change) and `--hub-table-selected-bar-color`. With the `hub-table__row--selected` tint it gives the master-detail “active row” look (tint + leading bar) entirely through tokens and `[rowClass]`. RTL-aware.

Version 22.5.0 - 7/7/26, 12:00 AM

added: Table: `[stickyHeader]` input pins the header while the body scrolls, decoupled from the built-in scroll frame — it works inside any consumer `max-height`/`overflow:auto` container. Overridable via `--hub-table-head-position` (default `sticky`).

added: Table: themeable header typography and padding — `--hub-table-head-font-size`, `--hub-table-head-font-weight`, `--hub-table-head-padding-x`, `--hub-table-head-padding-y` (surface/text already existed as `--hub-table-head-bg`/`--hub-table-head-color`). All default to existing values (no visual change).

changed: Table: the selected-row tint now also applies to a consumer-set `hub-table__row--selected` class, so a product can drive the selected look from its own state via `[rowClass]` instead of repainting the row.

Version 22.4.0 - 7/5/26, 12:00 AM

added: Table: themeable header, row divider and scroll/sticky-header slots — `--hub-table-head-bg`/`--hub-table-head-color`, `--hub-table-row-divider-color`, and `--hub-table-container-max-block-size`/`--hub-table-head-sticky-top` (a fixed-height scroll body with `options.scrollable` now engages a sticky header). All default to existing values (no visual change).

added: Table: overridable row-expander caret icons via `--hub-table-icon-caret-up`/`--hub-table-icon-caret-down` (same var indirection as the sort icons).

added: List: opt-in item connector (timeline/pipeline) via the `connected` input, themed with `--hub-list-connector-color`/`-width`/`-style`/`-offset`. Default-off, list display only.

fixed: List (cards): long labels no longer overflow their card/grid track — `.hub-list__label` gets `min-width: 0` and wraps unbreakable tokens in cards mode.

Version 22.3.0 - 6/29/26, 12:00 AM

added: Table: automatic client-side pagination. With a plain array in `[data]`, `paginate` true and no `totalItems`, the table searches, filters, sorts and slices the data entirely in memory and computes the total itself.

added: App-wide input defaults via `providePaginable({ defaults })` (`PaginableDefaults`): `paginate`, `perPage`, `perPageOptions`, `paginationPosition`, `paginationInfo`, `searchable`, `debounce`. Instance inputs still win; unset keys keep each component default.

changed: Table: the `paginate` input is now functional (previously inert) — it gates the client-side mode. Passing a `PaginationState` or setting `[totalItems]` keeps server mode. Set `[paginate]="false"` to render a full array unpaginated.

Version 22.2.0 - 6/29/26, 12:00 AM

added: Agnostic form-controls integration: the table’s search input and rows-per-page select can be rendered by an external library via `provideHubPaginableFormControls()` and the `HUB_PAGINABLE_FORM_CONTROLS` token, with native `<input>` / `<select>` as the zero-dependency fallback.

Version 22.1.0 - 6/23/26, 12:00 AM

added: Table: new `[loadingComponent]`, `[errorComponent]` and `[noResultsComponent]` inputs accept a `PaginableStateDefault` (eager component, lazy loader, or descriptor with input factory).

added: List: same `[loadingComponent]`, `[errorComponent]` and `[noResultsComponent]` inputs added to `hub-list`.

added: `providePaginable({ states })` — global app-level defaults for loading, error and no-results states shared across every paginable component.

added: `PaginableStateOutlet` internal outlet renders the resolved state component with the injected context inputs.

added: `PaginableLoadingDirective` (`loadingTpt`) and `PaginableErrorDirective` (`errorTpt`) exported for per-instance template-based state overrides.

Version 22.0.0 - 6/17/26, 12:00 AM

changed: List: the BEM block now lives on the host element and the <ul> becomes .hub-list__items; backgrounds are controlled via --hub-list-bg (host) and --hub-list-item-bg (items).

added: List: new --hub-list-gap, --hub-list-items-bg and --hub-list-item-bg CSS variables.

fixed: The list card variables (--hub-list-cards-*) and --hub-paginator-font-size were documented but never applied; they now take effect. CSS variables reference fully synced (EN/ES).

removed: Breaking: renamed list --hub-list-container-* variables and removed the non-functional table --hub-table-breakpoint-* variables.

Version 19.10.2 - 12/23/25, 12:00 AM

added: New CSS tokens for cell vertical alignment and icons

changed: Overlay utilities now live in ng-hub-ui-utils for shared dropdown support

fixed: Menu filter match mode labels and null match mode translations

Version 1.2.0 - 1/10/24, 12:00 AM

added: Responsive table design for mobile devices

added: Row selection with checkboxes

changed: Performance optimizations for large tables

Version 1.1.0 - 12/5/23, 12:00 AM

added: Basic pagination functionality

added: Column sorting capabilities

fixed: Table header alignment issues

Verwandte Bibliotheken

ng-hub-ui-sortable ng-hub-ui-utils ng-hub-ui-modal