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'`	కనిపించే వరుసలనే రెండర్ చేస్తుంది: ఎల్లప్పుడూ, ఎప్పుడూ కాదు, లేదా `auto` తో పేజీలు లేనప్పుడు 100 వరుసలు దాటాక.
`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` నుంచే వస్తుంది.