Skip to content

Commit 8ac0baa

Browse files
committed
[update] index, methods, overview links, stylization updated
1 parent 576e390 commit 8ac0baa

File tree

9 files changed

+46
-42
lines changed

9 files changed

+46
-42
lines changed

docs/api/methods/gettable-method.md

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,18 @@ description: You can learn about the getTable method in the documentation of the
1010

1111
@short: Gets access to the underlying Grid widget instance in the Pivot
1212

13-
The method provides access to the [Grid API](https://docs.svar.dev/svelte/grid/api/overview/api_overview).
13+
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.
1414

1515
### Usage
1616

1717
~~~jsx {}
18-
api.getTable(): Table;
18+
getTable(wait:boolean): Table | Promise<Table>;
1919
~~~
2020

21-
### Returns
2221

23-
The method returns the Table object:
22+
### Parameters
2423

25-
~~~jsx {}
26-
getTable(): Table;
27-
~~~
24+
`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.
2825

2926
### Example
3027

docs/api/methods/setconfig-method.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@ description: You can learn about the setConfig() method in the documentation of
1010

1111
@short: Updates the current configuration of the Pivot widget
1212

13+
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.
14+
1315
### Usage
1416

1517
~~~jsx {}
16-
setConfig(config: object): void;
18+
setConfig(config: { [key:any]: any }): void;
1719
~~~
1820

1921
### Parameters

docs/api/methods/showconfigpanel-method.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,17 @@ description: You can learn about the showConfigPanel() method in the documentati
1010

1111
@short: Shows or hides the configuration panel
1212

13-
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.
13+
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.
14+
1415

1516
### Usage
1617

1718
~~~jsx {}
18-
showConfigPanel(config: object): void;
19+
showConfigPanel({mode: boolean}): void;
1920
~~~
2021

2122
### Parameters
2223

23-
The `config` object has the following parameter:
24-
2524
- `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
2625

2726
### Example

docs/api/overview/events-overview.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ description: You can have an Events overview of JavaScript Pivot in the document
1010
| ------------------------------------------------- | ----------------------------------------------- |
1111
| [](../events/add-field-event.md) | @getshort(../events/add-field-event.md) |
1212
| [](../events/apply-filter-event.md) | @getshort(../events/apply-filter-event.md) |
13-
| [](../events/close-filter-event.md) | @getshort(../events/close-filter-event.md) |
1413
| [](../events/delete-field-event.md) | @getshort(../events/delete-field-event.md) |
1514
| [](../events/open-filter-event.md) | @getshort(../events/open-filter-event.md) |
1615
| [](../events/render-table-event.md) | @getshort(../events/render-table-event.md) |

docs/api/overview/internal-eventbus-overview.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ description: You can have an Internal Event Bus methods overview of JavaScript P
88

99
| Name | Description |
1010
| ---------------------------------------------- | ------------------------------------------------- |
11+
| [](../internal/detach-method.md) | @getshort(../internal/detach-methos.md) |
1112
| [](../internal/exec-method.md) | @getshort(../internal/exec-method.md) |
1213
| [](../internal/intercept-method.md) | @getshort(../internal/intercept-method.md) |
1314
| [](../internal/on-method.md) | @getshort(../internal/on-method.md) |

docs/api/overview/main-overview.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,19 @@ new pivot.Pivot("#root", {
2222
## Pivot methods
2323

2424
| Name | Description |
25-
| :------------------------------------------ | :----------------------------------------- |
26-
| [](../methods/some-method.md) | @getshort(../methods/some-method.md) |
25+
| ------------------------------------------- | ------------------------------------------ |
26+
| [](../methods/gettable-method.md) | @getshort(../methods/gettable-method.md) |
27+
| [](../methods/setconfig-method.md) | @getshort(../methods/setconfig-method.md) |
28+
| [](../methods/setlocale-method.md) | @getshort(../methods/setlocale-method.md) |
29+
| [](../methods/showconfigpanel-method.md) | @getshort(../methods/showconfigpanel-method.md) |
2730

2831
## Pivot internal API
2932

3033
### Event Bus methods
3134

3235
| Name | Description |
3336
| :------------------------------------ | :------------------------------------------- |
37+
| [](../internal/detach-method.md) | @getshort(../internal/detach-methos.md) |
3438
| [](../internal/exec-method.md) | @getshort(../internal/exec-method.md) |
3539
| [](../internal/intercept-method.md) | @getshort(../internal/intercept-method.md) |
3640
| [](../internal/on-method.md) | @getshort(../internal/on-method.md) |
@@ -50,7 +54,6 @@ new pivot.Pivot("#root", {
5054
| :------------------------------------------------ | :---------------------------------------------- |
5155
| [](../events/add-field-event.md) | @getshort(../events/add-field-event.md) |
5256
| [](../events/apply-filter-event.md) | @getshort(../events/apply-filter-event.md) |
53-
| [](../events/close-filter-event.md) | @getshort(../events/close-filter-event.md) |
5457
| [](../events/delete-field-event.md) | @getshort(../events/delete-field-event.md) |
5558
| [](../events/open-filter-event.md) | @getshort(../events/open-filter-event.md) |
5659
| [](../events/render-table-event.md) | @getshort(../events/render-table-event.md) |
@@ -69,9 +72,8 @@ new pivot.Pivot("#root", {
6972
| [](../config/fields-property.md) | @getshort(../config/fields-property.md) |
7073
| [](../config/headershape-property.md) | @getshort(../config/headershape-property.md) |
7174
| [](../config/limits-property.md) | @getshort(../config/limits-property.md) |
75+
| [](../config/locale-property.md) | @getshort(../config/locale-property.md) |
7276
| [](../config/methods-property.md) | @getshort(../config/methods-property.md) |
7377
| [](../config/predicates-property.md) | @getshort(../config/predicates-property.md) |
7478
| [](../config/readonly-property.md) | @getshort(../config/readonly-property.md) |
75-
| [](../config/showconfig-property.md) | @getshort(../config/showconfig-property.md) |
76-
| [](../config/tableconfig-property.md) | @getshort(../config/tableconfig-property.md) |
7779
| [](../config/tableshape-property.md) | @getshort(../config/tableshape-property.md) |

docs/api/overview/properties-overview.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,4 @@ To configure the **Pivot**, refer to the [Configuration](../../../guides/configu
1919
| [](../config/methods-property.md) | @getshort(../config/methods-property.md) |
2020
| [](../config/predicates-property.md) | @getshort(../config/predicates-property.md) |
2121
| [](../config/readonly-property.md) | @getshort(../config/readonly-property.md) |
22-
| [](../config/showconfig-property.md) | @getshort(../config/showconfig-property.md) |
23-
| [](../config/tableconfig-property.md) | @getshort(../config/tableconfig-property.md) |
2422
| [](../config/tableshape-property.md) | @getshort(../config/tableshape-property.md) |

docs/guides/stylization.md

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ TODO!!!
2626
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.
2727
:::
2828

29+
## Built-in theme
30+
31+
The widget provides one built-in theme which is the **Material theme**. TBD!!!
32+
2933
You can apply the theme via adding the corresponding *css* classes to the widget containers:
3034

3135
- **Material theme**
@@ -40,28 +44,9 @@ or just include the theme on the page from the skins folder:
4044
<link type="stylesheet" href="path/to/pivot/skins/material.css"/>
4145
~~~
4246

43-
## Custom style
44-
45-
You can change the appearance of Pivot by applying the corresponding CSS variables.
46-
47-
The example below shows how to apply a custom style to Pivot:
48-
49-
~~~html
50-
<div id="pivot" class="demo"></div>
51-
<style>
52-
.demo {
53-
--wx-background: #444;
54-
--wx-color-font: rgba(255, 255, 255, 0.9);
55-
--wx-color-secondary-font: rgba(255, 255, 255, 0.5);
56-
--wx-icon-color: rgba(255, 255, 255, 0.7);
57-
--wx-pivot-primary-hover: #194e9e;
58-
--wx-pivot-border-color: 1px solid #818080;
59-
--wx-table-header-background: #2ca0e3;
60-
}
61-
</style>
62-
~~~
47+
## Customize built-in theme
6348

64-
The example below demonstrates how to customize Material theme that is applied to the Pivot table:
49+
The example below demonstrates how to customize the **Material** theme that is applied to the Pivot table:
6550

6651
~~~html
6752
<!-- custom styles -->
@@ -85,6 +70,27 @@ The example below demonstrates how to customize Material theme that is applied t
8570
</style>
8671
~~~
8772

73+
## Custom style
74+
75+
You can change the appearance of Pivot by applying the corresponding CSS variables.
76+
77+
The example below shows how to apply a custom style to Pivot:
78+
79+
~~~html
80+
<div id="pivot" class="demo"></div>
81+
<style>
82+
.demo {
83+
--wx-background: #444;
84+
--wx-color-font: rgba(255, 255, 255, 0.9);
85+
--wx-color-secondary-font: rgba(255, 255, 255, 0.5);
86+
--wx-icon-color: rgba(255, 255, 255, 0.7);
87+
--wx-pivot-primary-hover: #194e9e;
88+
--wx-pivot-border-color: 1px solid #818080;
89+
--wx-table-header-background: #2ca0e3;
90+
}
91+
</style>
92+
~~~
93+
8894
In this snippet you can see how to apply a custom style to Pivot
8995

9096
<iframe src="https://snippet.dhtmlx.com/" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe> TODO!!!

docs/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ The fields to which filtering is applied are marked with a special filter sign:
110110

111111
## Table
112112

113-
Data is displayed as configured via the Configuration panel.
113+
Data in the table is displayed as configured in the Configuration panel.
114114

115115
The sorting in columns is enabled by default:
116116

0 commit comments

Comments
 (0)