Needless UI

कंपोनेंट

Data grid

कितनी भी पंक्तियों को सॉर्ट, फ़िल्टर, ग्रुप, एडिट और एक्सपोर्ट करें।

इम्पोर्ट

import-grid.tsx
import { NuiGrid, type NuiGridColumn, type NuiGridHandle } from '@needless-ui/react/grid';

NuiGrid

नेटिव टेबल पर बना डेटा ग्रिड।

नामटाइपडिफ़ॉल्टविवरण
rowsप्रॉपreadonly T[]डेटा। एडिट अपनी पंक्ति को बदल देता है और onRowsChange को कॉल करता है; आपकी दी गई अगली rows एडिट की जगह ले लेती हैं।
onRowsChangeकॉलबैक(rows: readonly T[]) => voidलागू हुए हर एडिट के बाद पंक्तियों के साथ कॉल होता है।
columnsप्रॉपNuiGridColumn<T>[]कॉलम, NuiGridColumn ऑब्जेक्ट के रूप में।
rowIdप्रॉप(row: T) => unknownrow.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स्थिति		number0हर पेज पर पंक्तियाँ, या एक ही स्क्रॉल होने वाली सूची के लिए 0।
page
defaultPage
onPageChangeस्थिति		number0दिखाया गया पेज, 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प्रॉपbooleanfalseप्रोग्रेस बार दिखाता है, और पंक्तियाँ न होने पर प्लेसहोल्डर पंक्तियाँ।
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प्रॉपbooleanfalseफ़िल्टर हुई सभी पंक्तियों पर एग्रीगेट की एक पंक्ति; और वे सेल जो टेक्स्ट बदलने पर पल भर चमकते हैं, स्थायी rowId वाली पंक्तियों में।
layoutप्रॉप'table' | 'list' | 'auto''table'list पंक्तियों को कार्ड के रूप में दिखाता है, और auto ऐसा संकरी स्क्रीन पर करता है।
toolbarप्रॉपboolean | 'auto''auto'पंक्तियों को सॉर्ट व फ़िल्टर करने और सभी को चुनने वाला बार: हमेशा, कभी नहीं, या कार्ड के साथ auto।
renderEmptyरेंडर प्रॉप(filtered: boolean) => ReactNodeकोई पंक्ति न होने पर जो दिखता है; इसे बताया जाता है कि उन्हें फ़िल्टर ने छिपाया है या नहीं।
renderDetailरेंडर प्रॉप(row: T) => ReactNodeपंक्ति का ब्योरा, जो खोलने पर उसके नीचे दिखता है। ग्रिड टॉगल का एक कॉलम जोड़ता है।
onRowActivateकॉलबैक(row: T) => voidEnter या डबल-क्लिक से खोली गई पंक्ति के साथ कॉल होता है।
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 ज़रूरी हैं), और ये दो भी, जो इसे बनाती हैं।

नामटाइपडिफ़ॉल्टविवरण
renderCellरेंडर प्रॉप({ row, value, text, column }) => ReactNodeकॉलम के सेल ख़ुद बनाएँ, पंक्ति, सेल की वैल्यू और टेक्स्ट से।
renderHeaderरेंडर प्रॉप(column) => ReactNodeकॉलम का हेडर ख़ुद बनाएँ; उसका नाम फिर भी header से आता है।