Needless UI

کمپوننٹس

Data grid

جتنی بھی قطاریں ہوں، انہیں سارٹ، فلٹر، منتخب اور اسکرول کریں، اور ان میں ترمیم کریں۔

امپورٹ

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>{}ہر کالم id کے لیے ایک فلٹر: ایک آپریٹر اور ایک ویلیو۔
searchدو طرفہstring''الفاظ، جن میں سے ہر ایک کا قطار میں ہونا لازمی ہے۔
pageSizeدو طرفہnumber0فی صفحہ قطاریں، یا ایک ہی اسکرول ہونے والی فہرست کے لیے 0۔
pageدو طرفہnumber0دکھایا گیا صفحہ، 0 سے شروع۔
pageSizesان پٹnumber[][10, 25, 50, 100]پیجر میں دستیاب آپشنز۔
virtualان پٹboolean | 'auto''auto'صرف نظر آنے والی قطاریں رینڈر کرتا ہے: ہمیشہ، کبھی نہیں، یا صفحات کے بغیر 100 قطاروں کے بعد auto۔
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آؤٹ پٹTEnter یا ڈبل کلک سے کھولی گئی قطار ایمٹ کرتا ہے۔
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کالم کی id۔

NuiGridHeader

کالم کا ہیڈر بناتا ہے۔

سلیکٹر
ng-template[nuiGridHeader]
نامٹائپڈیفالٹتفصیل
nuiGridHeaderان پٹstringکالم کی id۔

NuiGridEmpty

قطاریں نہ ہوں تو جو دکھتا ہے۔ کانٹیکسٹ بتاتا ہے کہ کیا فلٹرز نے انہیں چھپایا۔

سلیکٹر
ng-template[nuiGridEmpty]