ایمپورت
import { NuiGrid, NuiGridCell, type NuiGridColumn } from '@needless-ui/angular/grid';NuiGrid
جدول دادهای بر پایهٔ جدول بومی.
| نام | نوع | پیشفرض | توضیح |
|---|---|---|---|
rowsدوطرفه | readonly T[] | دادهها. ویرایشها ردیفها را جایگزین میکنند؛ پس با [(rows)] متصل کنید. | |
columnsورودی | NuiGridColumn<T>[] | ستونها، بهصورت اشیای NuiGridColumn. | |
rowIdورودی | (row: T) => unknown | row.id ?? row | کلید هر ردیف، برای انتخاب و ردیابی. |
labelورودی | string | نام دسترسپذیر جدول. | |
selectionورودی | 'none' | 'single' | 'multiple' | 'none' | اینکه ردیفها قابل انتخاباند یا نه، و چند تا. |
selectedدوطرفه | unknown[] | [] | کلیدهای ردیفهای انتخابشده. |
sortدوطرفه | NuiGridSort[] | [] | مرتبسازی، بهصورت اشیای { column, direction }؛ اولی مقدم است. |
filtersدوطرفه | Record<string, NuiGridFilter> | {} | یک فیلتر برای هر id ستون: یک عملگر و یک مقدار. |
searchدوطرفه | string | '' | واژههایی که همه باید در ردیف باشند. |
pageSizeدوطرفه | number | 0 | تعداد ردیف در هر صفحه، یا ۰ برای یک فهرست اسکرولی. |
pageدوطرفه | number | 0 | صفحهٔ نمایشدادهشده، از ۰. |
pageSizesورودی | number[] | [10, 25, 50, 100] | گزینههای صفحهبند. |
virtualورودی | boolean | 'auto' | 'auto' | فقط ردیفهای در دید را رندر میکند: همیشه، هرگز، یا با auto از ۱۰۰ ردیف به بالا بدون صفحهبندی. |
heightورودی | string | طولی در CSS که ارتفاع جدول را محدود میکند؛ اسکرول درون آن است. | |
columnStateدوطرفه | NuiGridColumnState[] | [] | پهنا، ترتیب، سنجاق و نمایش هر ستون، برای ذخیره و بازیابی. |
modeورودی | 'client' | 'server' | 'client' | server ردیفها را همانطور که میرسند نشان میدهد و مرتبسازی، فیلتر و صفحهبندی را به شما میسپارد. |
totalورودی | number | تعداد ردیفها روی سرور. | |
loadingورودی | boolean | false | نوار پیشرفت نشان میدهد، و تا ردیفی نیامده، ردیفهای موقت. |
localeورودی | string | LOCALE_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ویژگی | boolean | true | هر کدام را میتوان با false خاموش کرد. |
compareویژگی | (a: V, b: V) => number | مرتبسازی سفارشی. | |
editable, validateویژگی | boolean | ((row) => boolean), (value, row) => string | null | اینکه سلولها ویرایشپذیرند یا نه، و پیامی وقتی مقدار معتبر نیست. | |
setویژگی | (row: T, value: V) => T | ردیف ویرایششده را میسازد. پیشفرض: کپیای با مقدار جدید. |
NuiGridCell
سلولهای یک ستون را رسم میکند. کانتکست، ردیف و مقدار و متن سلول را دارد.
| نام | نوع | پیشفرض | توضیح |
|---|---|---|---|
nuiGridCellورودی | string | id ستون. |
NuiGridHeader
سرستون یک ستون را رسم میکند.
| نام | نوع | پیشفرض | توضیح |
|---|---|---|---|
nuiGridHeaderورودی | string | id ستون. |
NuiGridEmpty
آنچه وقتی ردیفی نیست نمایش داده میشود. کانتکست میگوید آیا فیلترها ردیفها را پنهان کردهاند.