React کے لیے Data grid کا API ریفرنس

امپورٹ

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