Merge branch 'master' of https://github.com/highcharts/highcharts

Author: TorsteinHonsi

css/datagrid/datagrid.css

@@ -28,7 +28,9 @@ Some API options have been renamed or removed. For the full list, make sure to c
     },
     columnDefaults: {
         cells: {
-            editable: true,
+            editMode: {
+                enabled: true
+            },
             events: {
                 afterEdit: function () {
                     // Callback action

docs/dashboards/grid-migration.md

@@ -0,0 +1,134 @@
+---
+tags: ["grid-pro"]
+---
+
+# Cell content
+
+The data type determines how the cell content is rendered.
+
+Note: Customizing cell content is not part of Highcharts Grid Lite, so refer to [install instructions](https://www.highcharts.com/docs/dashboards/grid-standalone) for the full version to enable this functionality.
+
+Highcharts Grid supports different cell renderers to provide interactive data presentation inside table cells. You can define the renderer property for each column in the `columns[].cells` configuration object to specify how each cell should be displayed or interacted with.
+
+Renderers can be used to control how values are displayed `cells.renderer` and how they behave in [edit mode](https://www.highcharts.com/docs/grid/cell-editing) `cells.editMode.renderer`. This allows you to, for example, show plain text by default and present a checkbox or input field when a cell becomes editable.
+
+## Renderers types
+
+In the [renderer](https://api.highcharts.com/grid/#interfaces/Grid_Core_Options.ColumnOptions#renderer) API option, you can set the default cell renderer for view and edit modes. If not specified, it is determined by the `dataType` option.
+
+Some renderers can be used specifically as cell edit mode renderers, which is recommended because they also support [validation](https://www.highcharts.com/docs/grid/cell-editing#validation) in such cases.
+For example, you can render a date as text in view mode, and use the `dateInput` renderer only when the cell is in edit mode.
+
+| Renderer Key | Description | Edit Mode |
+|---|---|---|
+| [`checkbox`](https://api.highcharts.com/grid/#classes/Grid_Pro_CellRendering_Renderers_CheckboxRenderer.CheckboxRenderer-1) | Checkbox input element | ✅ |
+| [`dateInput`](https://api.highcharts.com/grid/#classes/Grid_Pro_CellRendering_Renderers_DateInputRenderer.DateInputRenderer-1) | Date input element | ✅ |
+| [`select`](https://api.highcharts.com/grid/#classes/Grid_Pro_CellRendering_Renderers_SelectRenderer.SelectRenderer-1) | Select element | ✅ |
+| [`sparkline`](https://api.highcharts.com/grid/#classes/Grid_Pro_CellRendering_Renderers_SparklineRenderer.SparklineRenderer-1) | Highcharts minified chart | ❌ |
+| [`text`](https://api.highcharts.com/grid/#classes/Grid_Pro_CellRendering_Renderers_TextRenderer.TextRenderer-1) | Text or custom static html content, default for most data types | ❌ |
+| [`textInput`](https://api.highcharts.com/grid/#classes/Grid_Pro_CellRendering_Renderers_TextInputRenderer.TextInputRenderer-1) | Text input element | ✅ |
+
+### Text input
+Renders an editable text field for the value. It can also render static HTML elements. This is the default renderer for most cases.
+
+```js
+{
+  id: 'username', // column id
+  dataType: 'string',
+  cells: {
+    renderer: {
+      type: 'input'
+    },
+    editable: true
+  }
+}
+```
+
+### Checkbox input
+Renders a native checkbox input element.
+
+```js
+{
+  id: 'active', // column id
+  dataType: 'boolean',
+  cells: {
+    renderer: {
+      type: 'checkbox'
+    }
+  }
+}
+```
+
+### Date input
+Renders a native date input that supports HTML datepicker.
+
+```js
+{
+  id: 'date_date', // column id
+  dataType: 'datetime',
+  cells: {
+    renderer: {
+        type: 'dateInput'
+    }
+  }
+}
+```
+
+### Select
+Renders a dropdown select menu for predefined options.
+
+```js
+{
+  id: 'country', // column id
+  dataType: 'string',
+  cells: {
+    renderer: {
+      type: 'select',
+      options: [
+        { value: 'NO', label: 'Norway' },
+        { value: 'NL', label: 'Netherlands' },
+        { value: 'PL', label: 'Poland' },
+        { value: 'EC', label: 'Ecuador' }
+      ]
+    }
+  }
+}
+```
+
+### Sparkline
+Renders an inline miniature chart (e.g. bar, line) inside a cell using Highcharts.
+
+You can configure chart by the `chartOptions` API option, that supports all Highcharts configurations.
+
+```js
+{
+  id: 'trend', // column id
+  cells: {
+    renderer: {
+      type: 'sparkline',
+      chartOptions: {
+        chart: {
+          type: 'bar'
+        },
+        plotOptions: {
+          series: {
+            dataLabels: {
+              enabled: true
+            },
+            negativeColor: "#f00"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+Please note that you should include the `highcharts.js` file before including the Grid library. If you do it the other way around, or use ES Modules, you should connect Highcharts manually using: `Grid.CellRendererRegistry.types.sparkline.useHighcharts(Highcharts);`
+
+Go to [Sparkline](https://www.highcharts.com/docs/grid/sparkline) to read more about Grid Sparkline structure and configuration options.
+
+
+
+## View the Result
+

docs/grid/cell-content.md

@@ -6,42 +6,147 @@ tags: ["grid-pro"]
 
 Note: cell editing is not part of Highcharts Grid Lite, so refer to [install instructions](https://www.highcharts.com/docs/dashboards/grid-standalone) for the full version to enable this functionality.
 
-End users can edit data in cells if cell editing is enabled by setting the `columnDefaults.cells.editable` and/or `columns[].cells.editable` API options:
+End users can edit data in cells if cell edit mode is enabled by setting the `columnDefaults.cells.editMode.enabled` and/or `columns[].cells.editMode.enabled` API options:
 
 ```js
 columnDefaults: {
     cells: {
-      editable: true,
-    },
+        editMode: {
+            enabled: true
+        }
+    }
 },
-columns: [
-  {
+columns: [{
     id: "firstName",
     cells: {
-      editable: false,
+        editMode: {
+            enabled: false
+        }
+    }
+}]
+```
+
+In the example above cell editing is enabled for ALL columns, expect the `firstName` column. The reverse can be achived by not setting `columnDefaults` and `columns[].cells.editMode.enabled: true` instead.
+
+
+## Validation
+
+### Predefined Validation Rules
+
+The following validation rules are available out of the box:
+- `notEmpty`
+- `boolean`
+- `number`
+- `datetime`
+
+Each column has a specific `dataType`, which can be set explicitly by the user or inferred from the data. All data types can accept `null` values by default. Each `dataType` comes with its own set of predefined validation rules, for example, columns with the `number` type will automatically reject `NaN` values.
+
+To prevent users from entering `null` or empty string values in any column, add the `notEmpty` validation rule:
+
+```ts
+columns: [{
+    id: 'notEmptyColumn',
+    dataType: 'number',
+    cells: {
+        editMode: {
+            validationRules: ['notEmpty']
+        }
+    }
+}]
+```
+
+### Custom Validation Rules
+
+You can define custom validation rules and error messages directly in the column options:
+
+```ts
+columns: [{
+    id: 'emails',
+    dataType: 'string',
+    cells: {
+        editMode: {
+            validationRules: ['notEmpty', {
+                validator: function({ value }) {
+                    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+                },
+                notification: 'Value must be a valid email address.'
+            }]
+        }
+    }
+}]
+```
+
+Note that a validator is a callback function that receives an object as its first argument. This object represents the cell content and contains two important properties: `value` and `rawValue`. 
+
+- `value`: Returns the parsed value according to the specified `dataType`.
+- `rawValue`: Always returns the original string entered by the user in the input field, regardless of the column's `dataType`.
+
+This distinction allows you to implement validation logic based on either the parsed value or the raw user input, depending on your requirements. For example, you might want to validate the format of the input string (`rawValue`) before parsing, or check the parsed value (`value`) for business logic constraints.
+
+### Registering Custom Validators
+
+You can also register custom validators globally in the `Validator.rulesRegistry` and then reference them by name in your columns:
+
+```ts
+Validator.rulesRegistry['email'] = {
+    validator: function({ value }) {
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
     },
-  },
-],
+    notification: 'Value must be a valid email address.'
+};
+
+columns: [{
+    id: 'emails',
+    dataType: 'string',
+    cells: {
+        editMode: {
+            validationRules: ['notEmpty', 'email']
+        }
+    }
+}]
+```
+
+This approach allows you to reuse custom validation logic across multiple columns.
+
+
+## Edit Mode Renderers
+
+Edit mode renderers define how the cell input is displayed and interacted with when editing is enabled. You can use built-in renderers such as text fields, select dropdowns, or implement custom renderers to match your application's requirements. This allows for flexible editing experiences tailored to different data types and use cases.
+
+You can read more about cell renderers in [this article](https://www.highcharts.com/docs/grid/cell-content).
+
+```ts
+columns: [{
+    id: "role",
+    cells: {
+        editMode: {
+            enabled: true,
+            renderer: {
+                type: 'select',
+                options: [
+                    { value: 'admin', label: 'Administrator' },
+                    { value: 'editor', label: 'Editor' },
+                    { value: 'viewer', label: 'Viewer' }
+                ]
+            }
+        }
+    }
+}]
 ```
 
-In the example above cell editing is enabled for ALL columns, expect the `firstName` column. The reverse can be achived by not setting `columnDefaults` and `columns[].cells.editable: true` instead.
 
 ## The afterEdit event
 
-The `afterEdit` event is called after a cell value is edited, and can be used to e.g. post result to server, generate feedback GUI etc:
+The `afterEdit` event is called after a cell value is edited using the edit mode, and can be used to e.g. post result to server, generate feedback GUI etc:
 
 ```js
 columnDefaults: {
-  cells: {
-    events: {
-      afterEdit: function () {
-        console.log(`${this.column.id} for ${this.row.data.firstName} was updated to ${this.value}`);
-      }
-    }
-  },
+    cells: {
+        events: {
+            afterEdit: function () {
+                console.log(`${this.column.id} for ${this.row.data.firstName} was updated to ${this.value}`);
+            }
+        }
+    },
 }
 ```
-
-## Cell editing roadmap
-
-Cell editing is currently in development, and API support for input validation and different input mechanisms (string, number, boolean etc.) will be released in Q3 2025.

docs/grid/cell-editing.md

@@ -58,22 +58,22 @@ You can exclude the column, including its header, from the Grid by setting `enab
 
 ```js
 {
-  columns: [
-    {
-      id: "price",
-      cells: {
-        className: "custom_cell_class",
-        format: "${value}",
-        editable: true
+  columns: [{
+    id: "price",
+    cells: {
+      className: "custom_cell_class",
+      format: "${value}",
+      editMode: {
+        enabled: true
       }
     }
-  ]
+  }]
 }
 ```
 
 The `columns[].cells` option can configure the cells in individual columns. If needed, you can set defaults for all columns in `columnDefaults.cells`.
 
-The end user can edit each cell in a column directly by setting the `editable` option to true. Read more in the [Cell editing](https://www.highcharts.com/docs/grid/cell-editing) article.
+The end user can edit each cell in a column directly by setting the `editMode.enabled` option to true. Read more in the [Cell editing](https://www.highcharts.com/docs/grid/cell-editing) article.
 
 Note that `className` and `format` support templating as described in [Templating](https://www.highcharts.com/docs/chart-concepts/templating), and `{value}` references the cell value.
 
@@ -242,3 +242,15 @@ columns: [
     }
     ...
 ]
+```
+
+## Data type
+
+The [dataType](https://api.highcharts.com/dashboards/#interfaces/Grid_Options.ColumnOptions#dataType) specifies the type of the column (`string`, `number`, `boolean` or `date`).
+The data type determines how the cell content is rendered. For example, setting the type to boolean displays a check or cross symbol based on the value.
+
+If this property is not defined, the data type is automatically inferred from the first cell in the column.
+
+<iframe src="https://www.highcharts.com/samples/embed/grid/basic/column-data-type" allow="fullscreen"></iframe>
+
+For more details on customizing cell content, refer to the [cell content section](https://www.highcharts.com/docs/grid/cell-content).