AG Grid માં હરોળનાં જૂથ, ઍગ્રિગેશન, ટ્રી ડેટા, master/detail અને Excel એક્સપોર્ટ Enterprise સુવિધાઓ છે: પ્રોડક્શનમાં ઉપયોગ માટે વ્યાવસાયિક લાઇસન્સ જોઈએ, અને કી વિના ગ્રિડ વૉટરમાર્ક બતાવે છે અને કન્સોલમાં ભૂલ લૉગ કરે છે. Needless UI ડેટા ગ્રિડમાં કુલ સરવાળા સાથે જૂથ, ટ્રી ડેટા, હરોળની વિગતો અને .xlsx એક્સપોર્ટ MIT લાઇસન્સ હેઠળ મળે છે. આ માર્ગદર્શિકા Angular ઍપને એકમાંથી બીજામાં લઈ જાય છે: શું સીધું આવી જાય છે, શું નથી આવતું, અને કોડ કેવી રીતે બદલાય છે.
અહીં AG Grid 36 નાં નામ વપરાયાં છે. AG Grid 36 Angular 20 થી 22 ને સપોર્ટ કરે છે; Needless UI ને Angular 22 જોઈએ.
તમને શું મળે છે
| સુવિધા | AG Grid | Needless UI |
|---|---|---|
| હરોળનાં જૂથ, ઍગ્રિગેટ અને કુલ સરવાળાની હરોળ સાથે | Enterprise | હા: અનેક સ્તરે, સરવાળો, સરેરાશ, લઘુતમ, મહત્તમ, ગણતરી કે કોઈ ફંક્શન સાથે |
| ટ્રી ડેટા | Enterprise | હા, નેસ્ટ કરેલી હરોળમાંથી |
| હરોળની નીચે વિગતો (master/detail) | Enterprise | હા: હરોળની નીચે કોઈ પણ ટેમ્પ્લેટ, બીજું ગ્રિડ પણ |
| Excel એક્સપોર્ટ | Enterprise: સ્ટાઇલ, અનેક શીટ, ઇમેજ અને ફૉર્મ્યુલા | હા: ડેટા પ્રકારવાળા સેલની એક શીટ, સંખ્યાના ફૉર્મેટ અને ફિલ્ટરવાળા ફ્રીઝ કરેલા હેડર સાથે |
| કૉલમ ચૂઝરવાળું કૉલમ મેનૂ | Enterprise | હા: દરેક કૉલમને સૉર્ટ, ફિલ્ટર, પિન અને ફિટ કરવી, ખસેડવી અને છુપાવવી, અને બધી કૉલમ એકસાથે બતાવવી કે છુપાવવી |
| અનેક કૉલમ મુજબ સૉર્ટિંગ, ઝડપી શોધ, પેજ, હરોળની પસંદગી | Community | હા |
| કૉલમ ફિલ્ટર | Community: AND કે OR થી જોડાયેલી વધુમાં વધુ બે શરતો | દરેક કૉલમ પર એક શરત |
| સેટ, મલ્ટી અને ઍડવાન્સ્ડ ફિલ્ટર | Enterprise | આંશિક રીતે: કૉલમના વિકલ્પોની ચેકલિસ્ટ, ડેટામાંનાં મૂલ્યોની નહીં |
| કૉલમનું કદ બદલવું, તેમને ખસેડવી, પિન કરવી અને છુપાવવી, અને તેમની સ્થિતિ સેવ કરવી | Community | હા |
| વર્ચ્યુઅલ સ્ક્રોલિંગ | Community: હરોળ અને કૉલમ | હરોળ |
| સેલ એડિટિંગ | Community; કેટલાક એડિટર ફક્ત Enterprise માં | હા, કૉલમના પ્રકાર મુજબ, વેલિડેશન સાથે; ન કસ્ટમ એડિટર, ન અનડૂ |
| પિવટિંગ, ઇન્ટિગ્રેટેડ ચાર્ટ | Enterprise | ના |
| ક્લિપબોર્ડ, સેલ રેન્જની પસંદગી, કૉન્ટેક્સ્ટ મેનૂ, સ્ટેટસ બાર, સાઇડ બાર | Enterprise | ના |
| સર્વરમાંથી ડેટા | સર્વર-સાઇડ હરોળ મૉડલ: Enterprise; બ્લૉકમાં લોડિંગ: Community | તમારા સર્વરમાંથી પેજ, તેના સૉર્ટ, ફિલ્ટર અને શોધ સાથે; સર્વર પર જૂથ નહીં |
| કૉલમનાં જૂથ, હરોળને ડ્રૅગ કરવી, પિન કરેલી હરોળ | Community | ના |
| ફ્રેમવર્ક | React, Angular 20 થી 22, Vue અને સાદી JavaScript | Angular 22 અને React 19 |
કોની જગ્યાએ શું
| AG Grid | Needless UI ગ્રિડ |
|---|---|
<ag-grid-angular>, મૉડ્યૂલ રજિસ્ટ્રેશન, LicenseManager.setLicenseKey() | <nui-grid>; ન રજિસ્ટ્રેશન, ન કી |
rowData, columnDefs | [(rows)], [columns] |
field, headerName | id, header |
valueGetter, valueFormatter, cellDataType | value, format (Intl વિકલ્પો કે કોઈ ફંક્શન), type |
cellRenderer | nuiGridCell ટેમ્પ્લેટ |
pinned: 'left', hide | pinned: 'start', hidden |
કૉલમનું rowGroup, groupDefaultExpanded | [(groupBy)], કૉલમ id ની યાદી. જૂથો શરૂઆતમાં ખુલ્લાં હોય છે; [(collapsed)] તેમને બંધ કરે છે. |
aggFunc, grandTotalRow | aggregate, totals |
treeData, treeDataChildrenField સાથે | children: (row) => row.children |
masterDetail, detailCellRenderer | nuiGridDetail ટેમ્પ્લેટ, અને [(details)] |
quickFilterText | [(search)] |
rowSelection, getSelectedRows() | selection, અને [(selected)]: પસંદ કરેલી હરોળની કી |
pagination, paginationPageSize | [(pageSize)], [(page)], pageSizes |
getColumnState(), applyColumnState() | [(columnState)] |
exportDataAsExcel(), exportDataAsCsv() | exportXlsx() એક Blob પાછો આપે છે, અને exportCsv() ટેક્સ્ટ |
cellValueChanged, rowDoubleClicked | (cellEdit), (rowActivate) |
rowModelType: 'serverSide' | mode="server", total, (queryChange) |
localeText, enableRtl | labels; જમણેથી ડાબે દિશા પેજના dir મુજબ નક્કી થાય છે |
દેશ મુજબ જૂથમાં ગોઠવેલા ઑર્ડર, બંને રીતે
કામ આ છે: ઑર્ડર દેશ મુજબ જૂથમાં ગોઠવાય, દરેક દેશનો અને બધા ઑર્ડરનો કુલ સરવાળો દેખાય, અને Excel એક્સપોર્ટ, ઝડપી શોધ અને એકથી વધુ હરોળની પસંદગી મળે. AG Grid 36 સાથે, જ્યાં જૂથ, કુલ સરવાળો અને Excel એક્સપોર્ટ માટે Enterprise જોઈએ:
Needless UI ગ્રિડ સાથે:
થોડી બાબતો જુદી રીતે કામ કરે છે. પસંદગીમાં કી, એટલે કે હરોળનાં id, રહે છે, તેથી નવો ડેટા આવે ત્યારે પણ પસંદગી ટકી રહે છે; તમને હરોળ જોઈએ ત્યારે આ કી પરથી તેમને શોધી લો. જૂથો શરૂઆતમાં ખુલ્લાં હોય છે. જૂથનું લેબલ પહેલી દેખાતી કૉલમમાં હોય છે, અને શોધ ફક્ત દેખાતી કૉલમમાં થાય છે, તેથી જો શોધમાં જૂથ બનાવતી કૉલમ પણ આવરી લેવી હોય, તો તેને છુપાવશો નહીં. અને exportXlsx() ફાઇલ ડાઉનલોડ કરવાને બદલે તેને પાછી આપે છે: ફિલ્ટર અને સૉર્ટ કરેલી હરોળની એક શીટ, જૂથ હરોળ વિના.
જો તમને ખૂટતી સુવિધા જોઈતી હોય
જો તમારી ઍપ પિવટિંગ, ચાર્ટ, ક્લિપબોર્ડ અને રેન્જની પસંદગી, સર્વર પર જૂથ બનાવવા કે કૉલમનાં જૂથ પર આધાર રાખતી હોય, તો Needless UI ગ્રિડ હજી AG Grid ની જગ્યા લઈ શકે તેમ નથી. તમને જે જોઈએ છે તેના માટે issue ખોલો. બાકીની દરેક બાબત માટે, ડેટા ગ્રિડના પેજ પર દરેક ઇનપુટ, આઉટપુટ અને ઉદાહરણ છે.