Skip to content

Commit 11ecbeb

Browse files
committed
[update] usage in props updated, configuration and working with data updated
1 parent 9f765b3 commit 11ecbeb

File tree

7 files changed

+46
-43
lines changed

7 files changed

+46
-43
lines changed

docs/api/config/fields-property.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ The `fields` property in the configuration object controls how the widget interp
1818
fields?: [{
1919
id: string,
2020
label?: string,
21-
type: string,
21+
type: "number" | "date" | "text",
2222
sort?: "asc" | "desc" | ((a: any, b: any) => number),
2323
}];
2424
~~~

docs/api/config/headershape-property.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ description: You can learn about the headerShape config in the documentation of
1616
headerShape?: {
1717
collapsible?: boolean,
1818
vertical?: boolean,
19-
template?: (label: string, fieldId: string, subLabel?: string) => string
19+
template?: (label: string, field: string, subLabel?: string) => string
2020
};
2121
~~~
2222

@@ -54,7 +54,7 @@ const pivotWidget = new pivot.Pivot("#pivot", {
5454

5555
headerShape: {
5656
vertical: true,
57-
template: (label, fieldId, subLabel) => fieldId + (subLabel ? ` (${subLabel})` : ""),
57+
template: (label, field, subLabel) => field + (subLabel ? ` (${subLabel})` : ""),
5858
},
5959
});
6060
~~~

docs/api/config/methods-property.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ description: You can learn about the methods config in the documentation of the
1717
[method: string]:
1818
{
1919
type?: 'number' | 'date' | 'text' | [],
20-
label?:string,
21-
handler?: (values: number[]|string[]|Date[]) => any,
20+
label?: string,
21+
handler?: (values: number[]) => number,
2222
branchMode?: "raw"|"result",
2323
branchMath?: string
2424
},

docs/api/config/tableshape-property.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ description: You can learn about the tableShape config in the documentation of t
1515
~~~jsx
1616
tableShape?: {
1717
templates?: {
18-
[fieldName: string]: (
18+
[field: string]: (
1919
value: any,
2020
operation: string
2121
) => any;

docs/guides/configuration.md

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ You can configure the *Pivot* appearance and functionality via the corresponding
2222

2323
All instructions about working with data see here: [Working with data](guides/working-with-data)
2424

25-
## Table
25+
## Datatable
2626

2727
You can configure and/or customize the following elements of the Pivot table:
2828

@@ -31,7 +31,7 @@ You can configure and/or customize the following elements of the Pivot table:
3131
- cells
3232
- the table sizes
3333

34-
### Resizing the Pivot table
34+
### Resizing the table
3535

3636
You can change the size of the table rows and columns, header and footer using the [`tableShape`](/api/config/tableshape-property) property.
3737

@@ -212,7 +212,37 @@ pivotWidget.api.on("render-table", (tableConfig) => {
212212
});
213213
~~~
214214

215-
### Switching to the tree mode
215+
### Sorting in columns
216+
217+
The sorting functionality is enabled by default. A user can click the column's header to sort data. To disable/enable sorting, apply the `sort` parameter of the [`columnShape`](/api/config/columnshape-property) property. In the example below we disable sorting.
218+
219+
~~~jsx {19}
220+
const pivotWidget = new pivot.Pivot("#pivot", {
221+
fields,
222+
data,
223+
config: {
224+
rows: ["studio", "genre"],
225+
columns: [],
226+
values: [
227+
{
228+
field: "title",
229+
method: "count",
230+
},
231+
{
232+
field: "score",
233+
method: "max",
234+
},
235+
],
236+
},
237+
columnShape: {
238+
sort: false,
239+
},
240+
});
241+
~~~
242+
243+
For more information about sorting data, refer to [Sorting data](/guides/working-with-data#sorting-data).
244+
245+
### Enabling the tree mode
216246

217247
The widget allows presenting data in a hierarchical format with expandable rows. To switch to the tree mode, apply the `tree` parameter of the [`tableShape`](/api/config/tableshape-property) property by setting its value to **true** (default is **false**).
218248
To specify the parent row, put its name first in the `rows` array of the [`config`](/api/config/config-property) property.
@@ -357,36 +387,7 @@ const widget = new pivot.Pivot("#pivot", {
357387
});
358388
~~~
359389

360-
### Setting date format
361-
362-
tbd!
363-
Pivot uses the following characters for setting the date format:
364-
365-
| Character | Definition |Example |
366-
| :-------- | :------------------------------------------------ |:------------------------|
367-
| %d | day as a number with leading zero | from 01 to 31 |
368-
| %j | day as a number | from 1 to 31 |
369-
| %D | short name of the day (abbreviation) | Su Mo Tu Sat |
370-
| %l | full name of the day | Sunday Monday Tuesday |
371-
| %m | month as a number with leading zero | from 01 to 12 |
372-
| %n | month as a number | from 1 to 12 |
373-
| %M | short name of the month | Jan Feb Mar |
374-
| %F | full name of the month | January February March |
375-
| %y | year as a number, 2 digits | 24 |
376-
| %Y | year as a number, 4 digits | 2024 |
377-
| %h | hours 12-format with leading zero | from 01 to 12 |
378-
| %g | hours 12-format | from 1 to 12 |
379-
| %H | hours 24-format with leading zero | from 00 to 23 |
380-
| %G | hours 24-format | from 0 to 23 |
381-
| %i | minutes with leading zero | from 01 to 59 |
382-
| %s | seconds with leading zero | from 01 to 59 |
383-
| %a | am or pm | am (for time from midnight until noon) and pm (for time from noon until midnight)|
384-
| %A | AM or PM | AM (for time from midnight until noon) and PM (for time from noon until midnight)|
385-
| %u | milliseconds | 128 |
386-
387-
To present the 20th of June, 2024 with the exact time as *2024-09-20 16:47:08.128*, specify "%Y-%m-%d-%H:%i:%s.%u".
388-
389-
You can set the date format using the Pivot locale.
390+
390391

391392
## Configuration panel
392393

docs/guides/loading-exporting-data.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -306,6 +306,10 @@ document.body.appendChild(exportButton);
306306

307307
The Pivot accepts a date that is parsed into the Date object. By default, the `dateFormat` of the current locale is applied. To redefine the format, change the value of the `dateFormat` property in the **Locale** tag.
308308

309+
Example:
310+
311+
to be added
312+
309313
Pivot uses the following characters for setting the date format:
310314

311315
| Character | Definition |Example |
@@ -332,6 +336,4 @@ Pivot uses the following characters for setting the date format:
332336

333337
To present the 20th of June, 2024 with the exact time as *2024-09-20 16:47:08.128*, specify "%Y-%m-%d-%H:%i:%s.%u".
334338

335-
Example:
336339

337-
to be added

docs/guides/working-with-data.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const widget = new pivot.Pivot("#pivot", {
5858

5959
## Sorting data
6060

61-
The widget API allows configuring sorting settings and the sorting is applied to all areas (values, columns and rows) during aggregation. The sorting in UI is enabled by clicking the column header.
61+
The widget API allows configuring the sorting settings that are applied applied to all areas (values, columns and rows) during aggregation. The sorting in UI is enabled by clicking the column header.
6262

6363
To set default sorting values, apply the **sort** parameter of the [`fields`](/api/properties/fields-property) property. It accepts either the "asc" or "desc" value, or a custom sorting function.
6464

@@ -120,7 +120,7 @@ const widget = new pivot.Pivot("#pivot", {
120120
});
121121
~~~
122122

123-
To make the sorting possible in UI by clicking the column header, apply the `sort` parameter of the [`columnShape`](/api/config/columnshape-property) property. In the example below we disable sorting.
123+
The sorting functionality is enabled by default. A user can click the column's header to sort data. To disable/enable sorting, apply the `sort` parameter of the [`columnShape`](/api/config/columnshape-property) property. In the example below we disable sorting.
124124

125125
~~~jsx {19}
126126
const pivotWidget = new pivot.Pivot("#pivot", {

0 commit comments

Comments
 (0)