@bryntum/grid-trial 1.0.0 → 7.1.2

package/README.md

@@ -1,11 +1,294 @@
-# @bryntum/grid-trial package
+<p align="center">
+  <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>
+</p>
 
-**@bryntum/grid-trial** is a part of the private Bryntum registry and is **NOT INTENDED** to be installed from the public https://registry.npmjs.org registry.
+# Bryntum Grid (Trial)
 
-Please refer to the [Bryntum npm installation guide](https://bryntum.com/products/grid/docs/guide/Grid/npm-repository) for information on configuring **npm** for Bryntum package installation.  
+Bryntum Grid is a high-performance JavaScript data grid component. It integrates smoothly with React, Vue, Angular, or plain vanilla JS.
+
+For more information about Bryntum Grid, visit the [Bryntum Grid site](https://bryntum.com/products/grid/)
+
+<p align="center">
+    <img src="https://bryntum.com/products/grid/examples/meta/thumb.2048.png" alt="Bryntum Grid Screenshot" width="600">
+</p>
+
+## Highlights
+
+* Virtual rendering with [infinite scroll](https://bryntum.com/products/grid/examples/infinite-scroll) handles millions of rows
+* [Excel-like cell editing](https://bryntum.com/products/grid/examples/celledit) with inline validation and keyboard shortcuts
+* [Tree grids](https://bryntum.com/products/grid/examples/tree) and [nested views](https://bryntum.com/products/grid/examples/master-detail) for hierarchical data
+* [Advanced filtering](https://bryntum.com/products/grid/examples/facet-filter) and [instant search](https://bryntum.com/products/grid/examples/search) across massive datasets
+* [Custom cell renderers](https://bryntum.com/products/grid/examples/renderers) for charts, progress bars, and rich HTML
+* [Row grouping](https://bryntum.com/products/grid/examples/grouping) with [aggregation and summaries](https://bryntum.com/products/grid/examples/groupsummary)
+* [AI content generation](https://bryntum.com/products/grid/examples/ai-review-grid) using cell formulas
+* [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
+* WCAG 2.1 [accessible](https://bryntum.com/products/grid/examples/basic), [30+ locales](https://bryntum.com/products/grid/examples/localization), TypeScript definitions included
+* [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
+* [Export to Excel](https://bryntum.com/products/grid/examples/exporttoexcel) and [PDF](https://bryntum.com/products/grid/examples/export) with professional formatting
+* Touch-friendly and [responsive layouts](https://bryntum.com/products/grid/examples/responsive) optimized for mobile devices
+
+## Package Contents
+
+| Path                                  | Description                                    |
+|---------------------------------------|------------------------------------------------|
+| `fonts/`                              | Poppins, Montserrat, and RobotoFlex fonts      |
+| `fontawesome/`                        | FontAwesome icons and webfonts                 |
+| `locales/`                            | Localization files for 30+ languages           |
+| `grid.module.js`, `grid.umd.js` | JavaScript bundles (ES module and UMD formats) |
+| `grid.css`                         | Structural CSS (required)                      |
+| `*.d.ts`                              | TypeScript type definitions                    |
+| `*.css`                               | Theme stylesheets                              |
+
+**Note:** Trial packages do not include minified bundles, source maps, or source files.
+
+## Supported Versions
+
+* [NodeJS](https://nodejs.org/en): `>= 20.0.0`
+* [TypeScript](https://www.typescriptlang.org/): `>= 3.6.0`
+* [Angular](https://angularjs.org/): `>= 9.0.0`
+* [React](https://react.dev/): `>= 16.0.0`
+* [Vue](https://vuejs.org/): `>= 3.0.0`
+* [Ionic](https://ionicframework.com/): `>= 5.0.0`
+* [Vite](https://vite.dev/): `>= 4.0.0`
+* [Webpack](https://webpack.js.org/): `>= 4.0.0`
+
+## Try Bryntum Online Demos
+
+Explore our comprehensive collection of demos:
+
+* [View Online Demos](https://bryntum.com/products/grid/examples/)
+* [JavaScript Demos](https://bryntum.com/products/grid/examples/?framework=javascript)
+* [React Demos](https://bryntum.com/products/grid/examples/?framework=react)
+* [Vue Demos](https://bryntum.com/products/grid/examples/?framework=vue)
+* [Angular Demos](https://bryntum.com/products/grid/examples/?framework=angular)
+
+## Installation
+
+This is a **trial package** with limited functionality.
+
+### Why Use npm Aliasing?
+
+Trial packages use npm aliasing to install `@bryntum/grid-trial` under the `@bryntum/grid` name. This approach
+provides a seamless upgrade path - when you purchase a license, you only need to update the alias in `package.json`
+without changing any application code.
+
+Install using `npm`:
+
+```shell
+npm install @bryntum/grid@npm:@bryntum/grid-trial@latest
+```
+
+Or using `yarn`:
+
+```shell
+yarn add @bryntum/grid@npm:@bryntum/grid-trial@latest
+```
+
+Alternatively, add to `package.json` dependencies:
+
+```json
+"dependencies": {
+  "@bryntum/grid": "npm:@bryntum/grid-trial@latest"
+}
+```
+
+Visit our [npm repository guide](https://bryntum.com/products/grid/docs/guide/Grid/npm-repository) to learn more about installation and migrating from
+trial to licensed packages.
+
+## Quick Start
+
+### Vanilla JavaScript
+
+```javascript
+import { Grid } from '@bryntum/grid';
+import './style.css';
+
+const grid = new Grid({
+    appendTo : 'app',
+    columns : [
+        {
+            text   : 'Name',
+            field  : 'name',
+            flex   : 1,
+            editor : {
+                type     : 'textfield',
+                required : true
+            }
+        }, {
+            text  : 'Age',
+            field : 'age',
+            width : 100,
+            type  : 'number'
+        }, {
+            text  : 'City',
+            field : 'city',
+            flex  : 1
+        }, {
+            text  : 'Food',
+            field : 'food',
+            flex  : 1
+        }, {
+            text     : 'Color',
+            field    : 'color',
+            width    : 80,
+            type     : 'color',
+            renderer : ({ cellElement, value }) => {
+                cellElement.style.color = value;
+                cellElement.style.fontWeight = '700';
+                return value;
+            }
+        }
+    ],
+
+    data : [
+        { id : 1, name : 'Don A Taylor', age : 30, city : 'Moscow', food : 'Salad', color : 'Black' },
+        { id : 2, name : 'John B Adams', age : 65, city : 'Paris', food : 'Bolognese', color : 'Orange' },
+        { id : 3, name : 'John Doe', age : 40, city : 'London', food : 'Fish and Chips', color : 'Blue' },
+        { id : 4, name : 'Maria Garcia', age : 28, city : 'Madrid', food : 'Paella', color : 'Green' },
+        { id : 5, name : 'Li Wei', age : 35, city : 'Beijing', food : 'Dumplings', color : 'Yellow' },
+        { id : 6, name : 'Sara Johnson', age : 32, city : 'Sydney', food : 'Sushi', color : 'Purple' },
+        { id : 7, name : 'Lucas Brown', age : 22, city : 'Toronto', food : 'Poutine', color : 'Orange' },
+        { id : 8, name : 'Emma Wilson', age : 27, city : 'Paris', food : 'Croissant', color : 'Pink' },
+        { id : 9, name : 'Ivan Petrov', age : 45, city : 'St. Petersburg', food : 'Borscht', color : 'Grey' },
+        { id : 10, name : 'Zhang Ming', age : 50, city : 'Shanghai', food : 'Hot Pot', color : 'Purple' },
+        { id : 11, name : 'Sophia Martinez', age : 20, city : 'Mexico City', food : 'Tacos', color : 'Crimson' },
+        { id : 12, name : 'Noah Smith', age : 55, city : 'Cape Town', food : 'Biltong', color : 'Turquoise' },
+        { id : 13, name : 'Isabella Jones', age : 33, city : 'Rio de Janeiro', food : 'Feijoada', color : 'Magenta' },
+        { id : 14, name : 'Ethan Taylor', age : 29, city : 'Chicago', food : 'Deep-Dish Pizza', color : 'Cyan' },
+        { id : 15, name : 'Olivia Brown', age : 37, city : 'Berlin', food : 'Schnitzel', color : 'Maroon' },
+        { id : 16, name : 'Mia Wilson', age : 26, city : 'Rome', food : 'Pasta', color : 'Olive' },
+        { id : 17, name : 'Jacob Miller', age : 60, city : 'Amsterdam', food : 'Stroopwafel', color : 'Lime' },
+        { id : 18, name : 'Chloe Davis', age : 23, city : 'Los Angeles', food : 'Burger', color : 'Teal' },
+        { id : 19, name : 'Aiden Martinez', age : 48, city : 'Buenos Aires', food : 'Asado', color : 'Violet' },
+        { id : 20, name : 'Liam Lee', age : 38, city : 'Seoul', food : 'Kimchi', color : 'Indigo' },
+        { id : 21, name : 'Sophie Kim', age : 21, city : 'Tokyo', food : 'Ramen', color : 'Pink' },
+        { id : 22, name : 'Alexander Nguyen', age : 41, city : 'Hanoi', food : 'Pho', color : 'Coral' },
+        { id : 23, name : 'Ella Patel', age : 19, city : 'Mumbai', food : 'Curry', color : 'Amber' },
+        { id : 24, name : 'James O Connor', age : 34, city : 'Dublin', food : 'Irish Stew', color : 'Green' },
+        { id : 25, name : 'Isabelle Chen', age : 31, city : 'Hong Kong', food : 'Dim Sum', color : 'Brown' }
+    ]
+
+});
+```
+
+In the `style.css`:
+
+```css
+/* FontAwesome is used for icons */
+@import "@bryntum/grid/fontawesome/css/fontawesome.css";
+@import "@bryntum/grid/fontawesome/css/solid.css";
+/* Structural CSS */
+@import "@bryntum/grid/grid.css";
+/* Bryntum theme of your choice */
+@import "@bryntum/grid/svalbard-light.css";
+```
+
+Visit our JavaScript [Quick Start guide](https://bryntum.com/products/grid/docs/guide/Grid/quick-start/javascript-npm) to learn more.
+
+## Themes
+
+### Svalbard (default)
+
+| Light                                                                                      | Dark                                                                                     |
+|--------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------|
+| <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> |
+
+### Stockholm
+
+| Light                                                                                        | Dark                                                                                       |
+|----------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------|
+| <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> |
+
+### Visby
+
+| Light                                                                                | Dark                                                                               |
+|--------------------------------------------------------------------------------------|------------------------------------------------------------------------------------|
+| <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> |
+
+### Material 3
+
+| Light                                                                                         | Dark                                                                                        |
+|-----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------|
+| <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> |
+
+### High Contrast
+
+| Light                                                                                                | Dark                                                                                               |
+|------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|
+| <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> |
+
+### Fluent 2
+
+| Light                                                                                     | Dark                                                                                    |
+|-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------|
+| <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> |
+
+For more information on customizing themes, see the [Styling guide](https://bryntum.com/products/grid/docs/guide/Grid/customization/styling).
+
+## Framework Integrations
+
+Bryntum Grid provides first-class wrappers for popular frameworks. Each wrapper follows native framework patterns
+and lifecycle management.
+
+**Note:** The framework wrappers are public and can be installed normally. They require the core package to be present.
+
+### React
+
+```shell
+npm install @bryntum/grid-react@latest
+```
+
+Visit our [React Quick Start guide](https://bryntum.com/products/grid/docs/guide/Grid/quick-start/react) to learn more.
+
+### Angular
+
+```shell
+npm install @bryntum/grid-angular@latest
+```
+
+Visit our [Angular Quick Start guide](https://bryntum.com/products/grid/docs/guide/Grid/quick-start/angular) to learn more.
+
+### Vue 3
+
+```shell
+npm install @bryntum/grid-vue-3@latest
+```
+
+Visit our [Vue Quick Start guide](https://bryntum.com/products/grid/docs/guide/Grid/quick-start/vue-3) to learn more.
+
+## Explore All Bryntum Products
+
+* [Bryntum Grid](https://bryntum.com/products/grid/) - High-performance data grid
+* [Bryntum Scheduler](https://bryntum.com/products/scheduler/) - Resource scheduling component
+* [Bryntum Scheduler Pro](https://bryntum.com/products/schedulerpro/) - Advanced scheduling with dependencies
+* [Bryntum Gantt](https://bryntum.com/products/gantt/) - Project planning and management
+* [Bryntum Calendar](https://bryntum.com/products/calendar/) - Full-featured calendar component
+* [Bryntum TaskBoard](https://bryntum.com/products/taskboard/) - Kanban-style task management
+
+Explore our comprehensive collection of demos:
+
+| 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 |
+|-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
+| **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)          |
+| **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)     |
+| **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) |
+| **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)         |
+| **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)      |
+| **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)     |
 
 ## Online references
 
-* Read [Online Documentation](https://bryntum.com/products/grid/docs/)
-* Post your questions to [Bryntum Support Forum](https://forum.bryntum.com/)
+* [Bryntum Grid documentation](https://bryntum.com/products/grid/docs/)
+* [Bryntum Grid examples](https://bryntum.com/products/grid/examples/)
+
+* [Bryntum Support Forum](https://forum.bryntum.com/)
 * [Contact us](https://bryntum.com/contact/)
+
+## License and copyright
+
+Bryntum Grid is commercial software and requires a paid license.
+Please visit the [Bryntum Grid End User License](https://bryntum.com/products/grid/license/) for the full text of the license.
+
+Copyright © 2009-2026, Bryntum
+All rights reserved.
+