Angular データテーブルとページネーションリスト | ng-hub-ui-paginable

サーバーサイドのページネーション、ソート、フィルタリング、選択、テンプレート、CSS 変数を備えた Angular のデータテーブルとページネーションリスト。

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