مرجع API لمكوّن شبكة البيانات في React

الاستيراد

import-grid.tsx

import { NuiGrid, type NuiGridColumn, type NuiGridHandle } from '@needless-ui/react/grid';

NuiGrid

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

NuiGrid: الخصائص
الاسم	النوع	القيمة الافتراضية	الوصف
`rows`خاصية (prop)	`readonly T[]`		البيانات. يستبدل التعديل صفّه ويستدعي `onRowsChange`؛ وقيمة `rows` التالية التي تمرّرها تحل محل التعديلات.
`onRowsChange`دالة رد نداء	`(rows: readonly T[]) => void`		تُستدعى مع الصفوف بعد كل تعديل معتمد.
`columns`خاصية (prop)	`NuiGridColumn<T>[]`		الأعمدة، على هيئة كائنات `NuiGridColumn`.
`rowId`خاصية (prop)	`(row: T) => unknown`	`row.id ?? row`	مفتاح الصف، للتحديد والتتبّع.
`label`خاصية (prop)	`string`		اسم الشبكة الذي تقرؤه التقنيات المساعدة.
`selection`خاصية (prop)	`'none' \| 'single' \| 'multiple'`	`'none'`	ما إذا كان يمكن تحديد الصفوف، وكم صفًّا.
`selected` `defaultSelected` `onSelectedChange`حالة	`unknown[]`	`[]`	مفاتيح الصفوف المحددة.
`sort` `defaultSort` `onSortChange`حالة	`NuiGridSort[]`	`[]`	الفرز، على هيئة كائنات `{ column, direction }`؛ وللأول الأولوية.
`filters` `defaultFilters` `onFiltersChange`حالة	`Record<string, NuiGridFilter>`	`{}`	تصفية لكل معرّف عمود: مُعامِل وقيمة.
`search` `defaultSearch` `onSearchChange`حالة	`string`	`''`	كلمات يجب أن تظهر كلها في الصف.
`pageSize` `defaultPageSize` `onPageSizeChange`حالة	`number`	`0`	عدد الصفوف في الصفحة، أو 0 لقائمة واحدة قابلة للتمرير.
`page` `defaultPage` `onPageChange`حالة	`number`	`0`	الصفحة المعروضة، بدءًا من 0.
`pageSizes`خاصية (prop)	`number[]`	`[10, 25, 50, 100]`	الخيارات المتاحة في شريط الصفحات.
`virtual`خاصية (prop)	`boolean \| 'auto'`	`'auto'`	يرسم الصفوف الظاهرة فقط: دائمًا، أو أبدًا، أو مع `auto` بعد 100 صف دون صفحات.
`height`خاصية (prop)	`string`		طول CSS يحدّ الشبكة؛ ويجري التمرير داخلها.
`columnState` `defaultColumnState` `onColumnStateChange`حالة	`NuiGridColumnState[]`	`[]`	عرض كل عمود وترتيبه وتثبيته وظهوره، لحفظها واستعادتها.
`mode`خاصية (prop)	`'client' \| 'server'`	`'client'`	يعرض `server` الصفوف كما تصل، ويترك لك الفرز والتصفية والتقسيم إلى صفحات.
`total`خاصية (prop)	`number`		عدد الصفوف على الخادم.
`loading`خاصية (prop)	`boolean`	`false`	يعرض شريط تقدّم، وصفوفًا مؤقتة ما دامت لا توجد صفوف.
`locale`خاصية (prop)	`string`	`'en-US'`	يُنسّق الأرقام والتواريخ، ويقرأ الأرقام المكتوبة.
`labels`خاصية (prop)	`Partial<NuiGridLabels>`		كل نص تعرضه الشبكة أو تُعلنه، لترجمته.
`corners`خاصية (prop)	`NuiCorners`		شكل زواياه: `round` أو `squircle` أو `bevel` أو `scoop` أو `notch` أو `square`.
`radius`خاصية (prop)	`NuiRadius`		حجم زواياه: `none` أو `small` أو `medium` أو `large` أو `full`.
`density`خاصية (prop)	`NuiDensity`		المساحة التي يشغلها: `compact` أو `regular` أو `roomy`.
`groupBy`خاصية (prop)	`string[]`	`[]`	الأعمدة التي تُجمَّع الصفوف حسبها، بدءًا من المستوى الخارجي.
`collapsed` `defaultCollapsed` `onCollapsedChange`حالة	`string[]`	`[]`	مفاتيح المجموعات المغلقة؛ وتبدأ المجموعات مفتوحة.
`getChildren`خاصية (prop)	`(row: T) => T[] \| undefined`		الصفوف الفرعية للصف: وبها تعرض الشبكة بيانات شجرية.
`expanded` `defaultExpanded` `onExpandedChange`حالة	`unknown[]`	`[]`	مفاتيح الصفوف المفتوحة في البيانات الشجرية؛ وتبدأ الصفوف مغلقة.
`details` `defaultDetails` `onDetailsChange`حالة	`unknown[]`	`[]`	مفاتيح الصفوف التي تفاصيلها مفتوحة.
`totals, flash`خاصية (prop)	`boolean`	`false`	صف من القيم التجميعية لكل الصفوف المصفّاة؛ وخلايا تومض حين يتغيّر نصها، في صفوف لها `rowId` ثابت.
`layout`خاصية (prop)	`'table' \| 'list' \| 'auto'`	`'table'`	يعرض `list` الصفوف على هيئة بطاقات، ويفعل `auto` ذلك على الشاشات الضيقة.
`toolbar`خاصية (prop)	`boolean \| 'auto'`	`'auto'`	شريط يفرز الصفوف ويصفّيها ويحددها كلها: دائمًا، أو أبدًا، أو مع `auto` حين تُعرض البطاقات.
`renderEmpty`دالة رسم	`(filtered: boolean) => ReactNode`		ما يظهر حين لا توجد صفوف؛ وتُخبَر الدالة إن كانت التصفية قد أخفتها.
`renderDetail`دالة رسم	`(row: T) => ReactNode`		تفاصيل الصف، وتظهر تحته عند فتحها. وتضيف الشبكة عمودًا من أزرار التبديل.
`onRowActivate`دالة رد نداء	`(row: T) => void`		تُستدعى مع الصف الذي فُتح بمفتاح Enter أو بنقرة مزدوجة.
`onCellEdit`دالة رد نداء	`(edit: NuiGridEdit<T>) => void`		تُستدعى مع كل تعديل معتمد.
`onQueryChange`دالة رد نداء	`(query: NuiGridQuery) => void`		تُستدعى مع الفرز وعوامل التصفية والبحث والصفحة كلما تغيّرت، ومرة واحدة عند البدء.
`ref`خاصية (prop)	`Ref<NuiGridHandle>`		ما يصل إليه `ref` الشبكة: التصدير والطباعة والتركيز.
`exportXlsx, print`دالة	`(options?) => Blob, () => void`		الصفوف المصفّاة والمفروزة في جدول بيانات؛ ويطبع كل الصفوف.
`exportCsv`دالة	`(options?) => string`		الصفوف المصفّاة والمفروزة من الأعمدة الظاهرة، بصيغة CSV.
`expandAll`دالة	`(open?: boolean) => void`		يفتح كل مجموعة وكل صف له صفوف فرعية، أو يُغلقها كلها.
`focusCell`دالة	`(row: number, col: number) => void`		ينقل التركيز إلى خلية؛ والصف `-1` هو صف الرؤوس.
`clearFilters`دالة	`() => void`		يمسح كل عوامل التصفية والبحث.
`fit`دالة	`(id: string) => void`		يلائم عرض العمود مع أعرض خلاياه المعروضة.

تعمل الحالة كما تعمل عناصر الإدخال في React نفسها: مرّر قيمة وحدّثها من دالة رد النداء on…Change الخاصة بها، أو مرّر قيمة default… ودع المكوّن يحتفظ بها.

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

NuiGridColumn

عمود واحد. يقبل كل خصائص عمود Angular (لا يلزم منه إلا id وheader)، إضافةً إلى هاتين الخاصيتين اللتين ترسمانه.

NuiGridColumn: الخصائص
الاسم	النوع	القيمة الافتراضية	الوصف
`renderCell`دالة رسم	`({ row, value, text, column }) => ReactNode`		لرسم خلايا العمود بنفسك، من الصف وقيمة الخلية ونصها.
`renderHeader`دالة رسم	`(column) => ReactNode`		لرسم رأس العمود بنفسك؛ ويظل `header` هو ما يُسمّيه.