Nglompokake baris, agregasi, data wit, master/detail lan ekspor Excel ing AG Grid iku fitur Enterprise: kanggo produksi kudu nganggo lisensi komersial, lan tanpa kunci, grid nampilake watermark lan nulis error ing console. Grid data Needless UI nduweni klompok karo total, data wit, rincian baris lan ekspor .xlsx kanthi lisensi MIT. Pandhuan iki mindhah aplikasi Angular saka siji menyang sijine: apa sing bisa langsung digawa, apa sing ora, lan kepiye kode kudu diowahi.
Pandhuan iki nganggo jeneng saka AG Grid 36. AG Grid 36 ndhukung Angular 20 nganti 22; Needless UI butuh Angular 22.
Apa sing panjenengan entuk
| Fitur | AG Grid | Needless UI |
|---|---|---|
| Nglompokake baris, karo agregat lan baris total | Enterprise | Ya: pirang-pirang tingkat, karo jumlah, rata-rata, minimum, maksimum, cacah utawa fungsi |
| Data wit | Enterprise | Ya, saka baris sing susun |
| Rincian ing sangisore baris (master/detail) | Enterprise | Ya: template apa wae ing sangisore baris, kalebu grid liyane |
| Ekspor Excel | Enterprise: gaya, pirang-pirang sheet, gambar lan rumus | Ya: siji sheet isi sel sing duwe jinis, kanthi format angka lan header beku sing ana saringane |
| Menu kolom karo pamilih kolom | Enterprise | Ya: ngurutake, nyaring, nyemat, mindhah, nyetel ambane lan ndhelikake saben kolom, uga nampilake utawa ndhelikake kabeh kolom |
| Ngurutake miturut pirang-pirang kolom, panelusuran cepet, kaca, milih baris | Community | Ya |
| Saringan kolom | Community: nganti rong syarat, digabung nganggo AND utawa OR | Siji syarat saben kolom |
| Saringan set, multi lan lanjutan | Enterprise | Saperangan: checklist saka pilihan kolom, dudu saka nilai sing ana ing data |
| Ngowahi ambane, mindhah, nyemat lan ndhelikake kolom, uga nyimpen kahanane | Community | Ya |
| Virtual scrolling | Community: baris lan kolom | Baris |
| Nyunting sel | Community; sawetara editor kudu Enterprise | Ya, miturut jinis kolom, karo validasi; tanpa editor kustom lan tanpa undo |
| Pivot, grafik terintegrasi | Enterprise | Ora |
| Clipboard, milih sarangkaian sel, menu konteks, status bar, side bar | Enterprise | Ora |
| Data saka server | Row model sisih server: Enterprise; njupuk data saben blok: Community | Kaca saka server panjenengan, kanthi urutan, saringan lan panelusuran sing ditindakake server; ora bisa nglompokake ing server |
| Klompok kolom, nyeret baris, baris sing disemat | Community | Ora |
| Framework | React, Angular 20 nganti 22, Vue lan JavaScript biasa | Angular 22 lan React 19 |
Apa cocog karo apa
| AG Grid | Grid Needless UI |
|---|---|
<ag-grid-angular>, ndhaftarake modul, LicenseManager.setLicenseKey() | <nui-grid>; ora ana sing kudu didhaftarake lan tanpa kunci |
rowData, columnDefs | [(rows)], [columns] |
field, headerName | id, header |
valueGetter, valueFormatter, cellDataType | value, format (pilihan Intl utawa fungsi), type |
cellRenderer | Template nuiGridCell |
pinned: 'left', hide | pinned: 'start', hidden |
rowGroup ing kolom, groupDefaultExpanded | [(groupBy)], dhaptar id kolom. Klompok wiwitane kabukak; [(collapsed)] nutup klompok-klompok kasebut. |
aggFunc, grandTotalRow | aggregate, totals |
treeData karo treeDataChildrenField | children: (row) => row.children |
masterDetail, detailCellRenderer | Template nuiGridDetail, lan [(details)] |
quickFilterText | [(search)] |
rowSelection, getSelectedRows() | selection, lan [(selected)]: kunci baris-baris sing dipilih |
pagination, paginationPageSize | [(pageSize)], [(page)], pageSizes |
getColumnState(), applyColumnState() | [(columnState)] |
exportDataAsExcel(), exportDataAsCsv() | exportXlsx() mbalekake Blob, lan exportCsv() mbalekake teks |
cellValueChanged, rowDoubleClicked | (cellEdit), (rowActivate) |
rowModelType: 'serverSide' | mode="server", total, (queryChange) |
localeText, enableRtl | labels; arah saka tengen ngiwa ngetutake dir ing kaca |
Pesenan diklompokake miturut negara, nganggo loro-lorone
Sing arep digawe: pesenan sing diklompokake miturut negara, karo total kanggo saben negara lan siji total kanggo kabeh, ekspor Excel, panelusuran cepet lan milih pirang-pirang baris. Nganggo AG Grid 36, sing kudu Enterprise kanggo klompok, total lan ekspor Excel:
Nganggo grid Needless UI:
Ana sawetara bab sing beda. Sing dipilih disimpen minangka kunci, yaiku id baris, dadi ora ilang nalika ana data anyar; yen panjenengan butuh barise, golekana maneh saka kunci kasebut. Klompok wiwitane kabukak. Label klompok ana ing kolom kapisan sing katon, lan panelusuran mung maca kolom sing katon, dadi jarna kolom sing diklompokake tetep katon yen panelusuran kudu bisa nemokake isine. Lan exportXlsx() mbalekake berkas tinimbang ngundhuh: siji sheet isi baris sing wis disaring lan diurutake, tanpa baris klompok.
Yen butuh sing durung ana
Yen aplikasi panjenengan gumantung marang pivot, grafik, clipboard lan milih sarangkaian sel, nglompokake ing server utawa klompok kolom, grid Needless UI durung bisa ngganti AG Grid. Bukak issue kanggo apa sing panjenengan butuhake. Kanggo liyane, kaca grid data nduweni saben input, output lan conto.