[update] index, methods, overview links, stylization updated

DHTMLX · Jun 13, 2024 · 8ac0baa · 8ac0baa
1 parent 576e390
commit 8ac0baa
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 42 deletions.
diff --git a/docs/api/methods/gettable-method.md b/docs/api/methods/gettable-method.md
@@ -10,21 +10,18 @@ description: You can learn about the getTable method in the documentation of the
 
 @short: Gets access to the underlying Grid widget instance in the Pivot
 
-The method provides access to the [Grid API](https://docs.svar.dev/svelte/grid/api/overview/api_overview).
+This method is used when there's a need to access the underlying Grid widget instance in the Pivot. It provides direct access to all table functionality ([Grid API](https://docs.svar.dev/svelte/grid/api/overview/api_overview)), allowing for operations such as data serialization and exporting in various formats.
 
 ### Usage
 
 ~~~jsx {}
-api.getTable(): Table;
+getTable(wait:boolean): Table | Promise<Table>;
 ~~~
 
-### Returns
 
-The method returns the Table object:
+### Parameters
 
-~~~jsx {}
-getTable(): Table;
-~~~
+`wait` - defines to wait until Grid API is available in Pivot (necessary when Grid API is used during with Pivot initialization). If `wait` is set to **true**, the method returns a promise with Grid API.
 
 ### Example
 

diff --git a/docs/api/methods/setconfig-method.md b/docs/api/methods/setconfig-method.md
@@ -10,10 +10,12 @@ description: You can learn about the setConfig() method in the documentation of
 
 @short: Updates the current configuration of the Pivot widget
 
+The method is used to update the current configuration of the Pivot widget. It's useful when there's a need to update the underlying data set of the widget. The method preserves all the previously set options that are not explicitly provided in the `setConfig` call.
+
 ### Usage
 
 ~~~jsx {}
-setConfig(config: object): void;
+setConfig(config: { [key:any]: any }): void;
 ~~~
 
 ### Parameters

diff --git a/docs/api/methods/showconfigpanel-method.md b/docs/api/methods/showconfigpanel-method.md
@@ -10,18 +10,17 @@ description: You can learn about the showConfigPanel() method in the documentati
 
 @short: Shows or hides the configuration panel
 
-This method can be useful when there's a need to control the configuration panel's visibility without user interaction. For instance, you might want to hide or display the panel based on some other interaction or state in your application.
+This TypeScript method can be useful when there's a need to control the visibility of the configuration panel without user interaction. For instance, you might want to hide or display the panel based on some other interaction or state in your application.
+
 
 ### Usage
 
 ~~~jsx {}
-showConfigPanel(config: object): void;
+showConfigPanel({mode: boolean}): void;
 ~~~
 
 ### Parameters
 
-The `config` object has the following parameter: 
-
 - `mode` (boolean) - (required) if the value is set to **true** (default), the configuration panel is shown, and set to **false** when the configuration panel is hidden
 
 ### Example

diff --git a/docs/api/overview/events-overview.md b/docs/api/overview/events-overview.md
@@ -10,7 +10,6 @@ description: You can have an Events overview of JavaScript Pivot in the document
 | ------------------------------------------------- | ----------------------------------------------- |
 | [](../events/add-field-event.md)                  | @getshort(../events/add-field-event.md)         |
 | [](../events/apply-filter-event.md)               | @getshort(../events/apply-filter-event.md)      |
-| [](../events/close-filter-event.md)               | @getshort(../events/close-filter-event.md)      |
 | [](../events/delete-field-event.md)               | @getshort(../events/delete-field-event.md)      |
 | [](../events/open-filter-event.md)                | @getshort(../events/open-filter-event.md)       |
 | [](../events/render-table-event.md)               | @getshort(../events/render-table-event.md)      |

diff --git a/docs/api/overview/internal-eventbus-overview.md b/docs/api/overview/internal-eventbus-overview.md
@@ -8,6 +8,7 @@ description: You can have an Internal Event Bus methods overview of JavaScript P
 
 | Name                                           | Description                                       |
 | ---------------------------------------------- | ------------------------------------------------- |
+| [](../internal/detach-method.md)               | @getshort(../internal/detach-methos.md)           |
 | [](../internal/exec-method.md)                 | @getshort(../internal/exec-method.md)             |
 | [](../internal/intercept-method.md)            | @getshort(../internal/intercept-method.md)        |
 | [](../internal/on-method.md)                   | @getshort(../internal/on-method.md)               |

diff --git a/docs/api/overview/main-overview.md b/docs/api/overview/main-overview.md
@@ -22,15 +22,19 @@ new pivot.Pivot("#root", {
 ## Pivot methods
 
 | Name                                        | Description                                |
-| :------------------------------------------ | :----------------------------------------- |
-| [](../methods/some-method.md)               | @getshort(../methods/some-method.md)       |
+| ------------------------------------------- | ------------------------------------------ |
+| [](../methods/gettable-method.md)           | @getshort(../methods/gettable-method.md)        |
+| [](../methods/setconfig-method.md)          | @getshort(../methods/setconfig-method.md)       |
+| [](../methods/setlocale-method.md)          | @getshort(../methods/setlocale-method.md)       |
+| [](../methods/showconfigpanel-method.md)    | @getshort(../methods/showconfigpanel-method.md) |
 
 ## Pivot internal API
 
 ### Event Bus methods
 
 | Name                                  | Description                                  |
 | :------------------------------------ | :------------------------------------------- |
+| [](../internal/detach-method.md)      | @getshort(../internal/detach-methos.md)      |  
 | [](../internal/exec-method.md)        | @getshort(../internal/exec-method.md)        |
 | [](../internal/intercept-method.md)   | @getshort(../internal/intercept-method.md)   |
 | [](../internal/on-method.md)          | @getshort(../internal/on-method.md)          |
@@ -50,7 +54,6 @@ new pivot.Pivot("#root", {
 | :------------------------------------------------ | :---------------------------------------------- |
 | [](../events/add-field-event.md)                  | @getshort(../events/add-field-event.md)         |
 | [](../events/apply-filter-event.md)               | @getshort(../events/apply-filter-event.md)      |
-| [](../events/close-filter-event.md)               | @getshort(../events/close-filter-event.md)      |
 | [](../events/delete-field-event.md)               | @getshort(../events/delete-field-event.md)      |
 | [](../events/open-filter-event.md)                | @getshort(../events/open-filter-event.md)       |
 | [](../events/render-table-event.md)               | @getshort(../events/render-table-event.md)      |
@@ -69,9 +72,8 @@ new pivot.Pivot("#root", {
 | [](../config/fields-property.md)                   | @getshort(../config/fields-property.md)          |
 | [](../config/headershape-property.md)              | @getshort(../config/headershape-property.md)     |
 | [](../config/limits-property.md)                   | @getshort(../config/limits-property.md)          |
+| [](../config/locale-property.md)                   | @getshort(../config/locale-property.md)          |
 | [](../config/methods-property.md)                  | @getshort(../config/methods-property.md)         |
 | [](../config/predicates-property.md)               | @getshort(../config/predicates-property.md)      |
 | [](../config/readonly-property.md)                 | @getshort(../config/readonly-property.md)        |
-| [](../config/showconfig-property.md)               | @getshort(../config/showconfig-property.md)      |
-| [](../config/tableconfig-property.md)              | @getshort(../config/tableconfig-property.md)     |
 | [](../config/tableshape-property.md)               | @getshort(../config/tableshape-property.md)      |
diff --git a/docs/api/overview/properties-overview.md b/docs/api/overview/properties-overview.md
@@ -19,6 +19,4 @@ To configure the **Pivot**, refer to the [Configuration](../../../guides/configu
 | [](../config/methods-property.md)                  | @getshort(../config/methods-property.md)         |
 | [](../config/predicates-property.md)               | @getshort(../config/predicates-property.md)      |
 | [](../config/readonly-property.md)                 | @getshort(../config/readonly-property.md)        |
-| [](../config/showconfig-property.md)               | @getshort(../config/showconfig-property.md)      |
-| [](../config/tableconfig-property.md)              | @getshort(../config/tableconfig-property.md)     |
 | [](../config/tableshape-property.md)               | @getshort(../config/tableshape-property.md)      |
diff --git a/docs/guides/stylization.md b/docs/guides/stylization.md
@@ -26,6 +26,10 @@ TODO!!!
 Next versions of Pivot can bring some changes for the variables and their names. Please, do not forget to check the names after updating to the newer versions and modify them in your code to avoid problems with display of the component.
 :::
 
+## Built-in theme
+
+The widget provides one built-in theme which is the **Material theme**. TBD!!!
+
 You can apply the theme via adding the corresponding *css* classes to the widget containers:
 
 - **Material theme**
@@ -40,28 +44,9 @@ or just include the theme on the page from the skins folder:
 <link type="stylesheet" href="path/to/pivot/skins/material.css"/>
 ~~~
 
-## Custom style
-
-You can change the appearance of Pivot by applying the corresponding CSS variables.
-
-The example below shows how to apply a custom style to Pivot:
-
-~~~html
-<div id="pivot" class="demo"></div>
-<style>
-  .demo {
-    --wx-background: #444;
-    --wx-color-font: rgba(255, 255, 255, 0.9);
-    --wx-color-secondary-font: rgba(255, 255, 255, 0.5);
-    --wx-icon-color: rgba(255, 255, 255, 0.7);
-    --wx-pivot-primary-hover: #194e9e;
-    --wx-pivot-border-color: 1px solid #818080;
-    --wx-table-header-background: #2ca0e3;
-  }
-</style>
-~~~
+## Customize built-in theme
 
-The example below demonstrates how to customize Material theme that is applied to the Pivot table:
+The example below demonstrates how to customize the **Material** theme that is applied to the Pivot table:
 
 ~~~html
 <!-- custom styles -->
@@ -85,6 +70,27 @@ The example below demonstrates how to customize Material theme that is applied t
 </style>
 ~~~
 
+## Custom style
+
+You can change the appearance of Pivot by applying the corresponding CSS variables.
+
+The example below shows how to apply a custom style to Pivot:
+
+~~~html
+<div id="pivot" class="demo"></div>
+<style>
+  .demo {
+    --wx-background: #444;
+    --wx-color-font: rgba(255, 255, 255, 0.9);
+    --wx-color-secondary-font: rgba(255, 255, 255, 0.5);
+    --wx-icon-color: rgba(255, 255, 255, 0.7);
+    --wx-pivot-primary-hover: #194e9e;
+    --wx-pivot-border-color: 1px solid #818080;
+    --wx-table-header-background: #2ca0e3;
+  }
+</style>
+~~~
+
 In this snippet you can see how to apply a custom style to Pivot
 
 <iframe src="https://snippet.dhtmlx.com/" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe> TODO!!!

diff --git a/docs/index.md b/docs/index.md
@@ -110,7 +110,7 @@ The fields to which filtering is applied are marked with a special filter sign:
 
 ## Table
 
-Data is displayed as configured via the Configuration panel.
+Data in the table is displayed as configured in the Configuration panel.
 
 The sorting in columns is enabled by default: