AG Grid’in satır gruplama, özetleme, ağaç verisi, master/detail ve Excel’e aktarma özellikleri Enterprise sürümün parçasıdır: canlı ortamda kullanmak için ticari lisans gerekir; lisans anahtarı olmadan tablo bir filigran gösterir ve konsola bir hata yazar. Needless UI veri tablosu ise toplamlı gruplamayı, ağaç verisini, satır ayrıntılarını ve .xlsx dışa aktarmayı MIT lisansıyla sunar. Bu kılavuz bir Angular uygulamasını birinden diğerine taşımayı anlatır: neyin olduğu gibi geçtiği, neyin geçmediği ve kodun nasıl değiştiği.
Kılavuz AG Grid 36’daki adları kullanır. AG Grid 36, Angular 20 ile 22 arasını destekler; Needless UI ise Angular 22 gerektirir.
Neler elde edersiniz
| Özellik | AG Grid | Needless UI |
|---|---|---|
| Özet değerler ve toplam satırıyla satır gruplama | Enterprise | Var: birden çok düzey; toplam, ortalama, en küçük, en büyük, sayı ya da bir fonksiyonla |
| Ağaç verisi | Enterprise | Var, iç içe satırlardan |
| Satırın altında ayrıntılar (master/detail) | Enterprise | Var: satırın altında herhangi bir şablon, başka bir tablo da dahil |
| Excel’e aktarma | Enterprise: stiller, birden çok sayfa, görseller ve formüller | Var: veri türü taşıyan hücrelerle tek bir sayfa; sayı biçimleri ve filtreli, dondurulmuş bir başlık satırıyla |
| Sütun seçiciyle birlikte sütun menüsü | Enterprise | Var: her sütunu sıralama, filtreleme, sabitleme, taşıma, içeriğe sığdırma ve gizleme; hepsini gösterme ya da gizleme |
| Birden çok sütuna göre sıralama, hızlı arama, sayfalar, satır seçimi | Community | Var |
| Sütun filtreleri | Community: AND ya da OR ile bağlanan en çok iki koşul | Sütun başına tek koşul |
| Set, Multi ve Advanced filtreleri | Enterprise | Kısmen: verideki değerlerden değil, sütunun seçeneklerinden oluşan onay kutulu bir liste |
| Sütunları yeniden boyutlandırma, taşıma, sabitleme, gizleme ve durumlarını kaydetme | Community | Var |
| Sanal kaydırma | Community: satırlar ve sütunlar | Satırlar |
| Hücre düzenleme | Community; bazı düzenleyiciler Enterprise | Var, sütun türüne göre, doğrulamayla; özel düzenleyici ve geri alma yok |
| Pivot tablolar, entegre grafikler | Enterprise | Yok |
| Pano, hücre aralığı seçimi, bağlam menüsü, durum çubuğu, kenar çubuğu | Enterprise | Yok |
| Sunucudan veri | Sunucu taraflı satır modeli: Enterprise; bloklar hâlinde yükleme: Community | Sunucunuzdan sayfa sayfa, sunucunun sıralaması, filtreleri ve aramasıyla; sunucuda gruplama yok |
| Sütun grupları, satır sürükleme, sabitlenmiş satırlar | Community | Yok |
| Framework’ler | React, Angular 20 ile 22 arası, Vue ve düz JavaScript | Angular 22 ve React 19 |
Neyin karşılığı ne
| AG Grid | Needless UI veri tablosu |
|---|---|
<ag-grid-angular>, modül kaydı, LicenseManager.setLicenseKey() | <nui-grid>; kaydedilecek bir şey de anahtar da yok |
rowData, columnDefs | [(rows)], [columns] |
field, headerName | id, header |
valueGetter, valueFormatter, cellDataType | value, format (Intl seçenekleri ya da bir fonksiyon), type |
cellRenderer | Bir nuiGridCell şablonu |
pinned: 'left', hide | pinned: 'start', hidden |
Sütun tanımında rowGroup, groupDefaultExpanded | [(groupBy)], sütun id’lerinden oluşan bir liste. Gruplar açık başlar; [(collapsed)] onları kapatır. |
aggFunc, grandTotalRow | aggregate, totals |
treeData ve treeDataChildrenField | children: (row) => row.children |
masterDetail, detailCellRenderer | Bir nuiGridDetail şablonu ve [(details)] |
quickFilterText | [(search)] |
rowSelection, getSelectedRows() | selection ve [(selected)]: seçili satırların anahtarları |
pagination, paginationPageSize | [(pageSize)], [(page)], pageSizes |
getColumnState(), applyColumnState() | [(columnState)] |
exportDataAsExcel(), exportDataAsCsv() | exportXlsx() bir Blob, exportCsv() ise metin döndürür |
cellValueChanged, rowDoubleClicked | (cellEdit), (rowActivate) |
rowModelType: 'serverSide' | mode="server", total, (queryChange) |
localeText, enableRtl | labels; sağdan sola yön, sayfanın dir değerine uyar |
Ülkeye göre gruplanmış siparişler, iki kütüphaneyle
Görev: ülkeye göre gruplanmış siparişler; her ülke için bir toplam ve tümü için bir toplam, Excel’e aktarma, hızlı arama ve çoklu seçim. Gruplamanın, toplamların ve Excel’e aktarmanın Enterprise gerektirdiği AG Grid 36 ile:
Needless UI veri tablosuyla:
Birkaç şey farklı çalışır. Seçim anahtarları, yani satırların id’lerini tutar; bu yüzden yeni veri geldiğinde de korunur. Satırların kendisine ihtiyacınız olduğunda anahtarları satırlara geri eşleyin. Gruplar açık başlar. Bir grubun etiketi ilk görünür sütunda yer alır ve arama yalnızca görünür sütunları okur; bu yüzden aramanın gruplanan sütunla da eşleşmesi gerekiyorsa o sütunu görünür bırakın. Ayrıca exportXlsx() dosyayı indirmez, döndürür: grup satırları olmadan, filtrelenmiş ve sıralanmış satırlardan oluşan tek bir sayfa.
Eksik olan bir şeye ihtiyacınız varsa
Uygulamanız pivot tablolara, grafiklere, panoya ve aralık seçimine, sunucuda gruplamaya ya da sütun gruplarına dayanıyorsa Needless UI veri tablosu henüz AG Grid’in yerini tutamaz. İhtiyacınız olan şey için bir issue açın. Geri kalan her şey için veri tablosunun sayfasında tüm girdiler, çıktılar ve örnekler yer alır.