AG Grid की पंक्ति ग्रुपिंग, एग्रीगेशन, ट्री डेटा, master/detail और Excel एक्सपोर्ट Enterprise सुविधाएँ हैं: प्रोडक्शन में इस्तेमाल के लिए कमर्शियल लाइसेंस ज़रूरी है, और कुंजी के बिना ग्रिड वॉटरमार्क दिखाता है और कंसोल में एक त्रुटि लॉग करता है। Needless UI डेटा ग्रिड में कुल योग के साथ ग्रुपिंग, ट्री डेटा, पंक्ति का ब्योरा और .xlsx एक्सपोर्ट MIT लाइसेंस के तहत मिलते हैं। इस गाइड में बताया गया है कि Angular ऐप को एक से दूसरे पर कैसे ले जाएँ: क्या साथ आता है, क्या नहीं, और कोड कैसे बदलता है।
यहाँ AG Grid 36 के नाम इस्तेमाल किए गए हैं। AG Grid 36, Angular 20 से 22 तक सपोर्ट करता है; Needless UI को Angular 22 चाहिए।
आपको क्या मिलता है
| सुविधा | AG Grid | Needless UI |
|---|---|---|
| पंक्तियों की ग्रुपिंग, एग्रीगेट और कुल योग की पंक्ति के साथ | Enterprise | हाँ: कई स्तरों तक, जोड़, औसत, न्यूनतम, अधिकतम, गिनती या किसी फ़ंक्शन के साथ |
| ट्री डेटा | Enterprise | हाँ, नेस्टेड पंक्तियों से |
| पंक्ति के नीचे ब्योरा (master/detail) | Enterprise | हाँ: पंक्ति के नीचे कोई भी टेम्पलेट, दूसरा ग्रिड भी |
| Excel एक्सपोर्ट | Enterprise: स्टाइल, कई शीट, इमेज और फ़ॉर्मूले | हाँ: डेटा टाइप वाले सेल की एक शीट, संख्या फ़ॉर्मैट और फ़िल्टर वाले फ़्रीज़ हेडर के साथ |
| कॉलम चूज़र वाला कॉलम मेन्यू | Enterprise | हाँ: हर कॉलम को सॉर्ट, फ़िल्टर, पिन और फ़िट करना, खिसकाना और छिपाना, और सभी कॉलम एक साथ दिखाना या छिपाना |
| कई कॉलम से सॉर्टिंग, त्वरित खोज, पेज, पंक्तियों का चुनाव | Community | हाँ |
| कॉलम फ़िल्टर | Community: AND या OR से जुड़ी ज़्यादा से ज़्यादा दो शर्तें | हर कॉलम पर एक शर्त |
| सेट, मल्टी और एडवांस्ड फ़िल्टर | Enterprise | आंशिक रूप से: कॉलम के विकल्पों की चेकलिस्ट, डेटा में मौजूद वैल्यू की नहीं |
| कॉलम का आकार बदलना, उन्हें खिसकाना, पिन करना और छिपाना, और उनकी स्थिति सहेजना | Community | हाँ |
| वर्चुअल स्क्रॉलिंग | Community: पंक्तियाँ और कॉलम | पंक्तियाँ |
| सेल एडिटिंग | Community; कुछ एडिटर सिर्फ़ Enterprise में | हाँ, कॉलम के टाइप के हिसाब से, वैलिडेशन के साथ; न कस्टम एडिटर, न अनडू |
| पिवटिंग, इंटीग्रेटेड चार्ट | Enterprise | नहीं |
| क्लिपबोर्ड, सेल रेंज चुनना, कॉन्टेक्स्ट मेन्यू, स्टेटस बार, साइड बार | Enterprise | नहीं |
| सर्वर से डेटा | सर्वर-साइड पंक्ति मॉडल: Enterprise; ब्लॉक में लोडिंग: Community | आपके सर्वर से पेज, उसके सॉर्ट, फ़िल्टर और खोज के साथ; सर्वर पर ग्रुपिंग नहीं |
| कॉलम ग्रुप, पंक्तियों को ड्रैग करना, पिन की गई पंक्तियाँ | Community | नहीं |
| फ़्रेमवर्क | React, Angular 20 से 22, Vue और सादा JavaScript | Angular 22 और React 19 |
किसकी जगह क्या
| AG Grid | Needless UI ग्रिड |
|---|---|
<ag-grid-angular>, मॉड्यूल रजिस्ट्रेशन, LicenseManager.setLicenseKey() | <nui-grid>; न रजिस्ट्रेशन, न कुंजी |
rowData, columnDefs | [(rows)], [columns] |
field, headerName | id, header |
valueGetter, valueFormatter, cellDataType | value, format (Intl विकल्प या कोई फ़ंक्शन), type |
cellRenderer | nuiGridCell टेम्पलेट |
pinned: 'left', hide | pinned: 'start', hidden |
कॉलम का rowGroup, groupDefaultExpanded | [(groupBy)], कॉलम id की सूची। ग्रुप शुरू में खुले रहते हैं; [(collapsed)] उन्हें बंद करता है। |
aggFunc, grandTotalRow | aggregate, totals |
treeData, treeDataChildrenField के साथ | children: (row) => row.children |
masterDetail, detailCellRenderer | nuiGridDetail टेम्पलेट, और [(details)] |
quickFilterText | [(search)] |
rowSelection, getSelectedRows() | selection, और [(selected)]: चुनी गई पंक्तियों की कुंजियाँ |
pagination, paginationPageSize | [(pageSize)], [(page)], pageSizes |
getColumnState(), applyColumnState() | [(columnState)] |
exportDataAsExcel(), exportDataAsCsv() | exportXlsx() एक Blob लौटाता है, और exportCsv() टेक्स्ट |
cellValueChanged, rowDoubleClicked | (cellEdit), (rowActivate) |
rowModelType: 'serverSide' | mode="server", total, (queryChange) |
localeText, enableRtl | labels; दाएँ से बाएँ की दिशा पेज के dir से तय होती है |
देश के हिसाब से ग्रुप किए गए ऑर्डर, दोनों तरह से
काम यह है: ऑर्डर देश के हिसाब से ग्रुप हों, हर देश का और सभी ऑर्डर का कुल योग दिखे, और Excel एक्सपोर्ट, त्वरित खोज और कई पंक्तियाँ चुनने की सुविधा हो। AG Grid 36 के साथ, जहाँ ग्रुपिंग, कुल योग और Excel एक्सपोर्ट के लिए Enterprise चाहिए:
Needless UI ग्रिड के साथ:
कुछ चीज़ें अलग तरह से काम करती हैं। चुनाव में कुंजियाँ, यानी पंक्तियों की id, रहती हैं, इसलिए नया डेटा आने पर भी चुनाव बना रहता है; जब आपको पंक्तियाँ चाहिए हों, तो इन कुंजियों से उन्हें ढूँढ़ लें। ग्रुप शुरू में खुले रहते हैं। ग्रुप का लेबल पहले दिखने वाले कॉलम में होता है, और खोज सिर्फ़ दिखने वाले कॉलम में होती है, इसलिए अगर खोज को ग्रुप किए गए कॉलम में भी मिलान करना है, तो उसे छिपाएँ नहीं। और exportXlsx() फ़ाइल डाउनलोड करने के बजाय उसे लौटाता है: फ़िल्टर और सॉर्ट की गई पंक्तियों की एक शीट, ग्रुप पंक्तियों के बिना।
अगर आपको वह चाहिए जो अभी नहीं है
अगर आपका ऐप पिवटिंग, चार्ट, क्लिपबोर्ड और रेंज चुनने, सर्वर पर ग्रुपिंग या कॉलम ग्रुप पर निर्भर है, तो Needless UI ग्रिड अभी AG Grid की जगह नहीं ले सकता। आपको जो चाहिए, उसके लिए एक issue खोलें। बाक़ी सब के लिए, डेटा ग्रिड के पेज पर हर इनपुट, आउटपुट और उदाहरण मौजूद है।