Rukunta layuka, aggregation, bayanai masu tsarin bishiya, master/detail da fitarwa zuwa Excel na AG Grid suna cikin sigar Enterprise: amfani da su a production yana buƙatar lasisin kasuwanci, kuma idan babu maɓallin lasisi, grid ɗin yana nuna watermark kuma yana rubuta kuskure a console. Data grid ɗin Needless UI yana da rukunoni tare da jimilla, bayanai masu tsarin bishiya, cikakken bayanin layi da fitarwa zuwa .xlsx a ƙarƙashin MIT. Wannan jagorar tana kai manhajar Angular daga ɗaya zuwa ɗayan: abin da ke tafiya tare, abin da ba ya tafiya, da yadda code ɗin ke canzawa.
Tana amfani da sunayen AG Grid 36. AG Grid 36 yana tallafawa Angular 20 zuwa 22; Needless UI yana buƙatar Angular 22.
Abin da kuke samu
| Fasali | AG Grid | Needless UI |
|---|---|---|
| Rukunta layuka, tare da aggregates da layin jimilla | Enterprise | Ee: a matakai da yawa, da jimilla, matsakaici, mafi ƙanƙanta, mafi girma, ƙidaya ko function |
| Bayanai masu tsarin bishiya | Enterprise | Ee, daga layuka da ke cikin juna |
| Cikakken bayani a ƙarƙashin layi (master/detail) | Enterprise | Ee: kowane template a ƙarƙashin layin, har da wani grid |
| Fitarwa zuwa Excel | Enterprise: salo, sheets da yawa, hotuna da formulas | Ee: sheet ɗaya na cells masu irin bayanai, da tsarin lambobi, da layin take da aka kafe a sama mai tacewa |
| Menu na ginshiƙi mai zaɓin ginshiƙai | Enterprise | Ee: jera, tace, kafe, matsar, daidaita faɗi da ɓoye kowane ginshiƙi, da nuna ko ɓoye dukansu |
| Jerawa bisa ginshiƙai da yawa, bincike cikin sauri, shafuka, zaɓar layuka | Community | Ee |
| Tacewar ginshiƙai | Community: sharuɗɗa har guda biyu, haɗe da AND ko OR | Sharaɗi ɗaya ga kowane ginshiƙi |
| Tacewa irin ta set, multi da advanced | Enterprise | Wani ɓangare: jerin zaɓuɓɓukan ginshiƙi masu checkbox, ba na ƙimomin da ke cikin bayanai ba |
| Sauya faɗi, matsarwa, kafewa da ɓoye ginshiƙai, da adana yanayinsu | Community | Ee |
| Virtual scrolling | Community: layuka da ginshiƙai | Layuka |
| Gyaran cells | Community; wasu editors na Enterprise ne kawai | Ee, bisa irin ginshiƙi, tare da tantancewa; babu editors na musamman, babu Undo |
| Pivoting, charts da aka gina a ciki | Enterprise | A’a |
| Clipboard, zaɓar cells a jere, menu na danna dama, sandar yanayi, sandar gefe | Enterprise | A’a |
| Bayanai daga server | Tsarin layuka na gefen server: Enterprise; ɗauko layuka kashi-kashi: Community | Shafuka daga server ɗinku, tare da jerawarsa, tacewarsa da bincikensa; babu rukunta layuka a server |
| Rukunonin ginshiƙai, jan layuka, layukan da aka kafe | Community | A’a |
| Frameworks | React, Angular 20 zuwa 22, Vue da JavaScript zalla | Angular 22 da React 19 |
Madadin kowane zaɓi
| AG Grid | Grid ɗin Needless UI |
|---|---|
<ag-grid-angular>, rajistar modules, LicenseManager.setLicenseKey() | <nui-grid>; babu rajista, babu maɓallin lasisi |
rowData, columnDefs | [(rows)], [columns] |
field, headerName | id, header |
valueGetter, valueFormatter, cellDataType | value, format (zaɓuɓɓukan Intl ko function), type |
cellRenderer | Template na nuiGridCell |
pinned: 'left', hide | pinned: 'start', hidden |
rowGroup na ginshiƙi, groupDefaultExpanded | [(groupBy)], jerin id na ginshiƙai. Rukunoni suna farawa a buɗe; [(collapsed)] yana rufe su. |
aggFunc, grandTotalRow | aggregate, totals |
treeData tare da treeDataChildrenField | children: (row) => row.children |
masterDetail, detailCellRenderer | Template na nuiGridDetail, da [(details)] |
quickFilterText | [(search)] |
rowSelection, getSelectedRows() | selection, da [(selected)]: keys na layukan da aka zaɓa |
pagination, paginationPageSize | [(pageSize)], [(page)], pageSizes |
getColumnState(), applyColumnState() | [(columnState)] |
exportDataAsExcel(), exportDataAsCsv() | exportXlsx() yana dawo da Blob, exportCsv() kuma rubutu |
cellValueChanged, rowDoubleClicked | (cellEdit), (rowActivate) |
rowModelType: 'serverSide' | mode="server", total, (queryChange) |
localeText, enableRtl | labels; rubutu daga dama zuwa hagu yana bin dir na shafin |
Odar da aka rukunta bisa ƙasa, ta hanyoyin biyu
Aikin shi ne: odar da aka rukunta bisa ƙasa, tare da jimilla ga kowace ƙasa da kuma jimillar duka, fitarwa zuwa Excel, bincike cikin sauri da zaɓar layuka da yawa. Da AG Grid 36, inda rukunoni, jimilla da fitarwa zuwa Excel ke buƙatar Enterprise:
Da grid ɗin Needless UI:
Wasu abubuwa suna aiki daban. Zaɓin yana riƙe da keys, wato id na layuka, don haka ba ya ɓacewa idan sabbin bayanai suka zo; ku nemo layukan ta keys ɗin idan kuna buƙatarsu. Rukunoni suna farawa a buɗe. Lakabin rukuni yana cikin ginshiƙi na farko da ake gani, kuma bincike yana duba ginshiƙan da ake gani ne kawai, don haka ku bar ginshiƙin da aka rukunta da shi a bayyane idan kuna son bincike ya same shi. Kuma exportXlsx() yana dawo da fayil ɗin maimakon sauke shi: sheet ɗaya na layukan da aka tace aka jera, ba tare da layukan rukuni ba.
Idan kuna buƙatar abin da babu
Idan manhajarku ta dogara da pivoting, charts, clipboard da zaɓar cells a jere, rukunta layuka a server ko rukunonin ginshiƙai, grid ɗin Needless UI ba zai iya maye gurbin AG Grid ba tukuna. Ku buɗe issue don abin da kuke buƙata. Don duk sauran abubuwa, shafin data grid yana da kowane input, output da misali.