[update] headerShape.cellStyle added, style cells updated, render-table, template fixed

Author: tbshag2

docs/api/config/headershape-property.md

@@ -22,9 +22,15 @@ headerShape?: {
 
 ### 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 or footer 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})` : "")
@@ -61,5 +67,8 @@ const table = new pivot.Pivot("#root", {
 - [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/tableshape-property.md

@@ -48,25 +48,25 @@ tableShape?: {
 - `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 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).
+- `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
   - `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:
+- `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) 
+- `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) 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.
+    - `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 columns are not fixed during scroll.
@@ -113,5 +113,8 @@ const table = new pivot.Pivot("#root", {
 - [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 article**: [Configuration](/guides/configuration)
+**Related articles**: 
+- [Configuration](/guides/configuration)
+- [Cell style](/guides/stylization/#cell-style)

docs/api/events/render-table-event.md

@@ -42,8 +42,10 @@ The callback of the action takes the `config` object with the following paramete
 
 - `columns` - (optional) columns array with the next parameters for each object:
     - `id` (number) - (required) the id of a column
-    - `cell` (any) - (optional) a template with the cell content (please, refer to [Applying templates to cells](/guides/configuration/#applying-templates-to-cells))
+    - `cell` (any) - (optional) a template with the cell content (please, refer to [Adding templates via the template helper](/guides/configuration/#adding-a-template-via-the-template-helper))    
+    - `template` - (optional) the template that is defined via the [`tableShape`](/api/config/tableshape-property) property
     - `fields` (array) - (optional) defines fields in the hierarchical column in the tree mode. Reflects fields displayed in this column on different levels
+     - `field` - (optional) it's a string which is the id of a field
     - `method` (string) - (optional) a method, if defined for a field in this column
     - `methods` (array) - (optional) defines methods applied to fields in the hierarchical column in the tree mode
     - `format` (string or object) - (required) [date format](/guides/custom-formatting/#custom-date-formatting) or [number format](/guides/custom-formatting/#custom-number-formatting)
@@ -59,9 +61,7 @@ The callback of the action takes the `config` object with the following paramete
         - `method` (string) - (required) the field predicate, if a cell belongs to "columns" area and predicate is defined
         - `format` (string or object) - [date format](/guides/custom-formatting/#custom-date-formatting) or [number format](/guides/custom-formatting/#custom-number-formatting)
   - `footer` - (optional) a header label or an object with footer settings which are the same as the header settings
-  - `field` - (optional) it's a string which is the id of a field
-  - `template` - (optional) the template that is defined via the [`tableShape`](/api/config/tableshape-property) property
-- `data` - (optional) an array of objects with data for the table; each object represents a row:
+ - `data` - (optional) an array of objects with data for the table; each object represents a row:
     - `id` (number) - (required) row id
     - `values` (array) - (required) an array with row data
     - `open` (boolean)- (optional) branch state

docs/api/helpers/template.md

@@ -35,8 +35,10 @@ For body cells the function takes the next parameters:
     - `$level` (boolean)- (optional) branch index
 - `column` - (required) an object with column data:
     - `id` (number) - (required) the id of a column
-    - `cell` (any) - (optional) a template with the cell content (please, refer to [Applying templates to cells](/guides/configuration/#applying-templates-to-cells))
+    - `cell` (any) - (optional) a template with the cell content (please, refer to [Adding templates via the template helper](/guides/configuration/#adding-a-template-via-the-template-helper))    
+    - `template` - (optional) the template that is defined via the [`tableShape`](/api/config/tableshape-property) property
     - `fields` (array) - (optional) defines fields in the hierarchical column in the tree mode. Reflects fields displayed in this column on different levels
+     - `field` - (optional) it's a string which is the id of a field
     - `method` (string) - (optional) a method, if defined for a field in this column
     - `methods` (array) - (optional) defines methods applied to fields in the hierarchical column in the tree mode
     - `format` (string or object) - (required) [date format](/guides/custom-formatting/#custom-date-formatting) or [number format](/guides/custom-formatting/#custom-number-formatting)
@@ -49,12 +51,12 @@ For body cells the function takes the next parameters:
         - `colspan` (number) - (optional) the number of columns a header should span
         - `value` (any) - (required) raw value, if a cell belongs to "columns" area
         - `field` (string) - (required) a field, which value is displayed, if a cell belongs to "columns" area
-        - `method` (string) - (required) a field predicate, if a cell belongs to "columns" area and predicate is defined
-        - `format` (string or object) - (required) [date format](/guides/custom-formatting/#custom-date-formatting) or [number format](/guides/custom-formatting/#custom-number-formatting)
+        - `method` (string) - (required) the field predicate, if a cell belongs to "columns" area and predicate is defined
+        - `format` (string or object) - [date format](/guides/custom-formatting/#custom-date-formatting) or [number format](/guides/custom-formatting/#custom-number-formatting)
 
 For header cells the function parameters are the following:
 
-- `value` (any) - (required) raw cell value
+- `value` (any) - (required) a raw cell value
 - `method` (string) - (optional) a predicate used for a column
 - `field` (string) - (optional) a field which value is displayed in a cell
 - `cell` - (required) an object with cell data:

docs/guides/configuration.md

@@ -170,7 +170,7 @@ const table = new pivot.Pivot("#root", {
 
 ### Adding a template via the template helper
 
-You can also define HTML templates using the [`pivot.template`](/api/helpers/template) helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `columns` array. Define the template via the `pivot.template` helper.
+You can also define a template as a cell property of the `column` object via the [`pivot.template`](/api/helpers/template) helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `columns` array. Define the template via the `pivot.template` helper.
 
 The example shows how you can add icons (star or flag icon) to body cells based on their field (id, user_score):
 
@@ -201,7 +201,7 @@ function scoreTemplate(value) {
 widget.api.intercept("render-table", ({ config: tableConfig }) => {
     tableConfig.columns = tableConfig.columns.map((c) => {
         if (c.area === "rows") {
-            // Apply a template to body cells in row fields
+            // Apply a template to column cells from the "rows" area
             c.cell = pivot.template(({ value, method, row, column }) => cellTemplate(value, method, row, column));
         }
         return c;
@@ -251,7 +251,7 @@ const table = new pivot.Pivot("#root", {
 
 ### Adding templates via the template helper
 
-You can also define HTML templates using the [`pivot.template`](/api/helpers/template) helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `header` parameter in the `columns` array. Define the template via the `pivot.template` helper.
+You can also define a template as a cell property of the `header` object via the [`pivot.template`](/api/helpers/template) helper. You need to apply it right before the table renders, which is done by intercepting the [render-table](/api/events/render-table-event) event using the [api.intercept()](/api/internal/intercept-method) method. Use this event to modify the table's config, namely the `header` parameter in the `columns` array. Define the template via the `pivot.template` helper.
 
 The example below shows how to add icons to:
 
@@ -276,10 +276,10 @@ function statusTemplate(value) {
 widget.api.intercept("render-table", ({ config: tableConfig }) => {
     tableConfig.columns = tableConfig.columns.map((c) => {
         if (c.area === "rows") {
-            // Apply a template to the first header row of row fields
+            // Apply a template to the first header row of the columns from the "rows" area
             c.header[0].cell = pivot.template(({ value, field }) => rowsHeaderTemplate(value, field));
         } else {
-            // For headers in columns (like "status")
+            // For header cells that display values from the "status" field
             const headerCell = c.header.find((h) => h.field === "status");
             if (headerCell) {
                 headerCell.cell = pivot.template(({ value }) => statusTemplate(value));