[update] tableShape, split, cell style updated

Author: tbshag2

docs/api/config/tableshape-property.md

@@ -39,17 +39,16 @@ tableShape?: {
         left?: boolean,
         right?: boolean,
     },
-    cellStyle?: (field: string, value: any, area: string, method?: string) => string,
+    cellStyle?: (field: string, value: any, area: string, method?: string, isTotal?: string) => 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
   - `headerHeight` - (optional) the header height in pixels; the default value is 30
@@ -59,7 +58,8 @@ tableShape?: {
     - `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.).
+    - `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) 

docs/guides/configuration.md

@@ -324,9 +324,7 @@ The widget allows freezing columns on the left or right side, which makes the co
 
 ### Freezing columns on the left
 
-:::info
-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. 2 columns are fixed by default. In the **tree** mode only one column gets frozen regardless of the number of the rows fields that are defined. 
-:::
+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. In the **tree** mode only one column gets frozen regardless of the number of the rows fields that are defined. In the sample below, 1 column is fixed initially on the left, which is equal to the number of fields defined for the "rows" area.
 
 ~~~jsx {19}
 const table = new pivot.Pivot("#root", {
@@ -347,19 +345,14 @@ const table = new pivot.Pivot("#root", {
         ]
     },
     tableShape: { 
-        split: {left: true } //freezes all fields from rows on the left side 
+        split: {left: true } 
     }
 });
 ~~~
 
-You can also apply a custom split using the [`render-table`](/api/events/render-table-event) event. 
-
-:::info
-For the custom split, the number of columns that are split depends on the number of the rows and values fields that are defined in the [`config`](/api/config/config-property) property.
-It's not recommended to split columns with colspans.
-:::
+You can also apply a custom split using the [`render-table`](/api/events/render-table-event) event. It's not recommended to split columns with colspans.
 
-In the example below we split all rows fields (two rows are defined in the config) and the first two columns (the first two values fields).
+In the sample below all columns from the "rows" area and first 4 columns from the "values" area are fixed initially. The number of columns that are split depends on the number of the rows and values fields that are defined via the [`config`](/api/config/config-property) property.
 
 ~~~jsx {19-25}
 const table = new pivot.Pivot("#root", {
@@ -418,7 +411,7 @@ const widget = new pivot.Pivot("#pivot", {
 });
 ~~~
 
-To fix custom columns on the right, you need to apply the table API via the [`render-table`](/api/events/render-table-event) event.
+To fix custom columns on the right, you need to apply the table API via the [`render-table`](/api/events/render-table-event) event. It's not recommended to split columns with colspans. In the sample below, 2 columns on the right are fixed initially. 
 
 ~~~jsx {20-25}
 const widget = new pivot.Pivot("#pivot", {

docs/guides/stylization.md

@@ -119,7 +119,6 @@ To apply a CSS class to a cell, use the `cellStyle` parameter of the [`tableShap
 ~~~
 
 
-
 ## 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:
@@ -180,7 +179,7 @@ const table = new pivot.Pivot("#root", {
 
 ## Aligning numbers in a cell
 
-By default, numbers are justified against the end of a cell (aligned to the right) and the number alignment is not applied in headers and in the tree mode (when `tree` is set to **true** for the [`tableShape`](/api/config/tableshape-property) property). If you want to change the number alignment in a cell, except for the cases mentioned, use the `wx-number` CSS class. 
+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. 
 
 ~~~html
 <style>
@@ -190,7 +189,6 @@ By default, numbers are justified against the end of a cell (aligned to the righ
 </style>
 ~~~
 
-
 ## Example
 
 In this snippet you can see how to apply a custom style to Pivot