Data grid चा React 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` देते.