[update] configuration.applyong-te,plates-via-teplate-helper upd, styling changed, custom-formatting corrected

Author: tbshag2

docs/api/config/tableshape-property.md

@@ -40,12 +40,12 @@ tableShape?: {
         right?: boolean,
     },
     cellStyle?: (
-    field: string, 
-    value: any, 
-    area: "rows"|"columns"|"values", 
-    method?: string,
-    isTotal?: "row"|"column"|"both") 
-    => string,
+        field: string, 
+        value: any, 
+        area: "rows"|"columns"|"values", 
+        method?: string,
+        isTotal?: "row"|"column"|"both") 
+        => string,
 };
 ~~~
 

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 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.
+You can insert HTML content to table cells via the [`pivot.template`](/api/helpers/template) helper by defining a template as a `cell` property of the `column` object. You need to apply the template 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. 
 
 The example shows how you can add icons (star or flag icon) to body cells based on their field (id, user_score):
 
@@ -251,7 +251,7 @@ const table = new pivot.Pivot("#root", {
 
 ### Adding templates via the 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.
+You can insert HTML content to header cells via the [`pivot.template`](/api/helpers/template) helper by defining a template as a `cell` property of the header cell object. You need to apply the template 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.
 
 The example below shows how to add icons to:
 

docs/guides/custom-formatting.md

@@ -18,7 +18,7 @@ const fields = [
 ];
 ~~~
 
-By default, the format for numeric values limits fraction digits to 3 and applies group separation for the integer part. The `format` parameter allows you to display numeric values without group separation (for example, years):
+By default, the format for numeric values limits fraction digits to 3 and applies group separation for the integer part. You can cancel formatting by setting `format` to *false* in the `field` configuration:
 
 ~~~js
 const fields = [
@@ -86,7 +86,7 @@ const fields = [
 ];
 ~~~
 
-In the example below we set the date format to "%d %M %Y %H:%i" for the "date" field only. The format displays day, full month name, year, hours, and minutes, e.g., "24 April 2025 14:30".
+In the example below we set the date format to "%d %M %Y %H:%i" for the "date" field only. The format displays day, full month name, year, hours, and minutes, e.g., "24 April 2025 14:30". In case you need to disable formatting of some fields, set the `format` parameter of the [`fields`](/api/config/fields-property) property to *false*. 
 
 ~~~jsx
 const fields = [
@@ -134,9 +134,6 @@ new pivot.Pivot("#pivot", {
 });
 ~~~
 
-:::info
-In case you need to disable formatting of some fields, set the `format` parameter of the [`fields`](/api/config/fields-property) property to *false*. 
-:::
 
 ## Example
 

docs/guides/stylization.md

@@ -100,7 +100,7 @@ You can also apply a custom style to the scroll bar of Pivot. For this, you can
 
 ## Cell style
 
-To apply a CSS class to the table body cell, use the `cellStyle` parameter of the [`tableShape`](/api/config/tableshape-property) property. The style of the header and footer cells can be customized via the `cellStyle` parameter of the [`headerShape`](/api/config/tableshape-property) property. In both cases the `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell.   
+To apply a CSS class to the table body or footer cells, use the `cellStyle` parameter of the [`tableShape`](/api/config/tableshape-property) property. The style of the header cells can be customized via the `cellStyle` parameter of the [`headerShape`](/api/config/tableshape-property) property. In both cases the `cellStyle` function returns a string, which can be used as a CSS class name to apply specific styles to a cell.   
 
 In the example below the styles of cells in the table body and headers are customized in the following way:
 - for the table body cells, styles are applied dynamically based on cell values (e.g., "Down", "Up", "Idle") in the "status" field and on total values (greater than 40 or less than 5) 
@@ -155,20 +155,9 @@ const widget = new pivot.Pivot("#pivot", {
 });
 ~~~
 
-It's also possible to customize the style of total columns and total rows via the `wx-total` class:
+## Marking values in cells
 
-~~~html
-<style>
-    .wx-cell.wx-total {
-        background: #fafafb;
-        font-weight: var(--wx-header-font-weight);
-    }
-</style>
-~~~
-
-## Marking cells
-
-The widget API allows marking cells with the required values. You can do it by applying the `marks` parameter of the [`tableShape`](/api/config/tableshape-property) property. You need to do the following:
+The widget API allows marking required values in cells. You can do it by applying the `marks` parameter of the [`tableShape`](/api/config/tableshape-property) property. You need to do the following:
 - create a CSS class to be applied to the marked cell
 - add the CSS class name as the parameter of the `marks` object
 - set its value which can be a custom 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.
@@ -224,7 +213,7 @@ const table = new pivot.Pivot("#root", {
 </style>
 ~~~
 
-## Aligning numbers in a cell
+## Specific CSS classes
 
 By default, in the table body numbers are aligned to the right with the help of the built-in `.wx-number` CSS class. The exception is the hierarchical column in the tree mode (when `tree` is set to **true** for the [`tableShape`](/api/config/tableshape-property) property). To reset the default number alignment, change the related CSS class. 
 
@@ -236,6 +225,17 @@ By default, in the table body numbers are aligned to the right with the help of
 </style>
 ~~~
 
+It's also possible to customize the style of total columns and total rows via the ` .wx-total` CSS class:
+
+~~~html
+<style>
+    .wx-cell.wx-total {
+        background: #fafafb;
+        font-weight: var(--wx-header-font-weight);
+    }
+</style>
+~~~
+
 ## Example
 
 In this snippet you can see how to apply a custom style to Pivot