[update] docs version to v3.7.0 (and Localization changes)

docs/api/config/columnshape-property.md

@@ -36,7 +36,7 @@ columnShape?: {
 - `autoWidth` - (optional) an object that defines how column width should be calculated automatically. The default configuration uses 20 rows, and the width is calculated based on the header and data, with each field analyzed only once. The object parameters are the following: 
     - `columns` - (optional) an object where each key is a field id and the boolean value defines whether column width should be calculated automatically
     - `auto` - (required) if set to **header**, adjusts the width to the header text; if set to **data**, adjusts the width to the cell with the widest content; if set to **true**, the width is adjusted to the content of both headers and cell.
-    If autowidth is set  to **false**, the `width` value is set or the value of the `colWidth` from the [`tableShape`](/api/config/tableshape-property) property is applied.
+    If autowidth is set  to **false**, the `width` value is set or the value of the `columnWidth` from the [`tableShape`](/api/config/tableshape-property) property is applied.
     - `maxRows` - (optional) the number of rows to be processed for the autoWidth calculation
     - `firstOnly` - (optional) if set to **true** (default), each field of the same data is analyzed only once to calculate the column width; in case of multiple columns based on the same data (e.g., the *oil* field with the *count* operation and the *oil* field with the *sum* operation), only data in the first one will be analyzed and the others will inherit this width
 
@@ -78,5 +78,5 @@ const table = new pivot.Pivot("#root", {
 ~~~
 
 **Related samples:**
-- [Pivot 2.0. Auto width. Sizing columns to content](https://snippet.dhtmlx.com/tn1yw14m)
-- [Pivot 2.0. Set columns width](https://snippet.dhtmlx.com/ceu34kkn)
+- [Pivot 2. Auto width. Sizing columns to content](https://snippet.dhtmlx.com/tn1yw14m)
+- [Pivot 2. Set columns width](https://snippet.dhtmlx.com/ceu34kkn)

docs/api/config/fields-property.md

@@ -19,7 +19,8 @@ fields?: [{
     id: string,
     label?: string,
     type: "number" | "date" | "text",
-    sort?: "asc" | "desc" | ((a: any, b: any) => number)  
+    sort?: "asc" | "desc" | ((a: any, b: any) => number),
+    format?: string | boolean | numberFormatOptions{}
 }];
 ~~~
 
@@ -33,6 +34,20 @@ Each object in the `fields` array should have the following properties:
 - `label` - (optional) the field label to be displayed in GUI
 - `type` - (required) data type in a field ( "number", "date", or "string")
 - `sort` - (optional) defines the default sorting order for the field. Accepts "asc", "desc", or a custom sorting function
+- `format` - (optional) allows customizing the format of numbers and dates in a field; the format will be also applied during [export](/guides/exporting-data)
+    - `string` - (optional) the format for dates (by default, Pivot uses `dateFormat` from locale)
+    - `boolean` - (optional) if set to **false**, a number is displayed as is, without any formatting
+    - `numberFormatOptions` - (optional) an object with options for formatting numeric fields; by default, numbers will be shown with a maximum of 3 decimal digits and group separation for the integer part is applied.
+        - `minimumIntegerDigits`(number) - (optional) the minimum number of integer (for example, if the value is set to 2, the number 1 will be shown as "01"); the default is 1;
+        - `minimumFractionDigits`(number) - (optional) the minimum number of fraction digits to use (for example, if the value is set to 2, the number 10.5 will be shown as "10.50"); the default is 1;
+        - `maximumFractionDigits`(number) - (optional) the maximum number of fraction digits to use (for example, if the value is set to 2, the number 10.3333... will be shown as "10.33"); the default is 3;  
+        For more details about digit options refer to  [Digit options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits)
+        - `prefix` (string) - (optional) a string (before a number) for additional symbols like currency
+        - `suffix` (string) - (optional) a string (after a number) for additional symbols like currency
+
+:::info
+If a template is applied via the [`tableShape`](/api/config/tableshape-property) property, it will override the `format` settings.
+:::
 
 ### Example
 
@@ -88,3 +103,5 @@ const table = new pivot.Pivot("#root", {
     }
 });
 ~~~
+
+**Related article**: [Number formatting](/guides/localization/#number-formatting)

docs/api/config/headershape-property.md

@@ -16,15 +16,28 @@ description: You can learn about the headerShape config in the documentation of
 headerShape?: {
     collapsible?: boolean,
     vertical?: boolean,
-    template?: (label: string, field: string, subLabel?: string) => string
+    template?: (label: string, field: string, subLabel?: string) => string,
+    cellStyle?: (
+        field: string, 
+        value: any, 
+        area: "rows"|"columns"|"values", 
+        method?: string,
+        isTotal?: boolean) 
+        => string,
 };
 ~~~
 
 ### Parameters
 
-- `collapsible` - (optional) if set to **true**, dimension groups in the table are collapsible; it's set to **false** by default
-- `vertical` - (optional) if set to **true**, changes the text orientation in all headers from horizontal to vertical; the default value is **false**
-- `template` - (optional) defines the format of text in headers; by default, for the fields applied as rows the value of the `label` parameter is displayed and for the fields applied as values the label and method are shown (e.g., *Oil(count)*); the function takes the field id, label and the method or predicate id (if any) and returns the processed value; the default template is as follows: 
+- `collapsible` - (optional) if set to **true**, dimension groups in the table are collapsible. It's set to **false** by default
+- `vertical` - (optional) if set to **true**, changes the text orientation in all headers from horizontal to vertical. The default value is **false**
+- `cellStyle` - (optional) a function that applies a custom style to a header cell. The function returns a name of css class and takes the following parameters:
+    - `field` (string) - (required) a string representing the field name the cell corresponds to. For the header of the tree column the field is ""
+    - `value` (string | number | date) - (required) the value of a cell 
+    - `area` - (required) a string indicating the area of the table where a cell resides ("rows", "columns" or "values" area)
+    - `method` (string) - (optional) a string that can represent the operation performed for a field from the "values` area (e.g., "sum", "count", etc.) or the name of a predicate set for a field from the "columns" area
+    - `isTotal` - (optional) defines whether a cell belongs to a total column
+- `template` - (optional) defines the format of text in headers. By default, for the fields applied as rows the value of the `label` parameter is displayed and for the fields applied as values the label and method are shown (e.g., *Oil(count)*). The function takes the field id, label and the method or predicate id (if any) and returns the processed value. The default template is as follows: 
 ~~~js
 template: (label, id, subLabel) =>
     label + (subLabel ? ` (${subLabel})` : "")
@@ -52,14 +65,17 @@ const table = new pivot.Pivot("#root", {
     },
     headerShape: {
         vertical: true,
-        template: (label, field, subLabel) => field + (subLabel ? ` (${subLabel})` : "")
+        template: (label, field, subLabel) => field + (subLabel ? ` (${subLabel})` : ""),
     }
 });
 ~~~
 
 **Related samples**:
-- [Pivot 2.0: Vertical orientation of text in grid headers](https://snippet.dhtmlx.com/4qroi8ka)
-- [Pivot 2.0: Collapsible columns](https://snippet.dhtmlx.com/pt2ljmcm)
-- [Pivot 2.0. Headers template](https://snippet.dhtmlx.com/g89r9ryw)
+- [Pivot 2. Vertical orientation of text in grid headers](https://snippet.dhtmlx.com/4qroi8ka)
+- [Pivot 2. Collapsible columns](https://snippet.dhtmlx.com/pt2ljmcm)
+- [Pivot 2. Headers template](https://snippet.dhtmlx.com/g89r9ryw)
+- [Pivot 2. Pivot 2: Adding сustom CSS for table and header cells](https://snippet.dhtmlx.com/nfdcs4i2)
 
-**Related article**: [Configuration](/guides/configuration)
+**Related articles**: 
+- [Configuration](/guides/configuration)
+- [Cell style](/guides/stylization/#cell-style)

docs/api/config/limits-property.md

@@ -58,4 +58,4 @@ const table = new pivot.Pivot("#root", {
 });
 ~~~
 
-**Related sample:** [Pivot 2.0. Data limits](https://snippet.dhtmlx.com/7ryns8oe)
+**Related sample:** [Pivot 2. Data limits](https://snippet.dhtmlx.com/7ryns8oe)

docs/api/config/methods-property.md

@@ -158,6 +158,6 @@ const table = new pivot.Pivot("#root", {
 });
 ~~~
 
-**Related sample:** [Pivot 2.0: Custom math methods](https://snippet.dhtmlx.com/lv90d8q2) 
+**Related sample:** [Pivot 2. Custom maths methods](https://snippet.dhtmlx.com/lv90d8q2) 
 
 **Related article**: [Applying maths methods](/guides/working-with-data#applying-maths-methods)

docs/api/config/predicates-property.md

@@ -112,4 +112,4 @@ const table = new pivot.Pivot("#pivot", {
 
 **Related article**: [Processing data with predicates](/guides/working-with-data#processing-data-with-predicates)
 
-**Related sample**: [Pivot 2.0: Custom predicates](https://snippet.dhtmlx.com/mhymus00)
+**Related sample**: [Pivot 2. Custom predicates](https://snippet.dhtmlx.com/mhymus00)

docs/api/config/readonly-property.md

@@ -49,4 +49,4 @@ const table = new pivot.Pivot("#root", {
 });
 ~~~
 
-**Related sample:** [Pivot 2.0. Readonly mode](https://snippet.dhtmlx.com/0k0mvycv)
+**Related sample:** [Pivot 2. Readonly mode](https://snippet.dhtmlx.com/0k0mvycv)

docs/api/config/tableshape-property.md

@@ -20,8 +20,8 @@ tableShape?: {
             operation: string
         ) => any;
     },
-    totalRow?: boolean,
-    totalColumn?: boolean,
+	totalRow?: boolean | "sumOnly",
+	totalColumn?: boolean | "sumOnly",
     marks?: {
         [cssClass: string]: ((v: any, columnData: any, rowData: any) => boolean)
         | "max" 
@@ -30,36 +30,52 @@ tableShape?: {
     sizes?: {
         rowHeight?: number,
         headerHeight?: number,
-        colWidth?: number,
+        columnWidth?: number,
         footerHeight?: number
     },
     tree?:boolean,
     cleanRows?: boolean,
     split?: {
-        left?: boolean
-    }
+        left?: boolean,
+        right?: boolean,
+    },
+    cellStyle?: (
+        field: string, 
+        value: any, 
+        area: "rows"|"columns"|"values", 
+        method?: string,
+        isTotal?: "row"|"column"|"both") 
+        => string,
 };
 ~~~
 
 ### Parameters
 
 - `templates` -  (optional) allows setting templates to a cell; it's an object where:
   - each key is a field id
-  - the value is a function that returns a string and receives cell value and operation 
- All columns based on the specified field will have the related template applied. For example, it allows setting the units of measurement or returning the required number of digits after the decimal point for numeric values, etc. See the example below. 
-- `marks` - (optional) allows marking a cell with the required values; it's an object where keys are CSS class names and values are either a function or one of the predefined strings ("max", "min"). The default value is {}. The function should return boolean for the checked value; if **true** is returned, the css class is assigned to the cell. More information with examples see here [Marking cells](/guides/stylization#cell-style).
+  - the value is a function that returns a string and receives cell value and operation. All columns based on the specified field will have the related template applied. For example, it allows setting the units of measurement or returning the required number of digits after the decimal point for numeric values, etc. See the example below. 
+- `marks` - (optional) allows marking a cell with the required values. It's an object where keys are CSS class names and values are either a function or one of the predefined strings ("max", "min"). The function should return boolean for the checked value. If **true** is returned, the css class is assigned to the cell. More information with examples see here [Marking cells](/guides/stylization#cell-style).
 - `sizes` - (optional) defines the following size parameters of the table: 
-  - `rowHeight` - (optional) the row height in the Pivot table in pixels; the default value is 34
+  - `rowHeight` - (optional) the row height in the Pivot table in pixels. The default value is 34
   - `headerHeight` - (optional) the header height in pixels; the default value is 30
   - `footerHeight` - (optional) the footer height in pixels; the default value is 30
-  - `colWidth` - (optional) the column width in pixels; the default value is 150
-- `tree` - (optional) if set to **true**, enables the tree mode when data can be presented with expandable rows; the default value is **false**; more information with examples see here [Switching to the tree mode](/guides/configuration/#enabling-the-tree-mode)
-- `totalColumn` - (optional) enables generating the total column with total values for rows. The default value is **false**; 
-- `totalRow` - (optional) enables generating the footer with total values (if set to **true**) the default value is **false**
+  - `columnWidth` - (optional) the column width in pixels; the default value is 150
+- `cellStyle` - (optional) a function that applies a custom style to a cell. The function has the next parameters:
+    - `field` - (required) a string representing the field name for which the style is applied
+    - `value` - (required) the value of the cell (the actual data for that particular row and column)
+    - `area` - (required) a string indicating the area of the table where a cell resides ("rows", "columns" or "values" area)
+    - `method` - (optional) a string that can represent the operation performed on a cell (e.g., "sum", "count", etc.)
+    - `isTotal` - (optional) defines whether a cell belongs to a total row, total column, or both: "row"|"column"|"both   
+    The `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell. 
+- `tree` - (optional) if set to **true**, enables the tree mode when data can be presented with expandable rows, the default value is **false**. More information with examples see here [Switching to the tree mode](/guides/configuration/#enabling-the-tree-mode)
+- `totalColumn` - (optional) if **true**, enables generating the total column with total values for rows (**false** is set by default). If the value is set to "sumOnly", the column with the total sum value will be generated (available only for sum operations) 
+- `totalRow` - (optional) if **true**, enables generating the footer with total values (**false** is set by default). If the value is set to "sumOnly", the row with the total row value will be generated (available only for sum operations) 
 - `cleanRows` - (optional) if set to **true**, the duplicate values in scale columns are hidden in the table view. The default value is **false**
-- `split` - (optional) if set to **true**, fixes the columns from the left, which makes columns static and visible while scrolling; the number of columns that are split is equal to the number of the rows fields that are defined in the [`config`](/api/config/config-property) property.
+- `split` - (optional) allows freezing columns on the right or left depending on the parameter specified (refer to [Freezing columns](/guides/configuration/#freezing-columns)):
+    - `left` (boolean) - if set to **true** (**false** is set by default), fixes the columns from the left, which makes columns static and visible while scrolling. The number of columns that are split is equal to the number of the rows fields that are defined in the [`config`](/api/config/config-property) property
+    - `right` (boolean) - fixes total columns on the right; default value is **false**
 
-By default, `tableShape` is undefined, implying that no total row, no total column is present, no templates and marks are applied, the data is shown as a table and not a tree, and left columns are not fixed during scroll.
+By default, `tableShape` is undefined, implying that no total row, no total column is present, no templates and marks are applied, the data is shown as a table and not a tree, and columns are not fixed during scroll.
 
 ## Example
 
@@ -98,8 +114,13 @@ const table = new pivot.Pivot("#root", {
 ~~~
 
 **Related samples:**
-- [Pivot 2.0: Tree mode](https://snippet.dhtmlx.com/6ylkoukn)
-- [Pivot 2.0. Frozen (fixed) columns](https://snippet.dhtmlx.com/lahf729o)
-- [Pivot 2.0. Set row, header, footer height and all columns width](https://snippet.dhtmlx.com/x46uyfy9)
 
-**Related article**: [Configuration](/guides/configuration)
+- [Pivot 2. Tree mode](https://snippet.dhtmlx.com/6ylkoukn)
+- [Pivot 2. Frozen (fixed) columns](https://snippet.dhtmlx.com/lahf729o)
+- [Pivot 2. Set row, header, footer height and all columns width](https://snippet.dhtmlx.com/x46uyfy9)
+- [Pivot 2. Clean rows](https://snippet.dhtmlx.com/rwwhgv2w?tag=pivot)
+- [Pivot 2. Pivot 2: Adding сustom CSS for table and header cells](https://snippet.dhtmlx.com/nfdcs4i2)
+
+**Related articles**: 
+- [Configuration](/guides/configuration)
+- [Cell style](/guides/stylization/#cell-style)