API کامپوننت جدول داده برای React

ایمپورت

import-grid.tsx

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

NuiGrid

جدول داده‌ای بر پایهٔ جدول بومی.

NuiGrid: ویژگی‌ها
نام	نوع	پیش‌فرض	توضیح
`rows`پراپ	`readonly T[]`		داده‌ها. هر ویرایش ردیف خودش را جایگزین می‌کند و `onRowsChange` را صدا می‌زند؛ `rows` بعدی که می‌دهید جای ویرایش‌ها را می‌گیرد.
`onRowsChange`کال‌بک	`(rows: readonly T[]) => void`		پس از هر ویرایش تأییدشده، با ردیف‌ها صدا زده می‌شود.
`columns`پراپ	`NuiGridColumn<T>[]`		ستون‌ها، به‌صورت اشیای `NuiGridColumn`.
`rowId`پراپ	`(row: T) => unknown`	`row.id ?? row`	کلید هر ردیف، برای انتخاب و ردیابی.
`label`پراپ	`string`		نام دسترس‌پذیر جدول.
`selection`پراپ	`'none' \| 'single' \| 'multiple'`	`'none'`	اینکه ردیف‌ها قابل انتخاب‌اند یا نه، و چند تا.
`selected` `defaultSelected` `onSelectedChange`وضعیت	`unknown[]`	`[]`	کلیدهای ردیف‌های انتخاب‌شده.
`sort` `defaultSort` `onSortChange`وضعیت	`NuiGridSort[]`	`[]`	مرتب‌سازی، به‌صورت اشیای `{ column, direction }`؛ اولی مقدم است.
`filters` `defaultFilters` `onFiltersChange`وضعیت	`Record<string, NuiGridFilter>`	`{}`	یک فیلتر برای هر id ستون: یک عملگر و یک مقدار.
`search` `defaultSearch` `onSearchChange`وضعیت	`string`	`''`	واژه‌هایی که همه باید در ردیف باشند.
`pageSize` `defaultPageSize` `onPageSizeChange`وضعیت	`number`	`0`	تعداد ردیف در هر صفحه، یا ۰ برای یک فهرست اسکرولی.
`page` `defaultPage` `onPageChange`وضعیت	`number`	`0`	صفحهٔ نمایش‌داده‌شده، از ۰.
`pageSizes`پراپ	`number[]`	`[10, 25, 50, 100]`	گزینه‌های صفحه‌بند.
`virtual`پراپ	`boolean \| 'auto'`	`'auto'`	فقط ردیف‌های در دید را رندر می‌کند: همیشه، هرگز، یا با `auto` از ۱۰۰ ردیف به بالا بدون صفحه‌بندی.
`height`پراپ	`string`		طولی در CSS که ارتفاع جدول را محدود می‌کند؛ اسکرول درون آن است.
`columnState` `defaultColumnState` `onColumnStateChange`وضعیت	`NuiGridColumnState[]`	`[]`	پهنا، ترتیب، سنجاق و نمایش هر ستون، برای ذخیره و بازیابی.
`mode`پراپ	`'client' \| 'server'`	`'client'`	`server` ردیف‌ها را همان‌طور که می‌رسند نشان می‌دهد و مرتب‌سازی، فیلتر و صفحه‌بندی را به شما می‌سپارد.
`total`پراپ	`number`		تعداد ردیف‌ها روی سرور.
`loading`پراپ	`boolean`	`false`	نوار پیشرفت نشان می‌دهد، و تا ردیفی نیامده، ردیف‌های موقت.
`locale`پراپ	`string`	`'en-US'`	اعداد و تاریخ‌ها را قالب‌بندی می‌کند و اعداد تایپ‌شده را می‌خواند.
`labels`پراپ	`Partial<NuiGridLabels>`		همهٔ متن‌هایی که جدول نشان می‌دهد یا اعلام می‌کند، برای ترجمه.
`corners`پراپ	`NuiCorners`		شکل گوشه‌هایش: `round`، `squircle`، `bevel`، `scoop`، `notch` یا `square`.
`radius`پراپ	`NuiRadius`		اندازهٔ گوشه‌هایش: `none`، `small`، `medium`، `large` یا `full`.
`density`پراپ	`NuiDensity`		فضایی که اشغال می‌کند: `compact`، `regular` یا `roomy`.
`groupBy`پراپ	`string[]`	`[]`	ستون‌هایی که ردیف‌ها بر اساسشان گروه‌بندی می‌شوند، از بیرونی‌ترین.
`collapsed` `defaultCollapsed` `onCollapsedChange`وضعیت	`string[]`	`[]`	کلید گروه‌های بسته؛ گروه‌ها در ابتدا بازند.
`getChildren`پراپ	`(row: T) => T[] \| undefined`		فرزندان یک ردیف: جدول دادهٔ درختی نشان می‌دهد.
`expanded` `defaultExpanded` `onExpandedChange`وضعیت	`unknown[]`	`[]`	کلید ردیف‌های باز در دادهٔ درختی؛ ردیف‌ها در ابتدا بسته‌اند.
`details` `defaultDetails` `onDetailsChange`وضعیت	`unknown[]`	`[]`	کلید ردیف‌هایی که جزئیاتشان باز است.
`totals, flash`پراپ	`boolean`	`false`	ردیفی از مقادیر تجمیعی روی همهٔ ردیف‌های فیلترشده؛ سلول‌هایی که با تغییر متنشان چشمک می‌زنند، در ردیف‌هایی با `rowId` پایدار.
`layout`پراپ	`'table' \| 'list' \| 'auto'`	`'table'`	`list` ردیف‌ها را به شکل کارت نشان می‌دهد و `auto` در صفحه‌نمایش‌های باریک همین کار را می‌کند.
`toolbar`پراپ	`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`پراپ	`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` می‌آید.