@bryntum/grid-trial 7.1.1 → 7.1.2

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 (26) hide show
  1. package/README.md +265 -19
  2. package/fluent2-dark.css +1 -1
  3. package/fluent2-light.css +1 -1
  4. package/grid.css +2 -2
  5. package/grid.d.ts +125 -48
  6. package/grid.lwc.module.d.ts +1 -1
  7. package/grid.lwc.module.js +2 -2
  8. package/grid.module.d.ts +1 -1
  9. package/grid.module.js +44 -44
  10. package/grid.thin.d.ts +59 -37
  11. package/grid.umd.d.ts +1 -1
  12. package/grid.umd.js +46 -46
  13. package/grid.wc.module.d.ts +1 -1
  14. package/grid.wc.module.js +44 -44
  15. package/high-contrast-dark.css +1 -1
  16. package/high-contrast-light.css +1 -1
  17. package/material3-dark.css +1 -1
  18. package/material3-light.css +1 -1
  19. package/package.json +2 -2
  20. package/postinstall.js +4 -4
  21. package/stockholm-dark.css +1 -1
  22. package/stockholm-light.css +1 -1
  23. package/svalbard-dark.css +1 -1
  24. package/svalbard-light.css +1 -1
  25. package/visby-dark.css +1 -1
  26. package/visby-light.css +1 -1
package/README.md CHANGED
@@ -1,48 +1,294 @@
1
- # Bryntum Grid Trial
1
+ <p align="center">
2
+ <a href="https://bryntum.com/" rel="noopener" target="_blank"><img width="200" src="https://bryntum.com/resources/bryntum_logo_blue.svg" alt="Bryntum logo"></a>
3
+ </p>
2
4
 
3
- Bryntum Grid is a high performance JavaScript data grid component.
4
- It integrates seamlessly with React, Vue, Angular, or plain vanilla JS.
5
+ # Bryntum Grid (Trial)
5
6
 
6
- For more information about all features, visit the [Bryntum Grid site](https://bryntum.com/products/grid/).
7
+ Bryntum Grid is a high-performance JavaScript data grid component. It integrates smoothly with React, Vue, Angular, or plain vanilla JS.
7
8
 
8
- # Bryntum repository access setup
9
+ For more information about Bryntum Grid, visit the [Bryntum Grid site](https://bryntum.com/products/grid/)
9
10
 
10
- This npm package requires access to the private Bryntum npm repository.
11
- You must be logged in to this repository as a licensed or trial user to access it.
12
- Please check the [Online npm repository guide](https://bryntum.com/products/grid/docs/guide/Grid/npm-repository) for
13
- detailed information on the sign-up/login process.
11
+ <p align="center">
12
+ <img src="https://bryntum.com/products/grid/examples/meta/thumb.2048.png" alt="Bryntum Grid Screenshot" width="600">
13
+ </p>
14
14
 
15
- # Installation
15
+ ## Highlights
16
16
 
17
- The installation is performed by issuing the installation command in the root of the application folder. The specific
18
- command depends on the package manager used by the application.
17
+ * Virtual rendering with [infinite scroll](https://bryntum.com/products/grid/examples/infinite-scroll) handles millions of rows
18
+ * [Excel-like cell editing](https://bryntum.com/products/grid/examples/celledit) with inline validation and keyboard shortcuts
19
+ * [Tree grids](https://bryntum.com/products/grid/examples/tree) and [nested views](https://bryntum.com/products/grid/examples/master-detail) for hierarchical data
20
+ * [Advanced filtering](https://bryntum.com/products/grid/examples/facet-filter) and [instant search](https://bryntum.com/products/grid/examples/search) across massive datasets
21
+ * [Custom cell renderers](https://bryntum.com/products/grid/examples/renderers) for charts, progress bars, and rich HTML
22
+ * [Row grouping](https://bryntum.com/products/grid/examples/grouping) with [aggregation and summaries](https://bryntum.com/products/grid/examples/groupsummary)
23
+ * [AI content generation](https://bryntum.com/products/grid/examples/ai-review-grid) using cell formulas
24
+ * [50+ built-in widgets](https://bryntum.com/products/grid/examples/widgetcolumn) and [6 modern themes](https://bryntum.com/products/grid/examples/themes) with full customization
25
+ * WCAG 2.1 [accessible](https://bryntum.com/products/grid/examples/basic), [30+ locales](https://bryntum.com/products/grid/examples/localization), TypeScript definitions included
26
+ * [React](https://bryntum.com/products/grid/examples/?framework=react), [Vue](https://bryntum.com/products/grid/examples/?framework=vue), and [Angular](https://bryntum.com/products/grid/examples/?framework=angular) wrappers following native framework patterns
27
+ * [Export to Excel](https://bryntum.com/products/grid/examples/exporttoexcel) and [PDF](https://bryntum.com/products/grid/examples/export) with professional formatting
28
+ * Touch-friendly and [responsive layouts](https://bryntum.com/products/grid/examples/responsive) optimized for mobile devices
19
29
 
20
- The following are most frequently used:
30
+ ## Package Contents
31
+
32
+ | Path | Description |
33
+ |---------------------------------------|------------------------------------------------|
34
+ | `fonts/` | Poppins, Montserrat, and RobotoFlex fonts |
35
+ | `fontawesome/` | FontAwesome icons and webfonts |
36
+ | `locales/` | Localization files for 30+ languages |
37
+ | `grid.module.js`, `grid.umd.js` | JavaScript bundles (ES module and UMD formats) |
38
+ | `grid.css` | Structural CSS (required) |
39
+ | `*.d.ts` | TypeScript type definitions |
40
+ | `*.css` | Theme stylesheets |
41
+
42
+ **Note:** Trial packages do not include minified bundles, source maps, or source files.
43
+
44
+ ## Supported Versions
45
+
46
+ * [NodeJS](https://nodejs.org/en): `>= 20.0.0`
47
+ * [TypeScript](https://www.typescriptlang.org/): `>= 3.6.0`
48
+ * [Angular](https://angularjs.org/): `>= 9.0.0`
49
+ * [React](https://react.dev/): `>= 16.0.0`
50
+ * [Vue](https://vuejs.org/): `>= 3.0.0`
51
+ * [Ionic](https://ionicframework.com/): `>= 5.0.0`
52
+ * [Vite](https://vite.dev/): `>= 4.0.0`
53
+ * [Webpack](https://webpack.js.org/): `>= 4.0.0`
54
+
55
+ ## Try Bryntum Online Demos
56
+
57
+ Explore our comprehensive collection of demos:
58
+
59
+ * [View Online Demos](https://bryntum.com/products/grid/examples/)
60
+ * [JavaScript Demos](https://bryntum.com/products/grid/examples/?framework=javascript)
61
+ * [React Demos](https://bryntum.com/products/grid/examples/?framework=react)
62
+ * [Vue Demos](https://bryntum.com/products/grid/examples/?framework=vue)
63
+ * [Angular Demos](https://bryntum.com/products/grid/examples/?framework=angular)
64
+
65
+ ## Installation
66
+
67
+ This is a **trial package** with limited functionality.
68
+
69
+ ### Why Use npm Aliasing?
70
+
71
+ Trial packages use npm aliasing to install `@bryntum/grid-trial` under the `@bryntum/grid` name. This approach
72
+ provides a seamless upgrade path - when you purchase a license, you only need to update the alias in `package.json`
73
+ without changing any application code.
21
74
 
22
75
  Install using `npm`:
23
76
 
24
77
  ```shell
25
- npm install @bryntum/grid@npm:@bryntum/grid-trial@7.1.1
78
+ npm install @bryntum/grid@npm:@bryntum/grid-trial@latest
79
+ ```
80
+
81
+ Or using `yarn`:
82
+
83
+ ```shell
84
+ yarn add @bryntum/grid@npm:@bryntum/grid-trial@latest
85
+ ```
86
+
87
+ Alternatively, add to `package.json` dependencies:
88
+
89
+ ```json
90
+ "dependencies": {
91
+ "@bryntum/grid": "npm:@bryntum/grid-trial@latest"
92
+ }
93
+ ```
94
+
95
+ Visit our [npm repository guide](https://bryntum.com/products/grid/docs/guide/Grid/npm-repository) to learn more about installation and migrating from
96
+ trial to licensed packages.
97
+
98
+ ## Quick Start
99
+
100
+ ### Vanilla JavaScript
101
+
102
+ ```javascript
103
+ import { Grid } from '@bryntum/grid';
104
+ import './style.css';
105
+
106
+ const grid = new Grid({
107
+ appendTo : 'app',
108
+ columns : [
109
+ {
110
+ text : 'Name',
111
+ field : 'name',
112
+ flex : 1,
113
+ editor : {
114
+ type : 'textfield',
115
+ required : true
116
+ }
117
+ }, {
118
+ text : 'Age',
119
+ field : 'age',
120
+ width : 100,
121
+ type : 'number'
122
+ }, {
123
+ text : 'City',
124
+ field : 'city',
125
+ flex : 1
126
+ }, {
127
+ text : 'Food',
128
+ field : 'food',
129
+ flex : 1
130
+ }, {
131
+ text : 'Color',
132
+ field : 'color',
133
+ width : 80,
134
+ type : 'color',
135
+ renderer : ({ cellElement, value }) => {
136
+ cellElement.style.color = value;
137
+ cellElement.style.fontWeight = '700';
138
+ return value;
139
+ }
140
+ }
141
+ ],
142
+
143
+ data : [
144
+ { id : 1, name : 'Don A Taylor', age : 30, city : 'Moscow', food : 'Salad', color : 'Black' },
145
+ { id : 2, name : 'John B Adams', age : 65, city : 'Paris', food : 'Bolognese', color : 'Orange' },
146
+ { id : 3, name : 'John Doe', age : 40, city : 'London', food : 'Fish and Chips', color : 'Blue' },
147
+ { id : 4, name : 'Maria Garcia', age : 28, city : 'Madrid', food : 'Paella', color : 'Green' },
148
+ { id : 5, name : 'Li Wei', age : 35, city : 'Beijing', food : 'Dumplings', color : 'Yellow' },
149
+ { id : 6, name : 'Sara Johnson', age : 32, city : 'Sydney', food : 'Sushi', color : 'Purple' },
150
+ { id : 7, name : 'Lucas Brown', age : 22, city : 'Toronto', food : 'Poutine', color : 'Orange' },
151
+ { id : 8, name : 'Emma Wilson', age : 27, city : 'Paris', food : 'Croissant', color : 'Pink' },
152
+ { id : 9, name : 'Ivan Petrov', age : 45, city : 'St. Petersburg', food : 'Borscht', color : 'Grey' },
153
+ { id : 10, name : 'Zhang Ming', age : 50, city : 'Shanghai', food : 'Hot Pot', color : 'Purple' },
154
+ { id : 11, name : 'Sophia Martinez', age : 20, city : 'Mexico City', food : 'Tacos', color : 'Crimson' },
155
+ { id : 12, name : 'Noah Smith', age : 55, city : 'Cape Town', food : 'Biltong', color : 'Turquoise' },
156
+ { id : 13, name : 'Isabella Jones', age : 33, city : 'Rio de Janeiro', food : 'Feijoada', color : 'Magenta' },
157
+ { id : 14, name : 'Ethan Taylor', age : 29, city : 'Chicago', food : 'Deep-Dish Pizza', color : 'Cyan' },
158
+ { id : 15, name : 'Olivia Brown', age : 37, city : 'Berlin', food : 'Schnitzel', color : 'Maroon' },
159
+ { id : 16, name : 'Mia Wilson', age : 26, city : 'Rome', food : 'Pasta', color : 'Olive' },
160
+ { id : 17, name : 'Jacob Miller', age : 60, city : 'Amsterdam', food : 'Stroopwafel', color : 'Lime' },
161
+ { id : 18, name : 'Chloe Davis', age : 23, city : 'Los Angeles', food : 'Burger', color : 'Teal' },
162
+ { id : 19, name : 'Aiden Martinez', age : 48, city : 'Buenos Aires', food : 'Asado', color : 'Violet' },
163
+ { id : 20, name : 'Liam Lee', age : 38, city : 'Seoul', food : 'Kimchi', color : 'Indigo' },
164
+ { id : 21, name : 'Sophie Kim', age : 21, city : 'Tokyo', food : 'Ramen', color : 'Pink' },
165
+ { id : 22, name : 'Alexander Nguyen', age : 41, city : 'Hanoi', food : 'Pho', color : 'Coral' },
166
+ { id : 23, name : 'Ella Patel', age : 19, city : 'Mumbai', food : 'Curry', color : 'Amber' },
167
+ { id : 24, name : 'James O Connor', age : 34, city : 'Dublin', food : 'Irish Stew', color : 'Green' },
168
+ { id : 25, name : 'Isabelle Chen', age : 31, city : 'Hong Kong', food : 'Dim Sum', color : 'Brown' }
169
+ ]
170
+
171
+ });
172
+ ```
173
+
174
+ In the `style.css`:
175
+
176
+ ```css
177
+ /* FontAwesome is used for icons */
178
+ @import "@bryntum/grid/fontawesome/css/fontawesome.css";
179
+ @import "@bryntum/grid/fontawesome/css/solid.css";
180
+ /* Structural CSS */
181
+ @import "@bryntum/grid/grid.css";
182
+ /* Bryntum theme of your choice */
183
+ @import "@bryntum/grid/svalbard-light.css";
184
+ ```
185
+
186
+ Visit our JavaScript [Quick Start guide](https://bryntum.com/products/grid/docs/guide/Grid/quick-start/javascript-npm) to learn more.
187
+
188
+ ## Themes
189
+
190
+ ### Svalbard (default)
191
+
192
+ | Light | Dark |
193
+ |--------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------|
194
+ | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=svalbard-light"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.svalbard-light.png" alt="Svalbard Light" width="300"></a> | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=svalbard-dark"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.svalbard-dark.png" alt="Svalbard Dark" width="300"></a> |
195
+
196
+ ### Stockholm
197
+
198
+ | Light | Dark |
199
+ |----------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|
200
+ | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=stockholm-light"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.stockholm-light.png" alt="Stockholm Light" width="300"></a> | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=stockholm-dark"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.stockholm-dark.png" alt="Stockholm Dark" width="300"></a> |
201
+
202
+ ### Visby
203
+
204
+ | Light | Dark |
205
+ |--------------------------------------------------------------------------------------|------------------------------------------------------------------------------------|
206
+ | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=visby-light"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.visby-light.png" alt="Visby Light" width="300"></a> | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=visby-dark"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.visby-dark.png" alt="Visby Dark" width="300"></a> |
207
+
208
+ ### Material 3
209
+
210
+ | Light | Dark |
211
+ |-----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------|
212
+ | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=material3-light"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.material3-light.png" alt="Material 3 Light" width="300"></a> | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=material3-dark"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.material3-dark.png" alt="Material 3 Dark" width="300"></a> |
213
+
214
+ ### High Contrast
215
+
216
+ | Light | Dark |
217
+ |------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|
218
+ | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=high-contrast-light"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.high-contrast-light.png" alt="High Contrast Light" width="300"></a> | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=high-contrast-dark"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.high-contrast-dark.png" alt="High Contrast Dark" width="300"></a> |
219
+
220
+ ### Fluent 2
221
+
222
+ | Light | Dark |
223
+ |-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------|
224
+ | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=fluent2-light"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.fluent2-light.png" alt="Fluent 2 Light" width="300"></a> | <a href="https://bryntum.com/products/grid/examples/grouping/?theme=fluent2-dark"><img src="https://bryntum.com/products/grid/docs/data/Grid/images/themes/thumb.fluent2-dark.png" alt="Fluent 2 Dark" width="300"></a> |
225
+
226
+ For more information on customizing themes, see the [Styling guide](https://bryntum.com/products/grid/docs/guide/Grid/customization/styling).
227
+
228
+ ## Framework Integrations
229
+
230
+ Bryntum Grid provides first-class wrappers for popular frameworks. Each wrapper follows native framework patterns
231
+ and lifecycle management.
232
+
233
+ **Note:** The framework wrappers are public and can be installed normally. They require the core package to be present.
234
+
235
+ ### React
236
+
237
+ ```shell
238
+ npm install @bryntum/grid-react@latest
239
+ ```
240
+
241
+ Visit our [React Quick Start guide](https://bryntum.com/products/grid/docs/guide/Grid/quick-start/react) to learn more.
242
+
243
+ ### Angular
244
+
245
+ ```shell
246
+ npm install @bryntum/grid-angular@latest
26
247
  ```
27
248
 
28
- Install using `yarn`:
249
+ Visit our [Angular Quick Start guide](https://bryntum.com/products/grid/docs/guide/Grid/quick-start/angular) to learn more.
250
+
251
+ ### Vue 3
29
252
 
30
253
  ```shell
31
- yarn add @bryntum/grid@npm:@bryntum/grid-trial@7.1.1
254
+ npm install @bryntum/grid-vue-3@latest
32
255
  ```
33
256
 
34
- # Online references
257
+ Visit our [Vue Quick Start guide](https://bryntum.com/products/grid/docs/guide/Grid/quick-start/vue-3) to learn more.
258
+
259
+ ## Explore All Bryntum Products
260
+
261
+ * [Bryntum Grid](https://bryntum.com/products/grid/) - High-performance data grid
262
+ * [Bryntum Scheduler](https://bryntum.com/products/scheduler/) - Resource scheduling component
263
+ * [Bryntum Scheduler Pro](https://bryntum.com/products/schedulerpro/) - Advanced scheduling with dependencies
264
+ * [Bryntum Gantt](https://bryntum.com/products/gantt/) - Project planning and management
265
+ * [Bryntum Calendar](https://bryntum.com/products/calendar/) - Full-featured calendar component
266
+ * [Bryntum TaskBoard](https://bryntum.com/products/taskboard/) - Kanban-style task management
267
+
268
+ Explore our comprehensive collection of demos:
269
+
270
+ | Product | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/js.svg" alt="JavaScript" width="30"><br>JavaScript | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/react.svg" alt="React" width="30"><br>React | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" width="30"><br>Vue | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/angular.svg" alt="Angular" width="30"><br>Angular |
271
+ |-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
272
+ | **Grid** | [Grid JavaScript demos](https://bryntum.com/products/grid/examples/?framework=javascript) | [Grid React demos](https://bryntum.com/products/grid/examples/?framework=react) | [Grid Vue demos](https://bryntum.com/products/grid/examples/?framework=vue) | [Grid Angular demos](https://bryntum.com/products/grid/examples/?framework=angular) |
273
+ | **Scheduler** | [Scheduler JavaScript demos](https://bryntum.com/products/scheduler/examples/?framework=javascript) | [Scheduler React demos](https://bryntum.com/products/scheduler/examples/?framework=react) | [Scheduler Vue demos](https://bryntum.com/products/scheduler/examples/?framework=vue) | [Scheduler Angular demos](https://bryntum.com/products/scheduler/examples/?framework=angular) |
274
+ | **Scheduler Pro** | [Scheduler Pro JavaScript demos](https://bryntum.com/products/schedulerpro/examples/?framework=javascript) | [Scheduler Pro React demos](https://bryntum.com/products/schedulerpro/examples/?framework=react) | [Scheduler Pro Vue demos](https://bryntum.com/products/schedulerpro/examples/?framework=vue) | [Scheduler Pro Angular demos](https://bryntum.com/products/schedulerpro/examples/?framework=angular) |
275
+ | **Gantt** | [Gantt JavaScript demos](https://bryntum.com/products/gantt/examples/?framework=javascript) | [Gantt React demos](https://bryntum.com/products/gantt/examples/?framework=react) | [Gantt Vue demos](https://bryntum.com/products/gantt/examples/?framework=vue) | [Gantt Angular demos](https://bryntum.com/products/gantt/examples/?framework=angular) |
276
+ | **Calendar** | [Calendar JavaScript demos](https://bryntum.com/products/calendar/examples/?framework=javascript) | [Calendar React demos](https://bryntum.com/products/calendar/examples/?framework=react) | [Calendar Vue demos](https://bryntum.com/products/calendar/examples/?framework=vue) | [Calendar Angular demos](https://bryntum.com/products/calendar/examples/?framework=angular) |
277
+ | **TaskBoard** | [TaskBoard JavaScript demos](https://bryntum.com/products/taskboard/examples/?framework=javascript) | [TaskBoard React demos](https://bryntum.com/products/taskboard/examples/?framework=react) | [TaskBoard Vue demos](https://bryntum.com/products/taskboard/examples/?framework=vue) | [TaskBoard Angular demos](https://bryntum.com/products/taskboard/examples/?framework=angular) |
278
+
279
+ ## Online references
35
280
 
36
- * [Bryntum npm repository guide](https://bryntum.com/products/grid/docs/guide/Grid/npm-repository)
37
281
  * [Bryntum Grid documentation](https://bryntum.com/products/grid/docs/)
38
282
  * [Bryntum Grid examples](https://bryntum.com/products/grid/examples/)
283
+
39
284
  * [Bryntum Support Forum](https://forum.bryntum.com/)
40
285
  * [Contact us](https://bryntum.com/contact/)
41
286
 
42
- # License and copyright
287
+ ## License and copyright
43
288
 
44
289
  Bryntum Grid is commercial software and requires a paid license.
45
290
  Please visit the [Bryntum Grid End User License](https://bryntum.com/products/grid/license/) for the full text of the license.
46
291
 
47
292
  Copyright © 2009-2026, Bryntum
48
293
  All rights reserved.
294
+
package/fluent2-dark.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
  /*!
3
3
  *
4
- * Bryntum Grid 7.1.1 (TRIAL VERSION)
4
+ * Bryntum Grid 7.1.2 (TRIAL VERSION)
5
5
  *
6
6
  * Copyright(c) 2026 Bryntum AB
7
7
  * https://bryntum.com/contact
package/fluent2-light.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
  /*!
3
3
  *
4
- * Bryntum Grid 7.1.1 (TRIAL VERSION)
4
+ * Bryntum Grid 7.1.2 (TRIAL VERSION)
5
5
  *
6
6
  * Copyright(c) 2026 Bryntum AB
7
7
  * https://bryntum.com/contact