Skip to content

Commit 407faa2

Browse files
tbshag2tbshag2
committed
[update] table events added to api
1 parent 4b5139d commit 407faa2

13 files changed

+285
-92
lines changed

‎docs/api/overview/events-overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
sidebar_label: Events overview
33
title: Events Overview
4-
description: You can have an Events overview of JavaScript Pivot in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot.
4+
description: You can have Events overview of JavaScript Pivot in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot.
55
---
66

77
# Events overview

‎docs/api/overview/internal-state-overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
sidebar_label: State methods
33
title: State Methods
4-
description: You can have an Internal State methods overview of JavaScript Pivot in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot.
4+
description: You can have Internal State methods overview of JavaScript Pivot in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot.
55
---
66

77
# State methods overview

‎docs/api/overview/methods-overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
sidebar_label: Methods overview
33
title: Methods Overview
4-
description: You can have a Methods overview of JavaScript Pivot in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot.
4+
description: You can have Methods overview of JavaScript Pivot in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot.
55
---
66

77
# Methods overview

‎docs/api/overview/properties-overview.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
sidebar_label: Properties overview
33
title: Properties Overview
4-
description: You can have a Properties overview of JavaScript Pivot in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot.
4+
description: You can have Properties overview of JavaScript Pivot in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot.
55
---
66

77
# Properties overview
@@ -17,6 +17,7 @@ To configure the **Pivot**, refer to the [Configuration](../../../guides/configu
1717
| [](../config/fields-property.md) | @getshort(../config/fields-property.md) |
1818
| [](../config/headershape-property.md) | @getshort(../config/headershape-property.md) |
1919
| [](../config/limits-property.md) | @getshort(../config/limits-property.md) |
20+
| [](../config/locale-property.md) | @getshort(../config/locale-property.md) |
2021
| [](../config/methods-property.md) | @getshort(../config/methods-property.md) |
2122
| [](../config/predicates-property.md) | @getshort(../config/predicates-property.md) |
2223
| [](../config/readonly-property.md) | @getshort(../config/readonly-property.md) |

‎docs/api/overview/table-events-overview.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
sidebar_label: Table events overview
3+
title: Table Events Overview
4+
description: You can have Table events overview of JavaScript Pivot in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot.
5+
---
6+
7+
# Table events overview
8+
9+
The [`getTable`](/api/methods/gettable-method) method of the Pivot API allows getting access to the underlying Table widget instance inside Pivot and execute the next Table events:
10+
11+
| Name | Description |
12+
| ------------------------------------------------- | ----------------------------------------------- |
13+
| [](../table/close-row.md) | @getshort(../table/close-row.md) |
14+
| [](../table/export.md) | @getshort(../table/export.md) |
15+
| [](../table/filter-rows.md) | @getshort(../table/filter-rows.md) |
16+
| [](../table/open-row.md) | @getshort(../table/open-row.md) |

‎docs/api/table/close-row.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
sidebar_label: close-row
3+
title: close-row
4+
description: You can learn about the close-row event in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot
5+
---
6+
7+
# close-row
8+
9+
### Description
10+
11+
@short: Fires when closing (collapsing) a row
12+
13+
To trigger the Table event, it's necessary to get access to the underlying Table widget instance inside Pivot via the [`getTable`](/api/methods/gettable-method) method. The tree mode should be enabled via the [`tableShape`](/api/config/tableshape-property) property.
14+
15+
### Usage
16+
17+
```jsx {}
18+
"close-row": ({
19+
id: string | number,
20+
nested?: boolean
21+
}) => boolean|void;
22+
```
23+
24+
### Parameters
25+
26+
The callback of the action takes an object with the following parameters:
27+
28+
- `id` - (required) the id of a row that has nested rows
29+
- `nested` - (optional) if set to **true**, all nested items will be collapsed
30+
31+
:::note
32+
If `id` is set to 0 and `nested` to **true**, all rows in the table will be collapsed
33+
:::
34+
35+
Returning **false** from the event handler will prevent collapsing rows.
36+
37+
### Example
38+
39+
The snippet below demonstrates how to open/close all rows with a button click:
40+
41+
<iframe src="https://snippet.dhtmlx.com/i4mi6ejn?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
42+
43+
**Related article**: [`getTable`](/api/methods/gettable-method)
44+

‎docs/api/table/export.md

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
sidebar_label: export
3+
title: export
4+
description: You can learn about the export event in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot
5+
---
6+
7+
# export
8+
9+
### Description
10+
11+
@short: Fires when exporting data
12+
13+
To trigger the Table event, it's necessary to get access to the Table instance inside Pivot via the [`getTable`](/api/methods/gettable-method) method.
14+
15+
### Usage
16+
17+
```jsx
18+
"export": ({
19+
options: {
20+
format: "csv" | "xlsx",
21+
fileName?: string,
22+
header?: boolean,
23+
footer?: boolean,
24+
download?: boolean,
25+
26+
/* XLSX settings*/
27+
styles?: boolean | {
28+
header?: {
29+
fontWeight?: "bold",
30+
color?: string,
31+
background?: string,
32+
align?: "left"|"right"|"center",
33+
borderBottom?: string,
34+
borderRight?: string,
35+
}
36+
lastHeaderCell?: { /* same as header */ },
37+
cell?: { /* same as header */ };
38+
firstFooterCell?: { /* same as header */ },
39+
footer?: {/* same as header */},
40+
}
41+
cellTemplate?: (value: any, row: any, column: object )
42+
=> string | null,
43+
headerCellTemplate?: (text: string, cell: object, column: object, type: "header"| "footer")
44+
=> string | null,
45+
cellStyle?: (value: any, row: any, column: object)
46+
=> { format: string; align: "left"|"right"|"center" } | null,
47+
headerCellStyle?: (text: string, cell: object, column: object, type: "header"| "footer")
48+
=> { format: string; align: "left"|"right"|"center" } | null,
49+
sheetName?: string,
50+
51+
/* CSV settings */
52+
rows: string,
53+
cols: string,
54+
},
55+
result?: any,
56+
}) => boolean|void;
57+
```
58+
59+
The `export` action of the Table widget has the next parameters that you can configure to your needs:
60+
61+
- `options` - an object with the export options; options differ depending on the format type
62+
- `result` - the result of the exported Excel or CSV data (usually Blob or file depending on the `download` option)
63+
64+
**Common options for both formats ("csv" "xlsx" ):**
65+
66+
- `format` (string) - (optional) the export format that can be "csv" or "xlsx"
67+
- `fileName` (string) - (optional) a file name ("data" by default)
68+
- `header` (boolean) - (optional) defines if a header should be exported (**true** by default)
69+
- `footer` (boolean) - (optional) defines if a footer should be exported (**true** by default)
70+
- `download` (boolean) - (optional) defines whether to download a file. **true** is set by default. If set to **false**, the file will not be downloaded, Excel or CSV data (Blob) will be available as `ev.result`
71+
72+
**Options specific for "xlsx" format:**
73+
74+
- `sheetName` (string) - a name of Excel sheet ( "data" by default)
75+
- `styles` (boolean or object) - if set to **false**, grid will be exported without any styling; can be configured using a hash of style properties:
76+
- `header` - an object with the next settings for header cells:
77+
- `fontWeight` (string) - (optional) can be set to "bold" or if not set, the font will be normal
78+
- `color` (string) - (optional) text color in header
79+
- `background` (string) - (optional) background color for header
80+
- `align` - (optional) text alignment that can be "left"|"right"|"center". If not set, alignment set in Excel will be applied
81+
- `borderBottom` (string) - (optional) the style of the bottom border
82+
- `borderRight` (string) - (optional) the style of the right border (e.g., *borderRight: "0.5px solid #dfdfdf"* )
83+
- `lastHeaderCell` - style properties for the last row of header cells. Properties are the same as for *header*
84+
- `cell` - style properties for body cells.Properties are the same as for *header*
85+
- `firstFooterCell` - style properties for the first row of footer cells. Properties are the same as for *header*
86+
- `footer` - style properties for footer cells. Properties are the same as for *header*
87+
- `cellTemplate` - a function to customize the export value of each cell. It takes the value, row, and column objects as parameters and returns the custom value to be exported
88+
- `headerCellTemplate` - a function that customizes the value of a header or footer cell during export. It is called with the text, header cell object, column object, and cell type ("header" or "footer"). This allows users to modify the exported header/footer values
89+
- `cellStyle` - a function that allows customizing the style and format of individual cells during export. It takes the value, row, and column objects as parameters and should return an object with style properties (e.g., alignment or format)
90+
- `headerCellStyle` - similar to cellStyle, but specifically for the header and footer cells. This function takes the text, header cell object, column object, and type ("header" or "footer") and returns style properties
91+
:::note
92+
By default, for the "xlsx" format, date and number fields are exported as raw values with default format or the format defined via the [`fields`](/api/config/fields-property) property. But if a template is defined for a field (see the [`tableShape`](/api/config/tableshape-property) property), it exports the rendered value defined by that template. In case both the template and `format` are set, the template settings will override the format ones.
93+
:::
94+
95+
**Options specific for "csv" format:**
96+
97+
- `rows` (string) - (optional) rows delimiter, "\n" by default
98+
- `cols` (string) - (optional) columns delimiter, "\t" by default
99+
100+
## Example
101+
102+
In this snippet you can see how to export data:
103+
104+
<iframe src="https://snippet.dhtmlx.com/zjuloqxd?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
105+
106+
**Related articles**:
107+
- [`getTable`](/api/methods/gettable-method)
108+
- [Exporting data](/guides/exporting-data)
109+
- [Date formatting](/guides/localization#date-formatting)
110+

‎docs/api/table/filter-rows.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
sidebar_label: filter-rows
3+
title: filter-rows
4+
description: You can learn about the filter-rows event in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot
5+
---
6+
7+
# filter-rows
8+
9+
### Description
10+
11+
@short: Fires when filtering data
12+
13+
To trigger the Table event, it's necessary to get access to the Table instance inside Pivot via the [`getTable`](/api/methods/gettable-method) method.
14+
15+
### Usage
16+
17+
```jsx {}
18+
"filter-rows": ({
19+
filter?: any
20+
}) => boolean|void;
21+
```
22+
23+
### Parameters
24+
25+
The callback of the action takes an object with the following parameters:
26+
27+
- `filter` - (optional) any filtering function that takes each item from the data array and returns **true** or **false** for each item
28+
29+
### Example
30+
31+
The snippet below demonstrates how to filter data by input value:
32+
33+
<iframe src="https://snippet.dhtmlx.com/s7tc9g4z?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
34+
35+
36+
**Related article**: [`getTable`](/api/methods/gettable-method)
37+

‎docs/api/table/open-row.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
sidebar_label: open-row
3+
title: open-row
4+
description: You can learn about the close-row event in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot
5+
---
6+
7+
# open-row
8+
9+
### Description
10+
11+
@short: Fires when opening (expanding) a row
12+
13+
To trigger the Table event, it's necessary to get access to the Table instance inside Pivot via the [`getTable`](/api/methods/gettable-method) method. The tree mode should be enabled via the [`tableShape`](/api/config/tableshape-property) property.
14+
15+
### Usage
16+
17+
```jsx {}
18+
"open-row": ({
19+
id: string | number,
20+
nested?: boolean
21+
}) => boolean|void;
22+
```
23+
24+
### Parameters
25+
26+
The callback of the action takes an object with the following parameters:
27+
28+
- `id` - (required) the id of a row that have nested rows
29+
- `nested` - (optional) if set to **true**, all nested items will be expanded
30+
31+
:::note
32+
If `id` is set to 0 and `nested` to **true**, all rows in the table will be expanded
33+
:::
34+
35+
### Example
36+
37+
### Example
38+
39+
The snippet below demonstrates how to open/close all rows with a button click:
40+
41+
<iframe src="https://snippet.dhtmlx.com/i4mi6ejn?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
42+
43+
**Related article**: [`getTable`](/api/methods/gettable-method)

‎docs/guides/configuration.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -513,7 +513,7 @@ const table = new pivot.Pivot("#root", {
513513
514514
## Expanding/collapsing all rows
515515
516-
To expand/collapse all rows, the **tree** mode should be enabled via the [`tableShape`](/api/config/tableshape-property) property and you should use the [`render-table`](/api/events/render-table-event) event that allows changing configuration settings, namely, making data rows expand or collapse (via the `row.open` parameter of the [`config`](/api/config/config-property) object).
516+
To expand/collapse all rows, the **tree** mode should be enabled via the [`tableShape`](/api/config/tableshape-property) property and you should use the [`close-row`](/api/table/close-row) and [`open-row`](/api/table/open-row) events of the Table widget getting access to its API via the [`getTable`](/api/methods/gettable-method) method.
517517
518518
The example below shows how to expand/collapse all data rows with the button click in the table tree mode.
519519

0 commit comments

Comments
 (0)