[update] grid column properties api pages and related guides

Author: mafanya23

docs/grid/api/api_gridcolumn_properties.md

@@ -11,30 +11,31 @@ Click the name of the necessary property to see the details on its usage.
 |  Property                                                             |        Description                                     |
 |---------------------------------------------------------------------- |------------------------------------------------------- |
 | [adjust](grid/api/gridcolumn_properties/gridcolumn_adjust_property.md) | (optional) *false* by default, defines whether the width of a column is automatically adjusted to its content |
-| [align](grid/api/gridcolumn_properties/gridcolumn_align_property.md) | (optional) aligns data in a column: "left"/"center"/ "right", *"left"* by default | 
+| [align](grid/api/gridcolumn_properties/gridcolumn_align_property.md) | (optional) aligns data in a column: *"left"*/*"center"*/*"right"*| 
 | [autoWidth](grid/api/gridcolumn_properties/gridcolumn_autowidth_property.md) | (optional) enables/disables the ability of a column to adjust its size to the size of Grid, *false* by default |
-| [closable](grid/api/gridcolumn_properties/gridcolumn_closable_property.md) | (optional) **PRO version only**, either allows closing a particular element of the [`group`](../../api/grid_group_config/) panel or makes it permanently enabled  |
+| [closable](grid/api/gridcolumn_properties/gridcolumn_closable_property.md) | (optional)  either allows closing a particular element of the [`group`](../../api/grid_group_config/) panel or makes it permanently enabled (**PRO version only**)|
 | [dateFormat](grid/api/gridcolumn_properties/gridcolumn_dateformat_property.md) | (optional) defines the format of dates. The date format must include delimiters (spaces or symbols), otherwise an error will be thrown |
 | [draggable](grid/api/gridcolumn_properties/gridcolumn_draggable_property.md) | (optional) defines whether a column is draggable, *false* by default |
 | [editable](grid/api/gridcolumn_properties/gridcolumn_editable_property.md) | (optional) defines whether a column is editable, *false* by default |
 | [editorConfig](grid/api/gridcolumn_properties/gridcolumn_editorconfig_property.md) | (optional) an object with configuration settings of the column's editor. The structure of this object depends on the specified type of the editor or the column |
-| [editorType](grid/api/gridcolumn_properties/gridcolumn_editortype_property.md) | (optional) the type of an editor used in a column: "input" | "select" | "combobox" | "textarea" | "multiselect" | "datePicker", *"input"* by default |
+| [editorType](grid/api/gridcolumn_properties/gridcolumn_editortype_property.md) | (optional) the type of an editor used in a column: *"input"*/*"select"*/*"combobox"*/*"textarea"*/*"multiselect"*/*"datePicker"* |
 | [footer](grid/api/gridcolumn_properties/gridcolumn_footer_property.md) | (optional) an array of objects with footer rows configuration |
-| [groupable](grid/api/gridcolumn_properties/gridcolumn_groupable_property.md) | (optional) **PRO version only**, enables data grouping by the values of a certain column  |
+|[gravity](grid/api/gridcolumn_properties/gridcolumn_gravity_property.md)| (optional) sets the relative width proportions for Grid columns |
+| [groupable](grid/api/gridcolumn_properties/gridcolumn_groupable_property.md) | (optional) enables data grouping by the values of a certain column via the user interface (**PRO version only**) |
 | [header](grid/api/gridcolumn_properties/gridcolumn_header_property.md) | (required) an array of objects with header rows configuration |
-| [hidden](grid/api/gridcolumn_properties/gridcolumn_hidden_property.md) | (optional) defines whether a column is hidden, *false* by default | 
-| [htmlEnable](grid/api/gridcolumn_properties/gridcolumn_htmlenable_property.md) | (optional) specifies the HTML content (inner HTML) of a column. If set to *false*, the content of the column cells will be displayed as a *string* value, *false* by default |
+| [hidden](grid/api/gridcolumn_properties/gridcolumn_hidden_property.md) | (optional) defines whether a column is hidden, *false* by default |
+| [htmlEnable](grid/api/gridcolumn_properties/gridcolumn_htmlenable_property.md) | (optional) allows using and displaying HTML content in a column. If set to *false*, the content of the column cells will be displayed as a *string* value, *false* by default |
 | [id](grid/api/gridcolumn_properties/gridcolumn_id_property.md)        | (required) the id of a column                          |
-| [mark](grid/api/gridcolumn_properties/gridcolumn_mark_property.md) | (optional) either highlights the specified cells or applies the desired CSS classes to cells with minimal|maximal values in a column  |
+| [mark](grid/api/gridcolumn_properties/gridcolumn_mark_property.md) | (optional) returns a template for marking a cell(s) or applies the desired CSS classes to cells with minimal/maximal values in a column   |
 | [maxWidth](grid/api/gridcolumn_properties/gridcolumn_maxwidth_property.md) | (optional) the maximal width to be set for a column |
-| [minWidth](grid/api/gridcolumn_properties/gridcolumn_minwidth_property.md) | (optional) the minimum width to be set for a column, *20* by default |
+| [minWidth](grid/api/gridcolumn_properties/gridcolumn_minwidth_property.md) | (optional) the minimum width to be set for a column |
 | [numberMask](grid/api/gridcolumn_properties/gridcolumn_numbermask_property.md) | (optional) sets an input mask for entering number values |
-| [options](grid/api/gridcolumn_properties/gridcolumn_options_property.md) | (optional) specifies a set of options to be displayed in the editor of a cell. It is required if you specify editorType: "select" | "combobox" | "multiselect" |
+| [options](grid/api/gridcolumn_properties/gridcolumn_options_property.md) | (optional) specifies a set of options to be displayed in the editor of a cell. It is required if you specify `editorType:"select"/"combobox"/"multiselect"` |
 | [patternMask](grid/api/gridcolumn_properties/gridcolumn_patternmask_property.md) | (optional) sets an input mask for entering number and string values according to a special pattern |
 | [resizable](grid/api/gridcolumn_properties/gridcolumn_resizable_property.md) | (optional) defines whether a column can be resized, *false* by default |
 | [sortable](grid/api/gridcolumn_properties/gridcolumn_resizable_property.md) | (optional) defines whether a column is sortable, *true* by default |
 | [summary](grid/api/gridcolumn_properties/gridcolumn_closable_property.md) | (optional) creates the list of calculated values based on the column's data. The defined list is available only at the column's level  |
-| [template](grid/api/gridcolumn_properties/gridcolumn_template_property.md) | (optional) a function which returns a template with content for a cell(s)  |
+| [template](grid/api/gridcolumn_properties/gridcolumn_template_property.md) | (optional) a function which returns a template with content for a cell  |
 | [tooltip](grid/api/gridcolumn_properties/gridcolumn_tooltip_property.md) | (optional) enables/disables the header tooltip, or sets the configuration object with the tooltip settings  |
 | [tooltipTemplate](grid/api/gridcolumn_properties/gridcolumn_tooltiptemplate_property.md) | (optional) a function which returns a template for the content of the tooltip  |
 | [type](grid/api/gridcolumn_properties/gridcolumn_footer_property.md) | (optional) the type of a column |

docs/grid/api/grid_groupable_config.md

@@ -6,7 +6,7 @@ description: You can explore the groupable config of Grid in the documentation o
 
 # groupable
 
-@short: Optional. Enables grouping data by values in all columns
+@short: Optional. Enables grouping data by values in all columns via the user interface
 
 :::tip pro version only
 The described functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
@@ -44,6 +44,12 @@ const grid = new dhx.Grid("grid_container", {
     - or by clicking a group element on the group panel
 - You can edit the nesting level of grouping by modifying the grouping order via either moving elements to the group panel or removing elements from the group panel
 
+:::info important
+- Data grouping isn't intended for working with `lazyDataProxy`
+- Modifying the values of grouped elements won't modify the aggregated values
+- You mustn't change the order of elements grouping by drag-n-drop
+:::
+
 **Related article**: [Grouping data](grid/usage.md#grouping-data)
 
 @changelog: added in v9.0

docs/grid/api/grid_htmlenable_config.md

@@ -6,7 +6,7 @@ description: You can explore the htmlEnable config of Grid in the documentation
 
 # htmlEnable
 
-@short: Optional. Specifies the HTML content (inner HTML) of Grid columns
+@short: Optional. Allows using and displaying HTML content in Grid columns
 
 @signature: {'htmlEnable?: boolean;'}
 

docs/grid/api/gridcolumn_properties/gridcolumn_align_property.md

@@ -14,8 +14,6 @@ description: You can explore the align config of Grid column in the documentatio
 align?: "left" | "center" | "right"; 
 ~~~
 
-@default: "left"
-
 @descr:
 ### Example
 

docs/grid/api/gridcolumn_properties/gridcolumn_autowidth_property.md

@@ -22,8 +22,8 @@ autoWidth?: boolean;
 ~~~jsx
 const grid = new dhx.Grid("grid_container", {
     columns: [
-        { width: 200, id: "country", header: [{ text: "Country" }], autoWidth: false },
-        { width: 150, id: "population", header: [{ text: "Population" }] },
+        { id: "country", header: [{ text: "Country" }], autoWidth: false },
+        { id: "population", header: [{ text: "Population" }] },
     ],
     autoWidth: true,
     data: dataset

docs/grid/api/gridcolumn_properties/gridcolumn_dateformat_property.md

@@ -6,7 +6,7 @@ description: You can explore the dateFormat config of Grid column in the documen
 
 # dateFormat
 
-@short: Optional. Defines the format of dates
+@short: Optional. Defines the [format of dates](calendar/api/calendar_dateformat_config.md)
 
 :::note
 The date format must include delimiters (spaces or symbols), otherwise an error will be thrown

docs/grid/api/gridcolumn_properties/gridcolumn_editable_property.md

@@ -23,16 +23,16 @@ editable?: boolean;
 const grid = new dhx.Grid("grid_container", {
     columns: [
         { 
-            width: 150, id:"project",
-            editable: false,
-            header: [{text: "Project"}, {content: "selectFilter"}]
+          width: 150, id: "project",
+          editable: false,
+          header: [{ text: "Project" }, { content: "selectFilter" }]
         },
-        { width:150, id: "owner", header: [{text: "Owner"},{content: "inputFilter"}]},
-        { width:150, id: "hours", header: [{text: "Hours"}, {content: "inputFilter"}]},
+        { width: 150, id: "owner", header: [{ text: "Owner" }, { content: "inputFilter" }]},
+        { width: 150, id: "hours", header: [{ text: "Hours" }, { content: "inputFilter" }]},
         // more columns
     ],
-    data: data,
     editable: true
+    // more options
 });
 ~~~
 

docs/grid/api/gridcolumn_properties/gridcolumn_editortype_property.md

@@ -14,7 +14,13 @@ description: You can explore the editorType config of Grid column in the documen
 editorType?: "input" | "select" | "datePicker" | "combobox" | "multiselect" | "textarea"; 
 ~~~
 
-@default: "input"
+@default:
+
+- for the column `type: string`:
+    - with the `autoHeight` configuration option: the "textarea" editor type
+    - without the `autoHeight` configuration option: the "input" editor type
+- for the column `type: date`: the "datePicker" editor type
+- for the column `type: number`: the "input" editor type
 
 @descr:
 ### Example

docs/grid/api/gridcolumn_properties/gridcolumn_footer_property.md

@@ -13,12 +13,17 @@ description: You can explore the footer config of Grid column in the documentati
 ~~~jsx
 footer?: [
     {
-        text?: string | ((content: {
-            [key: string]: string | number | null
-        }) => string),
+        text?: 
+            string |
+            ((content: {
+                [key: string]: string | number | null
+            }) => string),
         tooltip?: boolean | object, // true by default
         tooltipTemplate?: (
-            content: { value: string } & { [key: string]: string | number | null },
+            content: {
+                [key: string]: string | number | null;
+                value: string;
+            },
             header: IHeader,
             column: ICol
         ) => string | boolean,
@@ -59,7 +64,7 @@ Each footer object may include:
             <td><b>css</b></td><td>(optional) styling to be applied to a footer</td>
         </tr>
         <tr>
-            <td><b>htmlEnable</b></td><td>(optional) <i>false</i> by default. If set to <i>true</i>, specifies the HTML content (inner HTML) of a footer. If set to <i>false</i>, the content of the footer cells will be displayed as a <i>string</i> value</td>
+            <td><b>htmlEnable</b></td><td>(optional) <i>false</i> by default. If set to <i>true</i>, allows using and displaying HTML content in a footer. If set to <i>false</i>, the content of the footer cells will be displayed as a <i>string</i> value</td>
         </tr>
     </tbody>
 </table>

docs/grid/api/gridcolumn_properties/gridcolumn_gravity_property.md

@@ -0,0 +1,30 @@
+---
+sidebar_label: gravity
+title: JavaScript Grid - gravity Config 
+description: You can explore the gravity config of Grid in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+---
+
+# gravity
+
+@short: Optional. Sets the relative width proportions for Grid columns
+
+### Usage
+
+~~~jsx
+gravity?: number;
+~~~
+
+@descr:
+### Example
+
+~~~jsx
+const grid = new dhx.Grid("grid_container", {
+    columns: [
+        { id: "density", header: [{ text: "Density (P/Km²)" }], gravity: 1 },
+        // the column with the "area" id is two times wider than the column with the "density" id
+        { id: "area", header: [{ text: "Land Area (Km²)" }], gravity: 2 },
+    ],
+    autoWidth: true,
+    // more options
+});
+~~~

docs/grid/api/gridcolumn_properties/gridcolumn_groupable_property.md

@@ -6,7 +6,7 @@ description: You can explore the groupable config of Grid column in the document
 
 # groupable
 
-@short: Optional. Enables data grouping by the values of a certain column
+@short: Optional. Enables data grouping by the values of a certain column via the user interface
 
 ### Usage
 

docs/grid/api/gridcolumn_properties/gridcolumn_header_property.md

@@ -13,12 +13,17 @@ description: You can explore the header config of Grid column in the documentati
 ~~~jsx
 header: [
     {
-        text?: string | ((content: {
-            [key: string]: string | number | null
-        }) => string),
+        text?:
+            string |
+            ((content: {
+                [key: string]: string | number | null
+            }) => string),
         tooltip?: boolean | object, // true by default
         tooltipTemplate?: (
-            content: { value: string } & { [key: string]: string | number | null },
+            content: {
+                [key: string]: string | number | null;
+                value: string;
+            },
             header: IHeader,
             column: ICol
         ) => string | boolean,
@@ -28,16 +33,16 @@ header: [
         css?: string,
         content?: "inputFilter" | "selectFilter" | "comboFilter",
         filterConfig?: {
-            filter?: (item: any, input: string) => boolean,
+            filter?: (item, input: string) => boolean,
             multiselection?: boolean,
             readonly?: boolean,
             placeholder?: string,
             virtual?: boolean,
             template?: function
         },
-        customFilter?: (item: any, input: string) => boolean,
+        customFilter?: (item, input: string) => boolean,
         headerSort?: boolean, // true by default
-        sortAs?: (cellValue: any) => string | number,
+        sortAs?: (cellValue) => string | number,
         htmlEnable?: boolean, // false by default
     }
 ];
@@ -86,7 +91,7 @@ Each header object may include:
             <td><b>sortAs</b></td><td>(optional) a function that defines the type to sort data as (e.g. string, number, date, etc.)</td>
         </tr>
         <tr>
-            <td><b>htmlEnable</b></td><td>(optional) <i>false</i> by default. If set to <i>true</i>, specifies the HTML content (inner HTML) of a header. If set to <i>false</i>, the content of the header cells will be displayed as a <i>string</i> value</td>
+            <td><b>htmlEnable</b></td><td>(optional) <i>false</i> by default. If set to <i>true</i>, allows using and displaying HTML content in a header. If set to <i>false</i>, the content of the header cells will be displayed as a <i>string</i> value</td>
         </tr>
     </tbody>
 </table>

docs/grid/api/gridcolumn_properties/gridcolumn_htmlenable_property.md

@@ -6,7 +6,7 @@ description: You can explore the htmlEnable config of Grid column in the documen
 
 # htmlEnable
 
-@short: Optional. Specifies the HTML content (inner HTML) of a column
+@short: Optional. Allows using and displaying HTML content in a column
 
 :::note
 If set to *false*, the content of the column cells will be displayed as a *string* value.
@@ -27,13 +27,12 @@ htmlEnable?: boolean;
 ~~~jsx
 const grid = new dhx.Grid("grid_container", {
     columns: [
-        {
-            width: 200, id: "country", header: [{ text: "Country" }],
-            htmlEnable: true
-        }, 
+        { width: 150, id: "population", htmlEnable: true, header: [
+            { text: "<span class='header-title'>Population</span>" }
+        ]}, 
         // more columns
     ],
-    data: dataset
+    // more options
 });
 ~~~
 

docs/grid/api/gridcolumn_properties/gridcolumn_mark_property.md

@@ -6,20 +6,21 @@ description: You can explore the mark config of Grid column in the documentation
 
 # mark
 
-@short: Optional. Either highlights the specified cells or applies the desired CSS classes to cells with minimal|maximal values in a column 
+@short: Optional. Returns a template for marking a cell(s) or applies the desired CSS classes to cells with minimal|maximal values in a column 
 
 ### Usage
 
 ~~~jsx
- mark?: { min?: string, max?: string } | 
-        (cell: any, columnCells: any[], row?: object, column?: object) => string;
+mark?:
+    { min?: string, max?: string } | 
+    (cell, columnCells: [], row?: IRow, column?: ICol) => string;
 ~~~
 
 ### Parameters
 
-The `mark` property can be either an object or a function:
-- as an object contains min and max properties, to apply desired CSS classes to cells with minimal|maximal values in a column
-- as a function returns a template for marking a cell(s) and takes several parameters:
+The `mark` property can be either an *object* or a *function*:
+- as an *object* contains min and max properties, to apply desired CSS classes to cells with minimal|maximal values in a column
+- as a *function* returns a template for marking a cell(s) and takes several parameters:
 	- **cell** - (required) the value of a cell
 	- **columnCells** - (required) an array of all cell values in the specified column
 	- **row** - (optional) an object with all cells in a row

docs/grid/api/gridcolumn_properties/gridcolumn_minwidth_property.md

@@ -14,7 +14,6 @@ description: You can explore the minWidth config of Grid column in the documenta
 minWidth?: number;
 ~~~
 
-@default: 20
 
 @descr:
 ### Example

docs/grid/api/gridcolumn_properties/gridcolumn_options_property.md

@@ -9,7 +9,7 @@ description: You can explore the options config of Grid column in the documentat
 @short: Optional. Specifies a set of options to be displayed in the editor of a cell
 
 :::note
-The property is required if you specify the [editorType: "select" | "combobox" | "multiselect"](grid/configuration.md#types-of-column-editor). 
+The property is required if you specify [`editorType: "select" | "combobox" | "multiselect"`](grid/configuration.md#types-of-column-editor). 
 :::
 
 :::info

docs/grid/api/gridcolumn_properties/gridcolumn_template_property.md

@@ -6,7 +6,7 @@ description: You can explore the template config of Grid column in the documenta
 
 # template
 
-@short: Optional. A function which returns a template with content for a cell(s)
+@short: Optional. A function which returns a template with content for a cell
 
 ### Usage