@genesislcap/grid-pro 14.198.0 → 14.198.1-alpha-09f65e3.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.
Files changed (2) hide show
  1. package/README.md +242 -7
  2. package/package.json +13 -13
package/README.md CHANGED
@@ -1,7 +1,40 @@
1
1
  # Genesis Foundation Grids
2
2
 
3
+ The `@genesislcap/grid-pro` package provides a collection of grid-related components and utilities for Genesis applications.
3
4
 
4
- ## Installation
5
+ ### API Documentation
6
+
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
+
9
+ ## Features
10
+
11
+ - **Easy integration**: Quick setup with modern JavaScript frameworks and libraries.
12
+ - **Customizable**: support for custom headers, mapping values, text formatting, custom cell-renderers and more (more on grid options later).
13
+ - **Flexible**: when it comes to **working with data** grid-pro makes it easy by supporting filtering, editing, sorting, pagination (depending on configuration).
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** 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
+ - **State persistence**: ability to save and restore grid state.
19
+ - **Row models**: support for both client-side and server-side [row models](https://www.ag-grid.com/javascript-data-grid/row-models/).
20
+
21
+
22
+ ## Project Structure
23
+
24
+ - **`src/`**: Source code for the package, including cell-editors, cell-renderers, datasources and utility functions.
25
+ - **[`cell/`](src/cell/README.md)**: The Grid Pro Cell element and template
26
+ - **[`cell-editors/`](src/cell-editors/README.md)**: predefined custom cell-editors for common data types including `date`, `number`, `string`, `select`, `multiselect`
27
+ - **[`cell-renderers/`](src/cell-renderers/README.md)**: predefined custom cell-renderers.
28
+ - **[`column/`](src/column/README.md)**: The Grid Pro Column element. Used insde the Grid Pro element, to specify the column definitions (ColDef) for a given column.
29
+ - **[`datasource/`](src/datasource/README.md)**: Genesis Datasource elements, responsible for fetching data for the Grid Pro element (multiple implementations available, for both client-side and server-side [row models](https://www.ag-grid.com/javascript-data-grid/row-models/)).
30
+ - **[`external/`](src/external/README.md)**: External assets such as fonts and styles for themes.
31
+ - **[`state-persistence/`](src/state-persistence/README.md)**: Classes related to saving and restoring grid state.
32
+ - **[`tooltips/`](src/tooltips/README.md)**: Tooltip for errors that happen while syncing data with server after inline editing.
33
+ - **[`utils/`](src/utils/README.md)**: Utility functions.
34
+
35
+ ## Getting Started
36
+
37
+ ### Installation
5
38
 
6
39
  To enable this module in your application, follow the steps below.
7
40
 
@@ -9,21 +42,223 @@ To enable this module in your application, follow the steps below.
9
42
 
10
43
  ```json
11
44
  {
12
- ...
13
45
  "dependencies": {
14
- ...
15
46
  "@genesislcap/grid-pro": "latest"
16
- ...
17
47
  },
18
- ...
19
48
  }
20
49
  ```
21
50
 
22
- ## [API Docs](./docs/api/index.md)
51
+ ### Setup
52
+
53
+ Make sure the required grid components are registered with your design system.
54
+ Depending on how the app was created this might have been setup for you automatically (genx cli / create).
55
+ The design system name might vary (you can create a custom one for your app), using rapid in this example.
56
+
57
+ ```typescript
58
+ import { provideDesignSystem, baseComponents } from '@genesislcap/rapid-design-system';
59
+ import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
60
+
61
+ provideDesignSystem().register(baseComponents, rapidGridComponents);
62
+ ```
63
+
64
+ ### Attributes
65
+
66
+ There are many attributes that can be set on a datasource component.
67
+
68
+ #### Resource Attributes
69
+ Some **resource** related attributes are `DATASERVER` or `REQUEST_SERVER` specific while others can be used with both.
70
+
71
+ ##### Attributes that are common between DATASERVER and REQUEST_SERVER
72
+ |Name|Type|Default|Description|
73
+ |----|----|-------|-----------|
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`. |
75
+ | `is-snapshot` | `boolean` | `false` | Request a snapshot from the server. |
76
+ | `criteria` |`string`| - |Clients can send a Groovy expression to perform filters on the query server; these remain active for the life of the subscription.|
77
+ | `max-rows` | `number` | - | Maximum number of rows to be returned as part of the initial message, and as part of any additional MORE_ROWS messages. **This will not affect the number of rows displayed**|
78
+ | `view-number` | `number` | - | The desired view/page you want data from. |
79
+
80
+ ##### DATASERVER only attributes
81
+ |Name|Type|Default|Description|
82
+ |----|----|-------|-----------|
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. |
84
+ | `max-view` | `number` | - | Maximum number of rows to track as part of a client "view" |
85
+ | `moving-view` | `boolean` | `false` | If true, when the maximum number of rows defined in `max-view` is reached, the Data Server will start discarding the oldest rows (in terms of timestamp) and sending newer rows. If false, the updates in the server will be sent to the front end regardless of order. Note that this will only update the UI; no changes will be performed in the database.|
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).|
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.|
88
+
89
+
90
+ ##### REQUEST_SERVER only attributes
91
+ |Name|Type|Default|Description|
92
+ |----|----|-------|-----------|
93
+ | `disable-polling` | `boolean` | `false` | This option disables polling if set to true (data updates for the grid will not be fetched automatically).|
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. |
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.|
96
+
97
+ #### Component Attributes
98
+
99
+ There are additional attributes that can affect the behavior of a datasource component.
100
+
101
+ ##### `<grid-pro-client-side-datasource>`
102
+ |Name|Type|Default|Description|
103
+ |----|----|-------|-----------|
104
+ | `restart-on-reconnection` | `boolean` | `false` | This option, if set to true, will force the resource data to be reloaded upon a reconnection event.|
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. |
106
+
107
+ ##### `<grid-pro-server-side-datasource>`
108
+ |Name|Type|Default|Description|
109
+ |----|----|-------|-----------|
110
+ | `pagination` | `boolean` | `false` | This option enables pagination if set to true, otherwise the behavior will be infinite-scroll.|
111
+
112
+ More details about our datasource implementations [here](src/datasource/README.md).
113
+
114
+ ### Usage (simple data example)
115
+
116
+ ```typescript
117
+ import { ColDef, GridOptions } from '@ag-grid-community/core';
118
+ import { GridPro } from '@genesislcap/grid-pro';
119
+ import { customElement, DOM, GenesisElement, html, observable, ref } from '@genesislcap/web-core';
120
+
121
+ @customElement({
122
+ name: 'simple-grid-example',
123
+ template: html`
124
+ <rapid-grid-pro ${ref('grid')}></rapid-grid-pro>
125
+ `,
126
+ })
127
+ export class SimpleGridExample extends GenesisElement {
128
+ @observable
129
+ public grid: GridPro;
130
+
131
+ private columnDefs: ColDef[] = [
132
+ { headerName: '#', colId: 'rowNum', valueGetter: 'node.id', width: 80, pinned: 'left' },
133
+ { headerName: 'Athlete', field: 'athlete', width: 150, pinned: 'left' },
134
+ { headerName: 'Age', field: 'age', width: 90, pinned: 'left' },
135
+ { headerName: 'Country', field: 'country', width: 150 },
136
+ { headerName: 'Year', field: 'year', width: 90 },
137
+ {
138
+ headerName: 'Date',
139
+ field: 'date',
140
+ width: 110,
141
+ filter: 'agDateColumnFilter',
142
+ filterParams: {
143
+ buttons: ['apply', 'reset'],
144
+ browserDatePicker: true,
145
+ comparator: (filterLocalDateAtMidnight, cellValue) => {
146
+ // Handling '29/08/2004' date format - adjust as need to match your date format
147
+ // https://www.ag-grid.com/javascript-data-grid/filter-date/
148
+ const dateAsString = cellValue;
149
+ if (dateAsString == null) return -1;
150
+ const dateParts = dateAsString.split('/');
151
+ const cellDate = new Date(
152
+ Number(dateParts[2]),
153
+ Number(dateParts[1]) - 1,
154
+ Number(dateParts[0]),
155
+ );
156
+ if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
157
+ return 0;
158
+ }
159
+ if (cellDate < filterLocalDateAtMidnight) {
160
+ return -1;
161
+ }
162
+ if (cellDate > filterLocalDateAtMidnight) {
163
+ return 1;
164
+ }
165
+ return 0;
166
+ },
167
+ },
168
+ },
169
+ { headerName: 'Sport', field: 'sport', width: 150, editable: true },
170
+ { headerName: 'Gold', field: 'gold', width: 100 },
171
+ { headerName: 'Silver', field: 'silver', width: 100 },
172
+ { headerName: 'Bronze', field: 'bronze', width: 100 },
173
+ { headerName: 'Total', field: 'total', width: 100, pinned: 'right' },
174
+ ];
175
+
176
+ private rowData = [
177
+ {
178
+ athlete: 'Michael Phelps',
179
+ age: 27,
180
+ country: 'United States',
181
+ year: 2012,
182
+ date: '12/08/2012',
183
+ sport: 'Swimming',
184
+ gold: 4,
185
+ silver: 2,
186
+ bronze: 0,
187
+ total: 6,
188
+ },
189
+ {
190
+ athlete: 'Natalie Coughlin',
191
+ age: 25,
192
+ country: 'United States',
193
+ year: 2008,
194
+ date: '24/08/2008',
195
+ sport: 'Swimming',
196
+ gold: 1,
197
+ silver: 2,
198
+ bronze: 3,
199
+ total: 6,
200
+ isActionDisabled: true,
201
+ },
202
+ // ...
203
+ ];
204
+
205
+ private gridOptions: GridOptions = {
206
+ defaultColDef: {
207
+ resizable: true,
208
+ filter: true,
209
+ },
210
+ columnDefs: this.columnDefs,
211
+ rowData: this.rowData,
212
+ };
213
+
214
+ connectedCallback() {
215
+ super.connectedCallback();
216
+ DOM.queueUpdate(() => {
217
+ this.grid.gridOptions = this.gridOptions;
218
+ });
219
+ }
220
+ }
221
+ ```
222
+
223
+ ### Usage - connected data example (client-side row model)
224
+
225
+ ```typescript
226
+ @customElement({
227
+ name: 'connected-grid-client-side-example',
228
+ template: html`
229
+ <rapid-grid-pro enable-row-flashing enable-cell-flashing>
230
+ <grid-pro-client-side-datasource
231
+ resource-name="ALL_TRADES"
232
+ criteria="INSTRUMENT_ID == 'TSLA'"
233
+ ></grid-pro-client-side-datasource>
234
+ </rapid-grid-pro>
235
+ `,
236
+ })
237
+ export class ConnectedGridClientSideExample extends GenesisElement {}
238
+ ```
239
+
240
+ ### Usage - connected data example (server-side row model)
241
+
242
+ Note: if pagination is set to false the grid will be in infinite scroll mode.
243
+
244
+ ```typescript
245
+ @customElement({
246
+ name: 'connected-grid-server-side-example',
247
+ template: html`
248
+ <rapid-grid-pro enable-row-flashing enable-cell-flashing>
249
+ <grid-pro-server-side-datasource
250
+ resource-name="ALL_TRADES"
251
+ criteria="INSTRUMENT_ID == 'TSLA'"
252
+ ></grid-pro-server-side-datasource>
253
+ </rapid-grid-pro>
254
+ `,
255
+ })
256
+ export class ConnectedGridServerSideExample extends GenesisElement {}
257
+ ```
23
258
 
24
259
  ## License
25
260
 
26
261
  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.
27
262
 
28
263
  ### Licensed components
29
- Genesis low-code platform
264
+ Genesis low-code platform
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/grid-pro",
3
3
  "description": "Genesis Foundation AG Grid",
4
- "version": "14.198.0",
4
+ "version": "14.198.1-alpha-09f65e3.0",
5
5
  "sideEffects": false,
6
6
  "license": "SEE LICENSE IN license.txt",
7
7
  "main": "dist/esm/index.js",
@@ -38,20 +38,20 @@
38
38
  }
39
39
  },
40
40
  "devDependencies": {
41
- "@genesislcap/foundation-testing": "14.198.0",
42
- "@genesislcap/genx": "14.198.0",
43
- "@genesislcap/rollup-builder": "14.198.0",
44
- "@genesislcap/ts-builder": "14.198.0",
45
- "@genesislcap/uvu-playwright-builder": "14.198.0",
46
- "@genesislcap/vite-builder": "14.198.0",
47
- "@genesislcap/webpack-builder": "14.198.0",
41
+ "@genesislcap/foundation-testing": "14.198.1-alpha-09f65e3.0",
42
+ "@genesislcap/genx": "14.198.1-alpha-09f65e3.0",
43
+ "@genesislcap/rollup-builder": "14.198.1-alpha-09f65e3.0",
44
+ "@genesislcap/ts-builder": "14.198.1-alpha-09f65e3.0",
45
+ "@genesislcap/uvu-playwright-builder": "14.198.1-alpha-09f65e3.0",
46
+ "@genesislcap/vite-builder": "14.198.1-alpha-09f65e3.0",
47
+ "@genesislcap/webpack-builder": "14.198.1-alpha-09f65e3.0",
48
48
  "rimraf": "^5.0.0"
49
49
  },
50
50
  "dependencies": {
51
- "@genesislcap/foundation-comms": "14.198.0",
52
- "@genesislcap/foundation-logger": "14.198.0",
53
- "@genesislcap/foundation-ui": "14.198.0",
54
- "@genesislcap/foundation-utils": "14.198.0",
51
+ "@genesislcap/foundation-comms": "14.198.1-alpha-09f65e3.0",
52
+ "@genesislcap/foundation-logger": "14.198.1-alpha-09f65e3.0",
53
+ "@genesislcap/foundation-ui": "14.198.1-alpha-09f65e3.0",
54
+ "@genesislcap/foundation-utils": "14.198.1-alpha-09f65e3.0",
55
55
  "@microsoft/fast-colors": "^5.3.1",
56
56
  "@microsoft/fast-components": "^2.30.6",
57
57
  "@microsoft/fast-element": "^1.12.0",
@@ -77,5 +77,5 @@
77
77
  "access": "public"
78
78
  },
79
79
  "customElements": "dist/custom-elements.json",
80
- "gitHead": "8d2006b1960c1d59640357a6cf0f42341b13cb00"
80
+ "gitHead": "aa5d6677211a03c7cb0b4c66f0604465d6c6f688"
81
81
  }