Di AG Grid, pengelompokan baris, agregasi, data pohon, master/detail, dan ekspor Excel termasuk fitur Enterprise: penggunaan di produksi memerlukan lisensi komersial, dan tanpa kunci lisensi, grid menampilkan watermark dan mencatat error di konsol. Data grid Needless UI menyediakan pengelompokan dengan total, data pohon, detail baris, dan ekspor .xlsx dengan lisensi MIT. Panduan ini memindahkan aplikasi Angular dari yang satu ke yang lain: apa yang bisa langsung dibawa, apa yang tidak, dan bagaimana kodenya berubah.
Panduan ini memakai nama dari AG Grid 36. AG Grid 36 mendukung Angular 20 hingga 22; Needless UI memerlukan Angular 22.
Apa yang Anda dapatkan
| Fitur | AG Grid | Needless UI |
|---|---|---|
| Pengelompokan baris, dengan agregat dan baris total | Enterprise | Ya: dalam beberapa tingkat, dengan jumlah, rata-rata, minimum, maksimum, hitungan, atau fungsi |
| Data pohon | Enterprise | Ya, dari baris bertingkat |
| Detail di bawah baris (master/detail) | Enterprise | Ya: template apa pun di bawah baris, termasuk grid lain |
| Ekspor Excel | Enterprise: gaya, beberapa lembar kerja, gambar, dan rumus | Ya: satu lembar kerja berisi sel bertipe, dengan format angka serta header yang dibekukan dan diberi filter |
| Menu kolom dengan pemilih kolom | Enterprise | Ya: urutkan, saring, sematkan, pindahkan, sesuaikan lebar, dan sembunyikan setiap kolom, serta tampilkan atau sembunyikan semuanya |
| Pengurutan menurut beberapa kolom, pencarian cepat, halaman, pemilihan baris | Community | Ya |
| Filter kolom | Community: hingga dua kondisi, digabung dengan AND atau OR | Satu kondisi per kolom |
| Filter set, multi, dan lanjutan | Enterprise | Sebagian: daftar centang berisi opsi kolom, bukan nilai yang ada di data |
| Mengubah ukuran, memindahkan, menyematkan, dan menyembunyikan kolom, serta menyimpan statusnya | Community | Ya |
| Virtual scrolling | Community: baris dan kolom | Baris |
| Pengeditan sel | Community; beberapa editor hanya ada di Enterprise | Ya, menurut tipe kolom, dengan validasi; tanpa editor kustom dan tanpa fitur urungkan |
| Pivot, grafik terintegrasi | Enterprise | Tidak |
| Clipboard, pemilihan rentang sel, menu konteks, bilah status, bilah samping | Enterprise | Tidak |
| Data dari server | Model baris sisi server: Enterprise; pemuatan per blok: Community | Halaman dari server Anda, dengan pengurutan, filter, dan pencarian dari server itu; tanpa pengelompokan di server |
| Grup kolom, menyeret baris, baris yang disematkan | Community | Tidak |
| Framework | React, Angular 20 hingga 22, Vue, dan JavaScript biasa | Angular 22 dan React 19 |
Padanan opsi
| AG Grid | Grid Needless UI |
|---|---|
<ag-grid-angular>, pendaftaran modul, LicenseManager.setLicenseKey() | <nui-grid>; tanpa pendaftaran dan tanpa kunci |
rowData, columnDefs | [(rows)], [columns] |
field, headerName | id, header |
valueGetter, valueFormatter, cellDataType | value, format (opsi Intl atau fungsi), type |
cellRenderer | Template nuiGridCell |
pinned: 'left', hide | pinned: 'start', hidden |
rowGroup pada kolom, groupDefaultExpanded | [(groupBy)], daftar id kolom. Grup awalnya terbuka; [(collapsed)] menutupnya. |
aggFunc, grandTotalRow | aggregate, totals |
treeData dengan treeDataChildrenField | children: (row) => row.children |
masterDetail, detailCellRenderer | Template nuiGridDetail, dan [(details)] |
quickFilterText | [(search)] |
rowSelection, getSelectedRows() | selection, dan [(selected)]: kunci baris yang dipilih |
pagination, paginationPageSize | [(pageSize)], [(page)], pageSizes |
getColumnState(), applyColumnState() | [(columnState)] |
exportDataAsExcel(), exportDataAsCsv() | exportXlsx() mengembalikan Blob, dan exportCsv() teks |
cellValueChanged, rowDoubleClicked | (cellEdit), (rowActivate) |
rowModelType: 'serverSide' | mode="server", total, (queryChange) |
localeText, enableRtl | labels; arah kanan-ke-kiri mengikuti dir halaman |
Pesanan yang dikelompokkan per negara, dengan keduanya
Tugasnya: pesanan dikelompokkan per negara, dengan total untuk setiap negara dan satu total keseluruhan, ekspor Excel, pencarian cepat, dan pemilihan beberapa baris. Dengan AG Grid 36, yang memerlukan Enterprise untuk pengelompokan, total, dan ekspor Excel:
Dengan grid Needless UI:
Ada beberapa hal yang bekerja secara berbeda. Pemilihan disimpan sebagai kunci, yaitu id baris, sehingga tetap bertahan saat data baru masuk; petakan kembali kunci itu ke baris saat Anda membutuhkan barisnya. Grup awalnya terbuka. Label grup berada di kolom pertama yang terlihat, dan pencarian hanya membaca kolom yang terlihat, jadi biarkan kolom yang dikelompokkan tetap tampil jika pencarian perlu mencocokkannya. Selain itu, exportXlsx() mengembalikan file alih-alih mengunduhnya: satu lembar kerja berisi baris yang tersaring dan terurut, tanpa baris grup.
Jika Anda membutuhkan yang belum ada
Jika aplikasi Anda bergantung pada pivot, grafik, clipboard dan pemilihan rentang, pengelompokan di server, atau grup kolom, grid Needless UI belum bisa menggantikan AG Grid. Buka issue untuk fitur yang Anda butuhkan. Untuk semua hal lainnya, halaman data grid memuat setiap input, output, dan contoh.