@genesislcap/grid-pro 14.200.1-alpha-eb310c6.0 → 14.201.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +111 -117
- package/dist/custom-elements.json +841 -2743
- package/dist/dts/datasource/base.datasource.d.ts +6 -22
- package/dist/dts/datasource/base.datasource.d.ts.map +1 -1
- package/dist/dts/datasource/server-side.datasource.d.ts +83 -27
- package/dist/dts/datasource/server-side.datasource.d.ts.map +1 -1
- package/dist/dts/datasource/server-side.grid-definitions.d.ts.map +1 -1
- package/dist/dts/grid-pro-genesis-datasource/grid-pro-genesis-datasource.d.ts +13 -13
- package/dist/dts/grid-pro-genesis-datasource/grid-pro-genesis-datasource.d.ts.map +1 -1
- package/dist/dts/grid-pro.d.ts +2 -16
- package/dist/dts/grid-pro.d.ts.map +1 -1
- package/dist/esm/datasource/base.datasource.js +9 -79
- package/dist/esm/datasource/client-side.grid-definitions.js +1 -1
- package/dist/esm/datasource/server-side.datasource.js +396 -220
- package/dist/esm/datasource/server-side.grid-definitions.js +7 -42
- package/dist/esm/grid-pro-genesis-datasource/grid-pro-genesis-datasource.js +61 -55
- package/dist/esm/grid-pro.js +4 -7
- package/dist/grid-pro.api.json +142 -21
- package/dist/grid-pro.d.ts +112 -77
- package/docs/api/grid-pro.gridpro.addeventlistener.md +2 -2
- package/docs/api/grid-pro.gridpro.md +1 -1
- package/docs/api/{grid-pro.gridprogenesisdatasource.destroy.md → grid-pro.gridprogenesisdatasource.auth.md} +3 -9
- package/docs/api/grid-pro.gridprogenesisdatasource.datasource.md +11 -0
- package/docs/api/grid-pro.gridprogenesisdatasource.deinit.md +0 -5
- package/docs/api/grid-pro.gridprogenesisdatasource.disablepolling.md +11 -0
- package/docs/api/grid-pro.gridprogenesisdatasource.handleerrors.md +2 -2
- package/docs/api/grid-pro.gridprogenesisdatasource.md +6 -2
- package/docs/api/grid-pro.gridprogenesisdatasource.pollinginterval.md +11 -0
- package/docs/api/grid-pro.gridprogenesisdatasource.request.md +11 -0
- package/docs/api/grid-pro.gridprogenesisdatasource.reset.md +1 -1
- package/docs/api-report.md +68 -19
- package/package.json +13 -13
- package/dist/dts/datasource/base.types.d.ts +0 -22
- package/dist/dts/datasource/base.types.d.ts.map +0 -1
- package/dist/dts/datasource/server-side.resource-base.d.ts +0 -55
- package/dist/dts/datasource/server-side.resource-base.d.ts.map +0 -1
- package/dist/dts/datasource/server-side.resource-dataserver.d.ts +0 -20
- package/dist/dts/datasource/server-side.resource-dataserver.d.ts.map +0 -1
- package/dist/dts/datasource/server-side.resource-reqrep.d.ts +0 -17
- package/dist/dts/datasource/server-side.resource-reqrep.d.ts.map +0 -1
- package/dist/esm/datasource/base.types.js +0 -1
- package/dist/esm/datasource/server-side.resource-base.js +0 -285
- package/dist/esm/datasource/server-side.resource-dataserver.js +0 -132
- package/dist/esm/datasource/server-side.resource-reqrep.js +0 -131
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The `@genesislcap/grid-pro` package provides a collection of grid-related components and utilities for Genesis applications.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
### API Documentation
|
|
6
6
|
|
|
7
7
|
For more detailed information on API and configurations, please refer to the [API documentation](docs/api/index.md) in the `docs/api` directory.
|
|
8
8
|
|
|
@@ -12,12 +12,13 @@ For more detailed information on API and configurations, please refer to the [AP
|
|
|
12
12
|
- **Customizable**: support for custom headers, mapping values, text formatting, custom cell-renderers and more (more on grid options later).
|
|
13
13
|
- **Flexible**: when it comes to **working with data** grid-pro makes it easy by supporting filtering, editing, sorting, pagination (depending on configuration).
|
|
14
14
|
- **Events** and **callbacks**: There is a large number of events and callbacks provided by the grid, you can find details [here](https://www.ag-grid.com/javascript-data-grid/grid-events/).
|
|
15
|
-
- **Simple
|
|
16
|
-
- **Simple
|
|
17
|
-
- **Connected
|
|
15
|
+
- **Simple** or **connected data**: There are two main use cases for our Grid Pro component
|
|
16
|
+
- **Simple data**: when you have your own data model and flow (JSON, external/custom REST APIs, etc) but still want to use a rich data grid component with all its features (filtering, sorting, custom cell renderers, etc).
|
|
17
|
+
- **Connected data**: when you have a Data Server or Request Server available and ready to use, and you don't want to worry about handling data transformations, updates, deletes and cell renderers in the grid.
|
|
18
18
|
- **State persistence**: ability to save and restore grid state.
|
|
19
19
|
- **Row models**: support for both client-side and server-side [row models](https://www.ag-grid.com/javascript-data-grid/row-models/).
|
|
20
20
|
|
|
21
|
+
|
|
21
22
|
## Project Structure
|
|
22
23
|
|
|
23
24
|
- **`src/`**: Source code for the package, including cell-editors, cell-renderers, datasources and utility functions.
|
|
@@ -65,11 +66,9 @@ provideDesignSystem().register(baseComponents, rapidGridComponents);
|
|
|
65
66
|
There are many attributes that can be set on a datasource component.
|
|
66
67
|
|
|
67
68
|
#### Resource Attributes
|
|
68
|
-
|
|
69
69
|
Some **resource** related attributes are `DATASERVER` or `REQUEST_SERVER` specific while others can be used with both.
|
|
70
70
|
|
|
71
71
|
##### Attributes that are common between DATASERVER and REQUEST_SERVER
|
|
72
|
-
|
|
73
72
|
|Name|Type|Default|Description|
|
|
74
73
|
|----|----|-------|-----------|
|
|
75
74
|
| `resource-name` | `string` | - | The name of the target [Data Server](https://learn.genesis.global/docs/server/data-server/introduction/) `query` or [Request Server](https://learn.genesis.global/docs/server/request-server/introduction/) `requestReply`. |
|
|
@@ -79,7 +78,6 @@ Some **resource** related attributes are `DATASERVER` or `REQUEST_SERVER` speci
|
|
|
79
78
|
| `view-number` | `number` | - | The desired view/page you want data from. |
|
|
80
79
|
|
|
81
80
|
##### DATASERVER only attributes
|
|
82
|
-
|
|
83
81
|
|Name|Type|Default|Description|
|
|
84
82
|
|----|----|-------|-----------|
|
|
85
83
|
| `fields` | `string` | - | This optional parameter allows you to select a subset of fields from the query if the client is not interested in receiving all of them. |
|
|
@@ -88,37 +86,33 @@ Some **resource** related attributes are `DATASERVER` or `REQUEST_SERVER` speci
|
|
|
88
86
|
| `order-by` | `string` | - | This option can be used to select a [Data Server index](https://learn.genesis.global/docs/database/data-types/index-entities/) (defined in the Data Server `query`), which is especially useful if you want the data to be sorted in a specific way. By default, Data Server rows are returned in order of creation (from oldest database record to newest).|
|
|
89
87
|
| `reverse` | `boolean` | `false` | This option changes the [Data Server index](https://learn.genesis.global/docs/database/data-types/index-entities/) iteration. For example, if you are using the default index, the query will return rows in order from the newest database records to the oldest.|
|
|
90
88
|
|
|
91
|
-
##### REQUEST_SERVER only attributes
|
|
92
89
|
|
|
90
|
+
##### REQUEST_SERVER only attributes
|
|
93
91
|
|Name|Type|Default|Description|
|
|
94
92
|
|----|----|-------|-----------|
|
|
95
93
|
| `disable-polling` | `boolean` | `false` | This option disables polling if set to true (data updates for the grid will not be fetched automatically).|
|
|
96
94
|
| `polling-interval` | `number` | - | This option enables you to set a custom polling frequency (in milliseconds) for a [Request Server](https://learn.genesis.global/docs/server/request-server/introduction/) resource. Note that this option only works with Request Server resources; if your resource is a Data Server `query`, your grid is updated in real time. |
|
|
97
95
|
|`request`| `string` | - | Similar to `fields` but for [Request Server](https://learn.genesis.global/docs/server/request-server/introduction/) scenarios. This optional parameter enables you to specify request fields, which can include wildcards.|
|
|
98
|
-
|`request-auto-setup`| `boolean` | `false` | This option, if set to true, will automatically set up the `request` based on the datasources's metadata.|
|
|
99
96
|
|
|
100
97
|
#### Component Attributes
|
|
101
98
|
|
|
102
99
|
There are additional attributes that can affect the behavior of a datasource component.
|
|
103
100
|
|
|
104
101
|
##### `<grid-pro-client-side-datasource>`
|
|
105
|
-
|
|
106
102
|
|Name|Type|Default|Description|
|
|
107
103
|
|----|----|-------|-----------|
|
|
108
104
|
| `restart-on-reconnection` | `boolean` | `false` | This option, if set to true, will force the resource data to be reloaded upon a reconnection event.|
|
|
109
105
|
| `keep-col-defs-on-clear-row-data` | `boolean` | `false` | This option, if set to true, will retain column definitions upon a `restart` or `clearRowData` event. |
|
|
110
106
|
|
|
111
107
|
##### `<grid-pro-server-side-datasource>`
|
|
112
|
-
|
|
113
108
|
|Name|Type|Default|Description|
|
|
114
109
|
|----|----|-------|-----------|
|
|
115
110
|
| `pagination` | `boolean` | `false` | This option enables pagination if set to true, otherwise the behavior will be infinite-scroll.|
|
|
116
|
-
| `zero-based-view-number` | `boolean` | `false` | This option, if set to true, will make the starting VIEW_NUMBER zero-based (starting from 0 instead of 1).|
|
|
117
111
|
| `live-updates` | `boolean` | `false` | This option enables live updates for the grid if set to true.|
|
|
118
112
|
|
|
119
113
|
More details about our datasource implementations [here](#genesis-datasource).
|
|
120
114
|
|
|
121
|
-
### Usage
|
|
115
|
+
### Usage (simple data example)
|
|
122
116
|
|
|
123
117
|
```typescript
|
|
124
118
|
import { ColDef, GridOptions } from '@ag-grid-community/core';
|
|
@@ -227,7 +221,7 @@ export class SimpleGridExample extends GenesisElement {
|
|
|
227
221
|
}
|
|
228
222
|
```
|
|
229
223
|
|
|
230
|
-
### Usage -
|
|
224
|
+
### Usage - connected data example (client-side row model)
|
|
231
225
|
|
|
232
226
|
```typescript
|
|
233
227
|
@customElement({
|
|
@@ -244,7 +238,7 @@ export class SimpleGridExample extends GenesisElement {
|
|
|
244
238
|
export class ConnectedGridClientSideExample extends GenesisElement {}
|
|
245
239
|
```
|
|
246
240
|
|
|
247
|
-
### Usage - connected data example (server-side
|
|
241
|
+
### Usage - connected data example (server-side row model)
|
|
248
242
|
|
|
249
243
|
Note: if pagination is set to false the grid will be in infinite scroll mode.
|
|
250
244
|
|
|
@@ -264,7 +258,7 @@ export class ConnectedGridServerSideExample extends GenesisElement {}
|
|
|
264
258
|
```
|
|
265
259
|
<!-- page-split -->
|
|
266
260
|
|
|
267
|
-
|
|
261
|
+
# Genesis Datasource
|
|
268
262
|
|
|
269
263
|
This folder contains implementations of Genesis `datasource` components, responsible for fetching data for Genesis [Grid Pro](../../README.md) components.
|
|
270
264
|
|
|
@@ -272,32 +266,32 @@ This document outlines the available features of our two “Grid Pro” datasour
|
|
|
272
266
|
|
|
273
267
|
## \<grid-pro-client-side-datasource\>
|
|
274
268
|
|
|
275
|
-
###
|
|
269
|
+
### Features
|
|
276
270
|
|
|
277
271
|
- **Sorting**: Order by any column, ASC or DESC.
|
|
278
272
|
- **Filtering**:
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
273
|
+
- Filtering options are automatically generated, based on the resource’s metadata.
|
|
274
|
+
- String Filters:
|
|
275
|
+
- contains
|
|
276
|
+
- not contains
|
|
277
|
+
- equals
|
|
278
|
+
- not equals
|
|
279
|
+
- starts with
|
|
280
|
+
- ends with
|
|
281
|
+
- blank
|
|
282
|
+
- not blank
|
|
283
|
+
- Number/Date Filters:
|
|
284
|
+
- equals
|
|
285
|
+
- less than
|
|
286
|
+
- less than or equal
|
|
287
|
+
- greater than
|
|
288
|
+
- greater than or equal
|
|
289
|
+
- in range
|
|
296
290
|
- **Filter Combinations** (Max 2 filters can be combined):
|
|
297
|
-
|
|
298
|
-
|
|
291
|
+
- filter1 AND filter2
|
|
292
|
+
- filter1 OR filter2
|
|
299
293
|
|
|
300
|
-
###
|
|
294
|
+
### Notes
|
|
301
295
|
|
|
302
296
|
- Works with both `DATASERVER` and `REQUEST_SERVER` resources.
|
|
303
297
|
- Operations like sorting and filtering are performed on the client-side.
|
|
@@ -305,52 +299,52 @@ This document outlines the available features of our two “Grid Pro” datasour
|
|
|
305
299
|
|
|
306
300
|
## \<grid-pro-server-side-datasource\>
|
|
307
301
|
|
|
308
|
-
###
|
|
302
|
+
### Features
|
|
309
303
|
|
|
310
304
|
- **Sorting**: Order by any INDEX column/field, ASC or DESC.
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
305
|
+
- This is a server limitation. For each column that needs to have “sorting” the developer will need to have an INDEX for it. See more about indexes [here](https://learn.genesis.global/docs/database/data-types/index-entities/).
|
|
306
|
+
- By default, sorting is disabled on ALL columns… BUT if we detect valid ‘` indexes” from the metadata those column/fields will be setup to have sorting.
|
|
307
|
+
- If the user attempts to force `sortable` we’ll check if it’s really ok to do that + warn in the logs about it + try to mention other available indexes.. if any at all.
|
|
314
308
|
- **Filtering**:
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
###
|
|
309
|
+
- Filtering options are automatically generated, based on the resource’s metadata.
|
|
310
|
+
- String filters
|
|
311
|
+
- blank
|
|
312
|
+
- contains
|
|
313
|
+
- equals
|
|
314
|
+
- notBlank
|
|
315
|
+
- notEqual
|
|
316
|
+
- wordStartsWith
|
|
317
|
+
- Number filters
|
|
318
|
+
- equals
|
|
319
|
+
- notEqual
|
|
320
|
+
- greaterThan
|
|
321
|
+
- greaterThanOrEqual
|
|
322
|
+
- lessThan
|
|
323
|
+
- lessThanOrEqual
|
|
324
|
+
- inRange
|
|
325
|
+
- blank
|
|
326
|
+
- notBlank
|
|
327
|
+
- Date filters
|
|
328
|
+
- equals
|
|
329
|
+
- lessThan
|
|
330
|
+
- greaterThan
|
|
331
|
+
- inRange
|
|
332
|
+
- isToday
|
|
333
|
+
- blank
|
|
334
|
+
- notBlank
|
|
335
|
+
|
|
336
|
+
### Notes
|
|
343
337
|
|
|
344
338
|
- Operations like sorting and filtering are pushed to the backend.
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
339
|
+
- Filtering uses `CRITERIA_MATCH` param
|
|
340
|
+
- Sorting uses `ORDERY_BY` param
|
|
341
|
+
- Both work the same way, once filtering/sorting is applied the datasource component “resets itself”, basically starting a new stream with the updated params.
|
|
348
342
|
- **LIMITATIONS**
|
|
349
|
-
|
|
350
|
-
|
|
343
|
+
- Sorting can only be applied to “index” fields/columns. Also mentioned [here](https://www.notion.so/Grid-Pro-Datasource-Inventory-d11ca7570ee94847bbcb3e7362025b0a?pvs=21). More details [here](https://genesisglobal.atlassian.net/jira/polaris/projects/GPR/ideas/view/4721227?selectedIssue=GPR-171&focusedCommentId=143757) and [here](https://genesis-global-talk.slack.com/archives/C0416MFG360/p1696456988606789).
|
|
344
|
+
- ROWS_COUNT doesn’t reflect the correct amount when a CRITERIA_MATCH (filtering) is applied. Example: X resource has 100 records. A criteria is specified so it returns only 50 records… the rows count sent from the server is still 100. Because of that we have to manually/locally calculate that.
|
|
351
345
|
- Suitable for large datasets where only a subset of data is loaded into the client based on user interactions.
|
|
352
346
|
|
|
353
|
-
|
|
347
|
+
<hr>
|
|
354
348
|
|
|
355
349
|
## Supported Row Models
|
|
356
350
|
|
|
@@ -362,40 +356,40 @@ It’s important to note that any client app can implement the other Row Models
|
|
|
362
356
|
|
|
363
357
|
`Infinite` and `Viewport` row models are also supported but not offered "out of the box" (devs will have to create their own component).
|
|
364
358
|
|
|
365
|
-
| Feature |
|
|
366
|
-
| --- |
|
|
367
|
-
| All Data in Client | ✓ | ✗ |
|
|
368
|
-
| Fetch Data as User Scrolls |
|
|
369
|
-
| Row Sorting
|
|
370
|
-
| Row Filtering
|
|
371
|
-
| Quick Filter |
|
|
372
|
-
| Floating Filters |
|
|
373
|
-
| Dynamic Row Height |
|
|
374
|
-
| Row Grouping |
|
|
375
|
-
| Row Pivoting |
|
|
376
|
-
| Lazy Loading Row Groups
|
|
377
|
-
| Value Aggregation
|
|
378
|
-
| Row Selection
|
|
379
|
-
| Specify Selectable Rows
|
|
380
|
-
| Header Checkbox Selection
|
|
381
|
-
| Range Selection
|
|
382
|
-
| Column Spanning
|
|
383
|
-
| Column Pinning
|
|
384
|
-
| Row Pinning
|
|
385
|
-
| Pagination
|
|
386
|
-
| Custom Filters
|
|
387
|
-
| Cell Editors
|
|
388
|
-
| Cell Renderers
|
|
389
|
-
| Value Getter
|
|
390
|
-
| Value Setter
|
|
391
|
-
| Value Formatter
|
|
392
|
-
| Value Parser
|
|
393
|
-
| Full Width Rows
|
|
394
|
-
| CSV Export
|
|
395
|
-
| Excel Export | ✓ | (data on screen)
|
|
396
|
-
| Clipboard Copy & Paste
|
|
397
|
-
| Update via Transaction
|
|
398
|
-
| Update via Async Transactions
|
|
359
|
+
| Feature | Client-Side | Server-Side | Notes |
|
|
360
|
+
| --- | --- |--- | --- |
|
|
361
|
+
| All Data in Client | ✓ | ✗ | Free |
|
|
362
|
+
| Fetch Data as User Scrolls | ✗ | ✓ | Free |
|
|
363
|
+
| Row Sorting | (client) | (client OR server) our component is server-only | Free |
|
|
364
|
+
| Row Filtering | (client) | (client OR server) our component is server-only | Free |
|
|
365
|
+
| Quick Filter | ✓ | ✓ | Free |
|
|
366
|
+
| Floating Filters | ✓ | ✓ | Free |
|
|
367
|
+
| Dynamic Row Height | ✓ | ✓ | Free |
|
|
368
|
+
| Row Grouping | (client) | (server) | Paid (Enterprise) |
|
|
369
|
+
| Row Pivoting | (client) | (server) | Paid (Enterprise) |
|
|
370
|
+
| Lazy Loading Row Groups | ✗ | ✓ | Paid (Enterprise) |
|
|
371
|
+
| Value Aggregation (client) (server) ✗ ✗ | Paid (Enterprise) |
|
|
372
|
+
| Row Selection | ✓ | ✓ | Free |
|
|
373
|
+
| Specify Selectable Rows | ✓ | ✓ | Free |
|
|
374
|
+
| Header Checkbox Selection | ✓ | ✓ | Free |
|
|
375
|
+
| Range Selection | ✓ | ✓ | Free |
|
|
376
|
+
| Column Spanning | ✓ | ✓ | Free |
|
|
377
|
+
| Column Pinning | ✓ | ✓ | Free |
|
|
378
|
+
| Row Pinning | ✓ | ✓ | Free |
|
|
379
|
+
| Pagination | ✓ | ✓ | Free |
|
|
380
|
+
| Custom Filters | ✓ | ✓ | Free |
|
|
381
|
+
| Cell Editors | ✓ | ✓ | Free |
|
|
382
|
+
| Cell Renderers | ✓ | ✓ | Free |
|
|
383
|
+
| Value Getter | ✓ | ✓ | Free |
|
|
384
|
+
| Value Setter | ✓ | ✓ | Free |
|
|
385
|
+
| Value Formatter | ✓ | ✓ | Free |
|
|
386
|
+
| Value Parser | ✓ | ✓ | Free |
|
|
387
|
+
| Full Width Rows | ✓ | ✓ | Free |
|
|
388
|
+
| CSV Export | ✓ | (data on screen) | Free |
|
|
389
|
+
| Excel Export | ✓ | (data on screen) | Paid (Enterprise) |
|
|
390
|
+
| Clipboard Copy & Paste | ✓ | ✓ | Free |
|
|
391
|
+
| Update via Transaction | ✓ | ✓ | Free |
|
|
392
|
+
| Update via Async Transactions | ✓ | ✓ | Free |
|
|
399
393
|
|
|
400
394
|
### Summary
|
|
401
395
|
|
|
@@ -406,13 +400,13 @@ It’s important to note that any client app can implement the other Row Models
|
|
|
406
400
|
|
|
407
401
|
### DOM Virtualisation
|
|
408
402
|
|
|
409
|
-
DOM Virtualisation is a powerful technique that enhances the performance of grid components by only rendering the rows and columns that are currently visible in the viewport. This approach significantly reduces the memory footprint and improves the rendering speed, enabling all of our “grid components” to handle larger datasets more efficiently.
|
|
403
|
+
DOM Virtualisation is a powerful technique that enhances the performance of grid components by only rendering the rows and columns that are currently visible in the viewport. This approach significantly reduces the memory footprint and improves the rendering speed, enabling all of our “grid components” to handle larger datasets more efficiently.
|
|
410
404
|
|
|
411
405
|
- **How It Works**: Instead of rendering all rows and columns, the grid dynamically generates the DOM elements for only the visible part of the dataset. As the user scrolls, rows and columns are created or destroyed on the fly, ensuring a smooth scrolling experience.
|
|
412
406
|
- **Benefits**:
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
407
|
+
- Reduced memory usage since only a subset of rows and columns are in the DOM at any given time.
|
|
408
|
+
- Faster initial rendering and improved responsiveness, even with large datasets.
|
|
409
|
+
- Enhanced user experience with seamless scrolling and interaction.
|
|
416
410
|
|
|
417
411
|
For more details, visit the [AG Grid DOM Virtualisation documentation](https://www.ag-grid.com/javascript-data-grid/dom-virtualisation/) (also available in [Tabulator Virtual DOM](https://tabulator.info/docs/6.2/virtual-dom))
|
|
418
412
|
|
|
@@ -422,9 +416,9 @@ Pagination is another effective technique to improve performance in AG Grid by b
|
|
|
422
416
|
|
|
423
417
|
- **How It Works**: Data is divided into pages, and only the data for the current page is loaded and rendered. Users can navigate through pages using pagination controls.
|
|
424
418
|
- **Benefits**:
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
419
|
+
- Minimizes the amount of data loaded into the client at any given time, enhancing performance.
|
|
420
|
+
- Provides a structured way to navigate large datasets, improving usability.
|
|
421
|
+
- Reduces the risk of browser crashes and memory overflow issues.
|
|
428
422
|
|
|
429
423
|
### Combined Approach
|
|
430
424
|
|
|
@@ -434,10 +428,10 @@ By leveraging both DOM Virtualisation and Pagination, our “grid components”
|
|
|
434
428
|
- **Scrolling**: As users scroll, DOM Virtualisation ensures only the visible rows and columns are rendered, maintaining performance.
|
|
435
429
|
- **Page Navigation**: Users can navigate through pages to access the full dataset without overwhelming the client.
|
|
436
430
|
|
|
431
|
+
|
|
437
432
|
## License
|
|
438
433
|
|
|
439
434
|
Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.
|
|
440
435
|
|
|
441
436
|
### Licensed components
|
|
442
|
-
|
|
443
437
|
Genesis low-code platform
|