جدول البيانات والقائمة المقسّمة لـ Angular | ng-hub-ui-paginable
جدول بيانات وقائمة مقسّمة لـ Angular مع تقسيم من جانب الخادم وفرز وتصفية وتحديد وقوالب ومتغيرات CSS.
مرجع API
إليك العقد الكامل لـ paginable: كل ما يمكنك ربطه والاستماع إليه وإسقاطه وتنسيقه، مجموعاً في مكان واحد. اربط ما تحتاجه ونسّق ما تريده — إنه standalone وملائم للـ Signals.
المدخلات
اضبط paginable عبر 10 مدخلات. اربطها مثل أي @Input في Angular.
| الاسم | النوع | الافتراضي | الوصف |
|---|---|---|---|
dataمطلوب | T[] | Observable<T[]> | — | مصفوفة عناصر البيانات لعرضها في الجدول أو Observable يُطلق مصفوفات بيانات |
headersمطلوب | PaginableTableHeader[] | — | مصفوفة إعداد تعرّف أعمدة الجدول وخصائصها |
pagination | PaginableTablePagination | — | إعداد ترقيم الصفحات بما في ذلك حجم الصفحة والصفحة الحالية وإجمالي العناصر |
options | PaginableTableOptions | — | خيارات الجدول العامة بما في ذلك وضع الاختيار وحالة التحميل والسلوك المتجاوب |
loading | boolean | — | يُظهر حالة التحميل مع طبقة تراكب spinner |
error | unknown | null | — | DOCS.PAGINABLE.API.INPUT.ERROR.DESCRIPTION |
loadingComponent | PaginableStateDefault | null | — | DOCS.PAGINABLE.API.INPUT.LOADING_COMPONENT.DESCRIPTION |
errorComponent | PaginableStateDefault | null | — | DOCS.PAGINABLE.API.INPUT.ERROR_COMPONENT.DESCRIPTION |
noResultsComponent | PaginableStateDefault | null | — | DOCS.PAGINABLE.API.INPUT.NO_RESULTS_COMPONENT.DESCRIPTION |
selected | T[] | — | مصفوفة العناصر المحددة حاليًا (الربط ثنائي الاتجاه مدعوم) |
المخرجات
تفاعل مع ما يفعله paginable — 5 أحداث لربط منطقك بها.
| الاسم | النوع | الوصف |
|---|---|---|
rowClick | TableRowEvent<T> | يُطلَق عند النقر على صف الجدول، يتضمّن بيانات الصف وتفاصيل الحدث |
selectionChange | T[] | يُطلَق عند تغيّر اختيار الصفوف، يُرجع مصفوفة العناصر المحددة |
sortChange | PaginableTableOrdination[] | يُطلَق عند تغيّر فرز الأعمدة، يُرجع إعداد الفرز الحالي |
filterChange | FilterChangeEvent | يُطلَق عند تطبيق المرشّحات أو تغييرها |
pageChange | PaginationState | يُطلَق عند تغيّر ترقيم الصفحات (رقم الصفحة أو الحجم) |
القوالب
اجعله خاصاً بك — 7 فتحات قوالب تتيح لك إسقاط ترميز مخصّص.
| الاسم | الوصف | مثال |
|---|---|---|
*paginableTableHeader | قالب رأس مخصص لتعريف رؤوس أعمدة مخصصة | <ng-template *paginableTableHeader="let column">{{ column.title }}</ng-template> |
*paginableTableCell | قالب خلية مخصص لتخصيص عرض محتوى الخلية | <ng-template *paginableTableCell="let value; let row">{{ value }}</ng-template> |
*paginableTableRow | قالب صف مخصص لتعريف بنية الصف بالكامل | <ng-template *paginableTableRow="let row"><tr>...</tr></ng-template> |
*paginableTableFilter | قالب مرشّح مخصص لإضافة عناصر واجهة مستخدم للتصفية | <ng-template *paginableTableFilter="let column"><input type="text"></ng-template> |
*paginableTableLoading | قالب حالة التحميل لمؤشّرات تحميل مخصصة | <ng-template *paginableTableLoading><div class="spinner"></div></ng-template> |
*paginableNoResults | قالب الحالة الفارغة المعروض عند عدم توفر بيانات | <ng-template *paginableNoResults><p>No data found</p></ng-template> |
*paginableTableError | قالب حالة الخطأ لمعالجة حالات الخطأ | <ng-template *paginableTableError="let error"><p>Error: {{ error }}</p></ng-template> |
متغيّرات CSS
نسّق كل بكسل عبر 69 متغيّرات CSS. تجاوزها عند :root أو حدّد نطاقها على غلاف.
DOCS.PAGINABLE.API.CSS_GROUP.TABLE_COLORS.TITLE
DOCS.PAGINABLE.API.CSS_GROUP.TABLE_COLORS.DESCRIPTION
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-table-container-bg | var(--hub-ref-color-white, #fff) | color | Background of the entire table container. #f8f9favar(--bs-body-bg) |
--hub-table-container-color | var(--hub-sys-text-primary, #212529) | color | Default text colour inside the container. #333inherit |
--hub-table-bg | var(--hub-ref-color-white, #fff) | color | Table element background. transparent#fff |
--hub-table-color | var(--hub-sys-text-primary, #212529) | color | Table text colour. #495057 |
--hub-table-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Border colour used for table, rows and cells. #ccctransparent |
--hub-table-hover-bg | | color | Row background on hover. rgba(0,0,0,.04)#f0f4f8 |
--hub-table-hover-color | | color | Row text colour on hover. inherit |
--hub-table-striped-bg | | color | Alternating stripe row background. rgba(0,0,0,.03) |
--hub-table-striped-color | | color | Alternating stripe row text colour. inherit |
--hub-table-active-bg | var(--hub-sys-state-active-bg, rgba(0,0,0,.1)) | color | Selected/active row background. #e3f2fd |
--hub-table-active-color | var(--hub-sys-text-primary, #212529) | color | Selected/active row text colour. inherit |
DOCS.PAGINABLE.API.CSS_GROUP.TABLE_LAYOUT.TITLE
DOCS.PAGINABLE.API.CSS_GROUP.TABLE_LAYOUT.DESCRIPTION
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-table-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Container corner radius. 00.5rem |
--hub-table-border-width | var(--hub-ref-border-width, 1px) | length | Border width. 02px |
--hub-table-container-gap | var(--hub-ref-space-3, 1rem) | length | Gap between container regions (top bar, table, bottom bar). 0.5rem1.5rem |
--hub-table-cell-padding-x | var(--hub-ref-space-3, 1rem) | length | Horizontal cell padding. 0.75rem1.5rem |
--hub-table-cell-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Vertical cell padding. 0.25rem0.75rem |
--hub-table-cell-padding-x-sm | var(--hub-ref-space-2, 0.5rem) | length | Horizontal cell padding in small/dense mode. 0.5rem |
--hub-table-cell-padding-y-sm | var(--hub-ref-space-1, 0.25rem) | length | Vertical cell padding in small/dense mode. 0.125rem |
--hub-table-cell-vertical-align | middle | string | Vertical alignment of cell content. topbottom |
DOCS.PAGINABLE.API.CSS_GROUP.TABLE_BARS.TITLE
DOCS.PAGINABLE.API.CSS_GROUP.TABLE_BARS.DESCRIPTION
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-table-top-bar-gap | var(--hub-ref-space-3, 1rem) | length | Gap between items in the top bar. 0.5rem |
--hub-table-top-bar-justify-content | end | string | Flex justify-content for the top bar. space-betweencenter |
--hub-table-bottom-bar-gap | var(--hub-ref-space-3, 1rem) | length | Gap between items in the bottom bar. 0.5rem |
--hub-table-bottom-bar-justify-content | space-around | string | Flex justify-content for the bottom bar. space-between |
--hub-table-bottom-bar-paginator-order | 1 | number | Flex order of the paginator in the bottom bar. 3 |
--hub-table-bottom-bar-settings-order | 2 | number | Flex order of the settings control. 1 |
--hub-table-bottom-bar-info-order | 3 | number | Flex order of the info text. 1 |
DOCS.PAGINABLE.API.CSS_GROUP.TABLE_SEARCH.TITLE
DOCS.PAGINABLE.API.CSS_GROUP.TABLE_SEARCH.DESCRIPTION
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-table-search-border-radius | | length | Search field border radius. 0.375rem9999px |
--hub-table-search-input-bg | | color | Search input background. #fff |
--hub-table-search-input-color | | color | Search input text colour. #212529 |
--hub-table-search-button-bg | | color | Search button background. var(--bs-primary) |
--hub-table-search-button-color | | color | Search button icon/text colour. #fff |
DOCS.PAGINABLE.API.CSS_GROUP.LIST_COLORS.TITLE
DOCS.PAGINABLE.API.CSS_GROUP.LIST_COLORS.DESCRIPTION
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-list-bg | | color | List host background. #ffftransparent |
--hub-list-items-bg | | color | Background of the items container. #f8f9fa |
--hub-list-item-bg | | color | Individual item background. #fff |
--hub-list-item-color | | color | Individual item text colour. #212529 |
--hub-list-item-hover-bg | | color | Item background on hover. rgba(0,0,0,.04) |
--hub-list-item-selected-bg | | color | Selected item background. #e3f2fd |
--hub-list-item-selected-color | | color | Selected item text colour. inherit |
--hub-list-item-border-color | | color | Item border colour. #dee2e6 |
DOCS.PAGINABLE.API.CSS_GROUP.LIST_LAYOUT.TITLE
DOCS.PAGINABLE.API.CSS_GROUP.LIST_LAYOUT.DESCRIPTION
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-list-gap | | length | Gap between list items. 00.5rem |
--hub-list-items-gap | | length | Gap inside the items wrapper. 0.25rem |
--hub-list-padding-x | | length | Horizontal padding of the list host. 01rem |
--hub-list-padding-y | | length | Vertical padding of the list host. 00.5rem |
--hub-list-item-padding-x | | length | Horizontal padding of each item. 1rem1.25rem |
--hub-list-item-padding-y | | length | Vertical padding of each item. 0.5rem0.75rem |
--hub-list-border-radius | | length | Container border radius. 0.375rem |
DOCS.PAGINABLE.API.CSS_GROUP.LIST_CARDS.TITLE
DOCS.PAGINABLE.API.CSS_GROUP.LIST_CARDS.DESCRIPTION
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-list-cards-columns | | number | Number of card columns (auto-fill when unset). 234 |
--hub-list-cards-min-column-width | | length | Minimum column width for auto-fill grid. 200px280px |
--hub-list-cards-gap | | length | Gap between cards. 0.75rem1.5rem |
--hub-list-cards-bg | | color | Card background. #fff |
--hub-list-cards-border-color | | color | Card border colour. #dee2e6 |
--hub-list-cards-border-radius | | length | Card corner radius. 0.5rem |
--hub-list-cards-shadow | | shadow | Card drop shadow. 0 2px 8px rgba(0,0,0,.1) |
--hub-list-cards-hover-shadow | | shadow | Card drop shadow on hover. 0 4px 16px rgba(0,0,0,.15) |
--hub-list-cards-padding-x | | length | Card horizontal padding. 1rem |
--hub-list-cards-padding-y | | length | Card vertical padding. 1rem |
DOCS.PAGINABLE.API.CSS_GROUP.PAGINATOR.TITLE
DOCS.PAGINABLE.API.CSS_GROUP.PAGINATOR.DESCRIPTION
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-paginator-link-bg | | color | Page link background. #ffftransparent |
--hub-paginator-link-color | | color | Page link text colour. var(--bs-primary) |
--hub-paginator-link-border-color | | color | Page link border colour. #dee2e6 |
--hub-paginator-link-border-radius | | length | Page link border radius. 0.375rem9999px |
--hub-paginator-link-active-bg | | color | Active page link background. var(--bs-primary) |
--hub-paginator-link-active-color | | color | Active page link text colour. #fff |
--hub-paginator-link-hover-bg | | color | Hovered page link background. #f0f4f8 |
--hub-paginator-link-padding-x | | length | Page link horizontal padding. 0.625rem |
--hub-paginator-link-padding-y | | length | Page link vertical padding. 0.375rem |
--hub-paginator-font-size | | length | Paginator font size. 0.875rem1rem |
--hub-paginator-gap | | length | Gap between paginator controls. 0.25rem0.5rem |
--hub-paginator-info-color | | color | Pagination info text colour. #6c757d |
--hub-paginator-label-color | | color | Per-page label colour. #6c757d |
التنسيق والسمات
لم يتم توثيق أي أمثلة تنسيق بعد. سيتضمّن هذا القسم وصفات التخصيص وأمثلة السمات.