Il raggruppamento delle righe, l’aggregazione, i dati ad albero, il master/detail e l’esportazione in Excel di AG Grid sono funzionalità Enterprise: l’uso in produzione richiede una licenza commerciale e, senza chiave, la griglia mostra una filigrana e scrive un errore nella console. La griglia dati di Needless UI offre raggruppamento con totali, dati ad albero, dettagli delle righe ed esportazione in .xlsx con licenza MIT. Questa guida porta un’app Angular dall’una all’altra: cosa passa così com’è, cosa no e come cambia il codice.
La guida usa i nomi di AG Grid 36. AG Grid 36 supporta da Angular 20 ad Angular 22; Needless UI richiede Angular 22.
Cosa ottieni
| Funzionalità | AG Grid | Needless UI |
|---|---|---|
| Raggruppamento delle righe, con aggregati e una riga dei totali | Enterprise | Sì: su più livelli, con somma, media, minimo, massimo, conteggio o una funzione |
| Dati ad albero | Enterprise | Sì, da righe annidate |
| Dettagli sotto una riga (master/detail) | Enterprise | Sì: qualsiasi template sotto la riga, anche un’altra griglia |
| Esportazione in Excel | Enterprise: stili, più fogli, immagini e formule | Sì: un solo foglio di celle tipizzate, con formati numerici e un’intestazione bloccata con i filtri |
| Menu di colonna con selettore delle colonne | Enterprise | Sì: ordinare, filtrare, bloccare, spostare, adattare e nascondere ogni colonna, e mostrarle o nasconderle tutte |
| Ordinamento su più colonne, ricerca rapida, paginazione, selezione delle righe | Community | Sì |
| Filtri per colonna | Community: fino a due condizioni, unite da AND o OR | Una condizione per colonna |
| Filtri set, multi e avanzati | Enterprise | In parte: una checklist delle opzioni di una colonna, non dei valori presenti nei dati |
| Ridimensionare, spostare, bloccare e nascondere le colonne, e salvarne lo stato | Community | Sì |
| Scorrimento virtuale | Community: righe e colonne | Righe |
| Modifica delle celle | Community; alcuni editor sono Enterprise | Sì, con editor in base al tipo di colonna e validazione; niente editor personalizzati né annullamento delle modifiche |
| Pivot, grafici integrati | Enterprise | No |
| Appunti, selezione di intervalli di celle, menu contestuale, barra di stato, barra laterale | Enterprise | No |
| Dati da un server | Modello di righe lato server: Enterprise; caricamento a blocchi: Community | Pagine dal tuo server, che applica ordinamento, filtri e ricerca; niente raggruppamento sul server |
| Gruppi di colonne, trascinamento delle righe, righe bloccate | Community | No |
| Framework | React, da Angular 20 a 22, Vue e JavaScript puro | Angular 22 e React 19 |
Cosa corrisponde a cosa
| AG Grid | Griglia di Needless UI |
|---|---|
<ag-grid-angular>, registrazione dei moduli, LicenseManager.setLicenseKey() | <nui-grid>; niente da registrare e nessuna chiave |
rowData, columnDefs | [(rows)], [columns] |
field, headerName | id, header |
valueGetter, valueFormatter, cellDataType | value, format (opzioni di Intl o una funzione), type |
cellRenderer | Un template nuiGridCell |
pinned: 'left', hide | pinned: 'start', hidden |
rowGroup nelle colonne, groupDefaultExpanded | [(groupBy)], un elenco di id di colonna. I gruppi sono aperti all’inizio; [(collapsed)] li chiude. |
aggFunc, grandTotalRow | aggregate, totals |
treeData con treeDataChildrenField | children: (row) => row.children |
masterDetail, detailCellRenderer | Un template nuiGridDetail e [(details)] |
quickFilterText | [(search)] |
rowSelection, getSelectedRows() | selection e [(selected)]: le chiavi delle righe selezionate |
pagination, paginationPageSize | [(pageSize)], [(page)], pageSizes |
getColumnState(), applyColumnState() | [(columnState)] |
exportDataAsExcel(), exportDataAsCsv() | exportXlsx() restituisce un Blob e exportCsv() del testo |
cellValueChanged, rowDoubleClicked | (cellEdit), (rowActivate) |
rowModelType: 'serverSide' | mode="server", total, (queryChange) |
localeText, enableRtl | labels; la direzione da destra a sinistra segue il dir della pagina |
Ordini raggruppati per paese, prima e dopo
L’obiettivo: ordini raggruppati per paese, con un totale per ogni paese e uno complessivo, l’esportazione in Excel, una ricerca rapida e la selezione multipla. Con AG Grid 36, dove il raggruppamento, i totali e l’esportazione in Excel richiedono Enterprise:
Con la griglia di Needless UI:
Alcune cose funzionano in modo diverso. La selezione contiene chiavi, cioè gli id delle righe, quindi resta valida anche con dati nuovi; quando ti servono le righe, ricavale dalle chiavi. I gruppi sono aperti all’inizio. L’etichetta di un gruppo sta nella prima colonna visibile e la ricerca legge solo le colonne visibili, quindi, se la ricerca deve trovare i valori della colonna raggruppata, tienila visibile. Infine exportXlsx() restituisce il file invece di scaricarlo: un solo foglio con le righe filtrate e ordinate, senza le righe di gruppo.
Se ti serve ciò che manca
Se la tua app dipende dal pivot, dai grafici, dagli appunti e dalla selezione di intervalli, dal raggruppamento sul server o dai gruppi di colonne, la griglia di Needless UI non può ancora sostituire AG Grid. Apri una issue per ciò che ti serve. Per tutto il resto, la pagina della griglia dati riporta ogni input, output ed esempio.