AG Grid-এর সারি গ্রুপিং, অ্যাগ্রিগেশন, ট্রি ডেটা, মাস্টার/ডিটেইল আর 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 | হ্যাঁ, নেস্টেড সারি থেকে |
| সারির নিচে বিস্তারিত (মাস্টার/ডিটেইল) | 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 খুলুন। বাকি সবকিছুর জন্য ডেটা গ্রিডের পেজে প্রতিটি ইনপুট, আউটপুট ও উদাহরণ আছে।