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]