Mga Enterprise feature ang row grouping, aggregation, tree data, master/detail at Excel export ng AG Grid: kailangan ng commercial license para magamit ito sa production, at kapag walang license key, may watermark ang grid at naglo-log ito ng error. Nasa Needless UI data grid ang grouping na may mga total, tree data, mga detalye ng row at .xlsx export, sa ilalim ng MIT. Inililipat ng gabay na ito ang isang Angular app mula sa isa papunta sa kabila: kung ano ang nadadala, kung ano ang hindi, at kung paano nagbabago ang code.
Ginagamit nito ang mga pangalan sa AG Grid 36. Sinusuportahan ng AG Grid 36 ang Angular 20 hanggang 22; Angular 22 ang kailangan ng Needless UI.
Ano ang makukuha mo
| Feature | AG Grid | Needless UI |
|---|---|---|
| Pag-group ng mga row, kasama ang mga aggregate at isang totals row | Enterprise | Oo: ilang level, na may sum, average, minimum, maximum, count o isang function |
| Tree data | Enterprise | Oo, mula sa mga nested na row |
| Mga detalye sa ilalim ng row (master/detail) | Enterprise | Oo: kahit anong template sa ilalim ng row, pati isa pang grid |
| Pag-export sa Excel | Enterprise: mga style, maraming sheet, mga larawan at formula | Oo: iisang sheet ng mga cell na may type, kasama ang mga number format at isang naka-freeze na header na may mga filter |
| Column menu na may column chooser | Enterprise | Oo: i-sort, i-filter, i-pin, ilipat, i-fit at itago ang bawat column, at ipakita o itago ang lahat |
| Pag-sort ayon sa ilang column, quick search, mga page, pagpili ng row | Community | Oo |
| Mga column filter | Community: hanggang dalawang kondisyon, na pinagsasama ng AND o OR | Isang kondisyon bawat column |
| Set, multi at advanced filter | Enterprise | Bahagi lang: checklist ng mga pagpipilian ng column, hindi ng mga value sa data |
| I-resize, ilipat, i-pin at itago ang mga column, at i-save ang state nila | Community | Oo |
| Virtual scrolling | Community: mga row at column | Mga row |
| Pag-edit ng cell | Community; Enterprise ang ilang editor | Oo, ayon sa type ng column, may validation; walang custom editor at walang undo |
| Pivoting, mga integrated chart | Enterprise | Wala |
| Clipboard, pagpili ng range ng mga cell, context menu, status bar, side bar | Enterprise | Wala |
| Data mula sa server | Server-side row model: Enterprise; pag-load nang paisa-isang block: Community | Mga page mula sa server mo, kasama ang sort, mga filter at search nito; walang grouping sa server |
| Mga column group, pag-drag ng row, mga naka-pin na row | Community | Wala |
| Mga framework | React, Angular 20 hanggang 22, Vue at plain JavaScript | Angular 22 at React 19 |
Ano ang katapat ng ano
| AG Grid | Needless UI data grid |
|---|---|
<ag-grid-angular>, pag-register ng module, LicenseManager.setLicenseKey() | <nui-grid>; walang kailangang i-register at walang key |
rowData, columnDefs | [(rows)], [columns] |
field, headerName | id, header |
valueGetter, valueFormatter, cellDataType | value, format (mga Intl option o isang function), type |
cellRenderer | Isang nuiGridCell template |
pinned: 'left', hide | pinned: 'start', hidden |
rowGroup ng column, groupDefaultExpanded | [(groupBy)], isang listahan ng mga column id. Bukas ang mga grupo sa simula; isinasara ang mga ito ng [(collapsed)]. |
aggFunc, grandTotalRow | aggregate, totals |
treeData kasama ang treeDataChildrenField | children: (row) => row.children |
masterDetail, detailCellRenderer | Isang nuiGridDetail template, at [(details)] |
quickFilterText | [(search)] |
rowSelection, getSelectedRows() | selection, at [(selected)]: ang mga key ng mga napiling row |
pagination, paginationPageSize | [(pageSize)], [(page)], pageSizes |
getColumnState(), applyColumnState() | [(columnState)] |
exportDataAsExcel(), exportDataAsCsv() | Nagbabalik ng Blob ang exportXlsx(), at ng text ang exportCsv() |
cellValueChanged, rowDoubleClicked | (cellEdit), (rowActivate) |
rowModelType: 'serverSide' | mode="server", total, (queryChange) |
localeText, enableRtl | labels; sumusunod ang right-to-left sa dir ng page |
Mga order na naka-group ayon sa bansa, sa dalawang paraan
Ang gawain: mga order na naka-group ayon sa bansa, may total para sa bawat bansa at isa para sa lahat, Excel export, quick search at multiple selection. Gamit ang AG Grid 36, kung saan kailangan ng Enterprise ang grouping, ang mga total at ang Excel export:
Gamit ang Needless UI data grid:
Ilang bagay ang magkaiba. Mga key ang hawak ng selection, ang mga id ng mga row, kaya nananatili ito kahit may bagong data; i-map pabalik ang mga ito sa mga row kapag kailangan mo ang mga row. Bukas ang mga grupo sa simula. Nasa unang nakikitang column ang label ng isang grupo, at ang mga nakikitang column lang ang binabasa ng search, kaya panatilihing nakikita ang naka-group na column kung dapat itong tumugma sa search. At ibinabalik ng exportXlsx() ang file sa halip na i-download ito: iisang sheet ng mga na-filter at na-sort na row, nang walang mga row ng grupo.
Kung kailangan mo ang wala pa
Kung umaasa ang app mo sa pivoting, mga chart, clipboard at range selection, grouping sa server o mga column group, hindi pa kayang palitan ng Needless UI data grid ang AG Grid. Magbukas ng issue para sa kailangan mo. Para sa lahat ng iba pa, nasa page ng data grid ang bawat input, output at example.