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]