Needless UI

المكونات

شبكة البيانات

فرز وتصفية وتحديد وتحرير، وتمرير عبر أي عدد من الصفوف.

الاستيراد

import-grid.ts
import { NuiGrid, NuiGridCell, type NuiGridColumn } from '@needless-ui/angular/grid';

NuiGrid

شبكة بيانات على جدول أصلي.

المُحدِّد
nui-grid
الاسمالنوعالقيمة الافتراضيةالوصف
rowsثنائي الاتجاهreadonly T[]البيانات. التعديلات تستبدل الصفوف، لذا اربطها عبر [(rows)].
columnsمُدخَلNuiGridColumn<T>[]الأعمدة، على هيئة كائنات NuiGridColumn.
rowIdمُدخَل(row: T) => unknownrow.id ?? rowمفتاح الصف، للتحديد والتتبّع.
labelمُدخَلstringاسم الشبكة الذي تقرؤه التقنيات المساعدة.
selectionمُدخَل'none' | 'single' | 'multiple''none'ما إذا كان يمكن تحديد الصفوف، وكم صفًّا.
selectedثنائي الاتجاهunknown[][]مفاتيح الصفوف المحددة.
sortثنائي الاتجاهNuiGridSort[][]الفرز، على هيئة كائنات { column, direction }؛ وللأول الأولوية.
filtersثنائي الاتجاهRecord<string, NuiGridFilter>{}تصفية لكل معرّف عمود: مُعامِل وقيمة.
searchثنائي الاتجاهstring''كلمات يجب أن تظهر كلها في الصف.
pageSizeثنائي الاتجاهnumber0عدد الصفوف في الصفحة، أو 0 لقائمة واحدة قابلة للتمرير.
pageثنائي الاتجاهnumber0الصفحة المعروضة، بدءًا من 0.
pageSizesمُدخَلnumber[][10, 25, 50, 100]الخيارات المتاحة في شريط الصفحات.
virtualمُدخَلboolean | 'auto''auto'يرسم الصفوف الظاهرة فقط: دائمًا، أو أبدًا، أو مع auto بعد 100 صف دون صفحات.
heightمُدخَلstringطول CSS يحدّ الشبكة؛ ويجري التمرير داخلها.
columnStateثنائي الاتجاهNuiGridColumnState[][]عرض كل عمود وترتيبه وتثبيته وظهوره، لحفظها واستعادتها.
modeمُدخَل'client' | 'server''client'يعرض server الصفوف كما تصل، ويترك لك الفرز والتصفية والتقسيم إلى صفحات.
totalمُدخَلnumberعدد الصفوف على الخادم.
loadingمُدخَلbooleanfalseيعرض شريط تقدّم، وصفوفًا مؤقتة ما دامت لا توجد صفوف.
localeمُدخَلstringLOCALE_IDيُنسّق الأرقام والتواريخ، ويقرأ الأرقام المكتوبة.
labelsمُدخَلPartial<NuiGridLabels>كل نص تعرضه الشبكة أو تُعلنه، لترجمته.
cornersمُدخَلNuiCornersشكل زواياه: round أو squircle أو bevel أو scoop أو notch أو square.
radiusمُدخَلNuiRadiusحجم زواياه: none أو small أو medium أو large أو full.
densityمُدخَلNuiDensityالمساحة التي يشغلها: compact أو regular أو roomy.
rowActivateمُخرَجTيُطلق الصف الذي فُتح بمفتاح Enter أو بنقرة مزدوجة.
cellEditمُخرَجNuiGridEdit<T>يُطلق كل تعديل معتمد.
queryChangeمُخرَجNuiGridQueryيُطلق الفرز وعوامل التصفية والبحث والصفحة كلما تغيّرت.
exportCsvدالة(options?) => stringالصفوف المصفّاة والمفروزة من الأعمدة الظاهرة، بصيغة CSV.
focusCellدالة(row: number, col: number) => voidينقل التركيز إلى خلية؛ والصف -1 هو صف الرؤوس.
clearFiltersدالة() => voidيمسح كل عوامل التصفية والبحث.

مُدخلات التخصيص التي تتركها دون ضبط تتبع أقرب سمة data-nui-*. راجع دليل التخصيص.

NuiGridColumn

عمود واحد. ولا يلزم منه إلا id وheader.

الاسمالنوعالقيمة الافتراضيةالوصف
idخاصيةstringفريد؛ وهو المفتاح في الفرز والتصفية وحالة الأعمدة.
headerخاصيةstringنص رأس العمود.
valueخاصيةkeyof T | ((row: T) => V)مفتاح في الصف، أو دالة تأخذ الصف. وقيمته الافتراضية row[id].
typeخاصية'text' | 'number' | 'date' | 'boolean' | 'enum''text'يحدد المحاذاة والفرز والتصفية والمحرِّر.
formatخاصيةIntl options | ((value, row) => string)خيارات Intl للأرقام والتواريخ، أو دالة تُنشئ النص.
optionsخاصيةNuiOption<V>[]خيارات عمود enum، على هيئة كائنات NuiOption.
width, minWidth, maxWidthخاصيةnumberبالبكسل.
flexخاصيةnumberيتقاسم المساحة المتبقية مع أعمدة flex الأخرى.
alignخاصية'start' | 'center' | 'end'افتراضيًا حسب النوع: الأرقام والتواريخ عند النهاية.
pinned, hiddenخاصية'start' | 'end', booleanتثبيت العمود وظهوره في البداية.
sortable, filterable, resizable, reorderable, hideableخاصيةbooleantrueيمكن إيقاف كلٍّ منها بالقيمة false.
compareخاصية(a: V, b: V) => numberفرز مخصص.
editable, validateخاصيةboolean | ((row) => boolean), (value, row) => string | nullما إذا كان يمكن تحرير الخلايا، ورسالة حين تكون القيمة غير صالحة.
setخاصية(row: T, value: V) => Tيُنشئ الصف المعدَّل. وافتراضيًا، نسخة بالقيمة الجديدة.

NuiGridCell

يرسم خلايا عمود. ويحتوي السياق على الصف وقيمة الخلية ونصها.

المُحدِّد
ng-template[nuiGridCell]
الاسمالنوعالقيمة الافتراضيةالوصف
nuiGridCellمُدخَلstringمعرّف العمود.

NuiGridHeader

يرسم رأس عمود.

المُحدِّد
ng-template[nuiGridHeader]
الاسمالنوعالقيمة الافتراضيةالوصف
nuiGridHeaderمُدخَلstringمعرّف العمود.

NuiGridEmpty

ما يظهر حين لا توجد صفوف. ويُخبرك السياق إن كانت التصفية قد أخفتها.

المُحدِّد
ng-template[nuiGridEmpty]