جدول البيانات والقائمة المقسّمة لـ 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 فرق Angular التي تبني لوحات الإدارة ونتائج البحث وشاشات CRM ومكاتب الإدارة الخلفية. تجمع بين طبقة جدول وقائمة قابلة لإعادة الاستخدام والعمليات التي تهم غالبًا في الإنتاج: التقسيم والتصفية والفرز والتحديد والقوالب المخصّصة.

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