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

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

インタラクティブなサンプル

一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。

はじめに

テーブルの基本的な使い方

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

ページ送り & 選択可能なリスト

  • 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

Selected: 0 items

resource から供給するテーブル

resolvedrequests sent: 1
Invoice
Customer
Issued
Total
Status
F-2026-0148Cerámicas Talavera2026-08-031.240,00 €Paid
F-2026-0149Bodegas Ribera2026-08-053.980,50 €Sent
F-2026-0150Editorial Lumbre2026-08-08620,00 €Overdue
F-2026-0151Talleres Aranda2026-08-112.115,75 €Paid
F-2026-0152Clínica Sur2026-08-14845,20 €Sent

Nothing here binds [data], [loading] or [error]. Paging bumps the page signal the loader reads, which is why the request counter moves: the table never reloads the resource itself.

resource から供給するリスト

resolved
  • Sala Azafrán
    A-01 · Ground floor
    12 seats
  • Sala Genciana
    A-02 · Ground floor
    6 seats
  • Sala Retama
    B-11 · First floor
    24 seats
  • Sala Espliego
    B-12 · First floor
    8 seats
  • Sala Enebro
    C-21 · Second floor
    4 seats

ページング・並べ替え・絞り込み

テーブルのページネーション

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

Total employees: 20 | Current page: 1 | Page size: 5

クライアントサイドのページネーション

Name
Department
Position
Salary
John DoeEngineeringSenior Developer85000
Jane SmithMarketingMarketing Manager72000
Bob JohnsonEngineeringFrontend Developer65000
Alice BrownHRHR Specialist58000
Charlie WilsonSalesSales Representative55000

The full array (23 rows) is handed to the table — it searches, filters, sorts and paginates entirely in memory. No totalItems, no parent logic.

ページングバーを置く位置

paginationPosition
Reference
Client
Issued
Total
F-2601Cerámicas Talavera2026-01-081.240,00 €
F-2602Molinos del Duero2026-01-12820,50 €
F-2603Aceites Jaén2026-01-193.115,00 €
F-2604Textiles Béjar2026-01-23640,75 €

Watch all three pieces of the bar, not just the paginator: the page links, the rows per page selector and the row count are one block, and every value moves the block. With both the table draws it twice, so a long page can be paged from either end.

基本的な並べ替えとフィルタリング

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

高度なフィルタリング（範囲とドロップダウン）

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
Product
Price ($)
Added
Category
1Laptop Pro12002023-10-01Electronics
2Wireless Mouse252023-11-15Electronics
3Mechanical Keyboard752023-11-20Electronics
4Desk Lamp452023-12-05Office
5Ergonomic Chair2502023-12-10Office

カスタムフィルターテンプレート

Order ID
Customer
Product
Amount
Status
Priority
1001John DoeLaptop1299PendingHigh
1002Jane SmithMouse29ShippedLow
1003Bob JohnsonMonitor549DeliveredMedium
1004Alice BrownKeyboard89PendingMedium
1005Charlie WilsonChair399CancelledLow
1006Diana MartinezDesk799ShippedHigh
1007Edward TaylorWebcam149DeliveredLow
1008Fiona AndersonHeadphones199PendingMedium

サーバーサイド操作

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

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

下部バーの順序（CSS 変数）

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

List bottom bar ordering
  • Task A
  • Task B

検索と選択一致のカスタマイズ

saved: SUP-4122 · marked in the table: 0
Reference
Subject
Queue
SUP-4120Export ends in a 500Platform
SUP-4121Invoice numbering skipped a yearFinance
SUP-4122Two-factor codes arrive lateSecurity
SUP-4123Duplicate rows after an importPlatform
SUP-4124Credit note not appliedFinance

Search for ana, billing or vip: the requester and the tags have no column, so only the predicate can find them.

ページャー単体で使う

Showing 1–10 of 43
  • a.ferreiro signed in2026-09-01 01:00
  • r.castano exported the invoice ledger2026-09-02 02:07
  • m.iribarne changed a customer address2026-09-03 03:14
  • j.bengoa issued a credit note2026-09-04 04:21
  • a.ferreiro revoked an API key2026-09-05 05:28
  • r.castano signed in2026-09-01 06:35
  • m.iribarne exported the invoice ledger2026-09-02 07:42
  • j.bengoa changed a customer address2026-09-03 08:49
  • a.ferreiro issued a credit note2026-09-04 01:56
  • r.castano revoked an API key2026-09-05 02:03

選択と行アクション

選択と一括操作

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

マスター詳細の選択 (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.

行クリックの処理

ID
Product Name
Category
Price
Stock
Status
1LaptopElectronics$1,29945Available
2Office ChairFurniture$39923Available
3Wireless MouseAccessories$29156Available
4Monitor 27"Electronics$5490Out of Stock
5Desk LampFurniture$7967Available
6KeyboardAccessories$8992Available

選択中は行クリックで選択する

With nothing picked, a row click opens the shipment.

Reference
Customer
City
Carrier
Status
ES-88401Cerámicas TalaveraToledoCorreosIn transit
ES-88402Bodegas RiberaAranda de DueroSEURDelivered
ES-88403Editorial LumbreValenciaMRWIn transit
ES-88404Talleres ArandaBurgosSEURHeld
ES-88405Clínica SurMálagaCorreosDelivered
ES-88406Óptica MeridianoSevillaMRWIn transit

行アクションボタン

ID
Name
Email
Role
Status
Actions
1John Doejohn.doe@example.comAdminActive
2Jane Smithjane.smith@example.comEditorActive
3Bob Johnsonbob.johnson@example.comUserInactive
4Alice Brownalice.brown@example.comEditorActive
5Charlie Wilsoncharlie.wilson@example.comUserActive

アクションのバリアント

Room
Seats
Actions
Sala Azul8
Sala Verde4
Despacho 122

ボタンライブラリが描く行メニュー

Name
Role
Status
Actions
John DoeAdminActive
Jane SmithOwnerActive
Bob JohnsonUserInactive
Alice BrownEditorActive

一括操作（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
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

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.

見えるラベルのない、名前のあるコントロール

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

What a screen reader says on the search box

Search, edit text

From a real <label>, associated with the input and kept out of the layout by labelType="visually-hidden".

edit text

Before 22.28.0, whichever adapter was wired.

The adapter now wired — it honours the label 

create(container, config) {
  const ref = container.createComponent(HubInputComponent);
  const text = config.label ?? config.ariaLabel;

  if (text) {
    ref.setInput('label', text);
    ref.setInput('labelType', config.labelType ?? 'visually-hidden');
  }
  // …value, placeholder, cssClass
}

Both leave the control named, because the table checks what came back and applies its own aria-label when nobody else did. The difference is what the name is made of: a real label element is associated with the control, so it answers to voice control and survives a page translation, and an aria-label string does neither.

編集可能 — 表計算のように見えるコントロール

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

列・固定・レスポンシブ

展開可能な行とスティッキー列

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

複数の固定列

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

スクロール時の固定ヘッダー

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

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

列の表示／非表示

Column Visibility
ID
Product Name
SKU
Category
Price
Stock
Supplier
1LaptopLAP-001Electronics129945TechCorp
2Office ChairCHR-002Furniture39923FurnCo
3Wireless MouseMOU-003Accessories29156TechCorp
4Monitor 27"MON-004Electronics54934ScreenPro
5Desk LampLMP-005Furniture7967LightCo

レスポンシブレイアウトと状態

ID
Name
Role
1John DoeAdmin
2Jane SmithEditor

テンプレートと状態

テンプレートによるカスタマイズ

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

動的な行スタイル（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

空・エラー状態

ID
Name
Email
Role
1John Doejohn.doe@example.comAdmin
2Jane Smithjane.smith@example.comEditor
3Bob Johnsonbob.johnson@example.comUser

デフォルトの状態コンポーネント

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

リストの読み込み・エラー・空状態

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

リストとドラッグ＆ドロップ

コネクテッドリスト（タイムライン）

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

選択可能なリスト

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

ツリーの選択と、クリックが渡すもの

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)

フラット表示 — カードの積み重ねではなくリストとして

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

カード形式のリスト

  • 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

ドラッグ＆ドロップでの並べ替え

To do
  • Design the dashboard
  • Implement the API client
  • Write unit tests
  • Review pull requests
Done
  • Set up the project
  • Configure CI

Last event: drag a row by its handle, or focus it and press Space then arrows

アイテム全体のドラッグ（ハンドルなし）

No handle — grab anywhere on a row to drag it.

  • 1
    Intro
    The Standalones
  • 2
    Signals & Slots
    Reactive Trio
  • 3
    Zoneless Nights
    The Standalones
  • 4
    Template Syntax
    Control Flow
  • 5
    Outro
    Reactive Trio

Last event: drag any row, or focus one and press Space then arrows

ネストされたリストのドラッグ＆ドロップ

Drag files between folders, or reorder within a folder.

  • Documents
    • Reports
      • Q1-2026.pdf
      • Q2-2026.pdf
    • Invoices.xlsx
    • Notes.md
  • Media
    • logo.svg
    • hero.png
  • Readme.txt

Last event: drag a file or folder to reorder it

テーマとアイコン

フィルター行のテーマ設定

Themed through the tokens
Name
Role
City
Marta RuizAdminValencia
Carlos VegaEditorSevilla
Lucia MorenoUserBilbao
Pablo SerraEditorValencia

Clear button back to red at rest
Name
Role
City
Marta RuizAdminValencia
Carlos VegaEditorSevilla
Lucia MorenoUserBilbao
Pablo SerraEditorValencia

‎:root からのテーマ指定

:root {
  --hub-table-accent: #0f766e;
  --hub-table-head-bg: #0f766e;
  --hub-table-head-color: #ffffff;
  --hub-table-head-text-transform: uppercase;
  --hub-table-border-color: #99f6e4;
  --hub-table-border-radius: 1.25rem;
  --hub-table-cell-padding-y: 0.9rem;
  --hub-table-bottom-bar-padding-inline: 2rem;
}

What this used to take, and no longer does:

:root hub-table {
  --hub-table-border-radius: 1.25rem !important;
}

A declaration on the element still wins — there is nothing left to tie with — so the workaround keeps working and can be deleted.

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

The corner radius, the header, the borders, the accent behind a selected row, the paginator and its rows-per-page control all come from the block above. Nothing here reaches the table by a selector.

テーブルの CSS 変数

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

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

テーマ設定可能なヘッダーと区切り

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

タグセレクターによるダーク再テーマ

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

変更可能な展開アイコン

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

カスタムアイコンセット

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

ミックスインによるテーマ設定

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

リストの CSS 変数

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

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

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

国際化

国際化（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 レイアウト（右から左）

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

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