Angular 数据表格与分页列表 | ng-hub-ui-paginable

Angular 数据表格和分页列表，支持服务端分页、排序、筛选、选择、模板和 CSS 变量。

Overview

Why teams search for this library

当你需要服务端操作、选择、筛选和可复用的列表渲染，又不想在每个项目中重建表格逻辑时，请使用这个 Angular 数据表格和分页列表库。

Install

npm install ng-hub-ui-paginable

Jump to

Ideal for

  • 管理表格
  • CRM 数据集
  • 搜索结果
  • 管理后台系统

About paginable

ng-hub-ui-paginable 面向构建管理后台、搜索结果、CRM 页面和管理后台系统的 Angular 团队。它将一个可复用的表格和列表层，与生产中通常最重要的操作结合起来：分页、筛选、排序、选择和自定义模板。

Feature guides

核心用法

基础的 table 渲染和分页。

Examples:
表格基础用法

表格基础用法

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

表格分页

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
表格的 CSS 变量

表格的 CSS 变量

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

数据管理

排序、过滤、选择以及服务端操作。

Examples:
基础排序与筛选

基础排序与筛选

ID
Name
Role
Status
1John DoeAdminActive
2Jane SmithEditorInactive
3Bob JohnsonUserPending
4Alice BrownEditorActive
5Charlie WilsonUserDeleted
高级筛选（菜单与范围）

高级筛选（菜单与范围）

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
批量选择与操作

批量选择与操作

ID
Name
Email
Role
1John Doejohn@example.comAdmin
2Jane Smithjane@example.comEditor
3Bob Johnsonbob@example.comUser
4Alice Brownalice@example.comEditor
5Charlie Wilsoncharlie@example.comUser
批量操作（batchActions）

批量操作（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
服务端操作

服务端操作

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

高级功能

可展开行、自定义模板、响应式布局和动态样式。

Examples:
可展开行与粘性列

可展开行与粘性列

ID
Name
Role
Email
Actions
1John DoeAdminjohn@example.com
2Jane SmithEditorjane@example.com
3Bob JohnsonUserbob@example.com
4Alice BrownEditoralice@example.com
使用模板进行自定义

使用模板进行自定义

ID
Name
Role
Status
1John Doe Admin
Active
2Jane Smith Editor
Active
3Bob Johnson User
Inactive
响应式布局与状态

响应式布局与状态

ID
Name
Role
1John DoeAdmin
2Jane SmithEditor
默认状态组件

默认状态组件

ID
Name
Role
1John DoeAdmin
2Jane SmithEditor
3Bob JohnsonUser
动态行样式（rowClass）

动态行样式（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
国际化（i18n）

国际化（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 布局（从右到左）

RTL 布局（从右到左）

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

底部栏排序（CSS 变量）

底部栏排序（CSS 变量）

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

列表组件

灵活的列表视图，具备同样强大的分页和选择能力。

Examples:
可分页与可选择列表

可分页与可选择列表

  • 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
列表的 CSS 变量

列表的 CSS 变量

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

卡片式列表

卡片式列表

  • 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

嵌套列表

嵌套列表

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
列表加载、错误和空状态

列表加载、错误和空状态

  • 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