Angular Data Table and Paginated List | ng-hub-ui-paginable

Angular data table and paginated list with server-side pagination, sorting, filtering, selection, templates and CSS variables.

Overview

Why teams search for this library

Use this Angular data table and paginated list library when you need server-side operations, selection, filtering and reusable list rendering without rebuilding table logic in every project.

Install

npm install ng-hub-ui-paginable

Jump to

Ideal for

  • admin tables
  • CRM datasets
  • search results
  • management back offices

About paginable

ng-hub-ui-paginable is aimed at Angular teams building admin panels, search results, CRM screens and management back offices. It combines a reusable table and list layer with the operations that usually matter most in production: pagination, filtering, sorting, selection and custom templates.

Feature guides

Core Usage

Fundamental table rendering and pagination.

Examples:
Basic Table Usage

Basic Table Usage

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

Table Pagination

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

Showing 5 of 20 rows

Total employees: 20 | Current page: 1 | Page size: 5
Table CSS Variables

Table CSS Variables

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

Showing 4 of 4 rows

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

Showing 4 of 4 rows

Data Management

Sorting, filtering, selection and server-side operations.

Examples:
Basic Sorting & Filtering

Basic Sorting & Filtering

ID
Name
Role
Status
1John DoeAdminActive
2Jane SmithEditorInactive
3Bob JohnsonUserPending
4Alice BrownEditorActive
5Charlie WilsonUserDeleted
Advanced Filtering (Menus & Ranges)

Advanced Filtering (Menus & Ranges)

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
Selection & Batch Actions

Selection & Batch Actions

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

Batch Actions (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
Server-Side Operations

Server-Side Operations

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

Showing 10 of 50 rows

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

Advanced Features

Expandable rows, custom templates, responsive layout and dynamic styling.

Examples:
Expandable Rows & Sticky Columns

Expandable Rows & Sticky Columns

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

Template Customization

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

Responsive Layout & States

ID
Name
Role
1John DoeAdmin
2Jane SmithEditor
Default State Components

Default State Components

ID
Name
Role
1John DoeAdmin
2Jane SmithEditor
3Bob JohnsonUser
Dynamic Row Styles (rowClass)

Dynamic Row Styles (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
Internationalization (i18n)

Internationalization (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 Layout (right-to-left)

RTL Layout (right-to-left)

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

Showing 4 of 4 rows

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

Showing 4 of 4 rows

Footer Bar Order (CSS variables)

Footer Bar Order (CSS variables)

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

Showing 3 of 3 rows

List bottom bar ordering
  • Task A
  • Task B

Showing 2 of 3 rows

List Components

Flexible list views with the same powerful pagination and selection capabilities.

Examples:
Pageable & Selectable List

Pageable & Selectable List

  • 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

Showing 8 of 8 rows

Selected: 0 items
List CSS Variables

List CSS Variables

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

Showing 3 of 5 rows

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

Showing 3 of 5 rows

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

Showing 3 of 5 rows

Card List

Card List

  • 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

Nested Lists

Nested Lists

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
List Loading, Error & Empty States

List Loading, Error & Empty States

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

Key features

Recent changes

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 20.0.0 - 1/20/24, 12:00 AM

added: Initial release of unified Paginable library (merging Table and List)

changed: Renamed from ng-hub-ui-table to ng-hub-ui-paginable

added: Added support for Paginable List view

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 2.1.0 - 3/15/24, 12:00 AM

added: Expandable rows functionality

added: Advanced filtering with custom filter templates

changed: Enhanced responsive design with mobile-optimized layout

Version 2.0.0 - 2/20/24, 12:00 AM

added: Multi-column sorting with visual indicators

added: Column-specific filtering capabilities

added: Server-side pagination support

changed: Better accessibility with ARIA support

changed: Updated API for better type safety

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

Version 1.0.0 - 11/1/23, 12:00 AM

added: Initial table component release

added: Basic data display with configurable headers

added: TypeScript support with strict typing

Related libraries

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