Таблица данных и постраничный список для 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
  • результаты поиска
  • управленческие back-office

About paginable

ng-hub-ui-paginable ориентирована на команды Angular, создающие админ-панели, результаты поиска, CRM-экраны и управленческие back-office. Она сочетает переиспользуемый слой таблицы и списка с операциями, которые обычно важнее всего в продакшене: пагинацией, фильтрацией, сортировкой, выбором и пользовательскими шаблонами.

Feature guides

Основное использование

Основной рендеринг таблицы и пагинация.

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