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 ਦੀ ਥਾਂ ਨਹੀਂ ਲੈ ਸਕਦਾ। ਜੋ ਤੁਹਾਨੂੰ ਚਾਹੀਦਾ ਹੈ, ਉਸ ਲਈ ਇਸ਼ੂ ਖੋਲ੍ਹੋ। ਬਾਕੀ ਸਭ ਲਈ ਡਾਟਾ ਗ੍ਰਿਡ ਦੇ ਪੰਨੇ ’ਤੇ ਹਰ ਇਨਪੁੱਟ, ਆਊਟਪੁੱਟ ਅਤੇ ਉਦਾਹਰਨ ਮੌਜੂਦ ਹੈ।