Skip to content

Commit 15dbca2

Browse files
tbshag2tbshag2
committed
[update] exporting data updated
1 parent b823178 commit 15dbca2

File tree

1 file changed

+61
-73
lines changed

1 file changed

+61
-73
lines changed

‎docs/guides/exporting-data.md

+61-73
Original file line numberDiff line numberDiff line change
@@ -11,119 +11,107 @@ To export the table data to the XLSX or CSV format, it's necessary to get access
1111
```js
1212
"export": ({
1313
options: {
14-
format: "csv" | "xlsx";
15-
fileName?: string;
16-
sheetName?: string;
17-
header?: boolean;
18-
footer?: boolean;
19-
download?: boolean;
14+
format: "csv" | "xlsx",
15+
fileName?: string,
16+
header?: boolean,
17+
footer?: boolean,
18+
download?: boolean,
2019

2120
/* XLSX settings*/
2221
styles?: boolean | {
2322
header?: {
24-
fontWeight?: "bold";
25-
color?: string;
26-
background?: string;
27-
align?: "left"|"right"|"center";
28-
borderBottom?: string;
29-
borderRight?: string;
23+
fontWeight?: "bold",
24+
color?: string,
25+
background?: string,
26+
align?: "left"|"right"|"center",
27+
borderBottom?: string,
28+
borderRight?: string,
3029
}
31-
lastHeaderCell?: { /* same as header */ };
30+
lastHeaderCell?: { /* same as header */ },
3231
cell?: { /* same as header */ };
33-
firstFooterCell?: { /* same as header */ };
34-
footer?: {/* same as header */};
32+
firstFooterCell?: { /* same as header */ },
33+
footer?: {/* same as header */},
3534
}
3635
cellTemplate?: (value: any, row: any, column: object )
37-
=> string | null;
36+
=> string | null,
3837
headerCellTemplate?: (text: string, cell: object, column: object, type: "header"| "footer")
39-
=> string | null;
38+
=> string | null,
4039
cellStyle?: (value: any, row: any, column: object)
41-
=> { format: string; align: "left"|"right"|"center" } | null;
40+
=> { format: string; align: "left"|"right"|"center" } | null,
4241
headerCellStyle?: (text: string, cell: object, column: object, type: "header"| "footer")
43-
=> { format: string; align: "left"|"right"|"center" } | null;
42+
=> { format: string; align: "left"|"right"|"center" } | null,
43+
sheetName?: string,
4444

4545
/* CSV settings */
46-
rows: string;
47-
cols: string;
46+
rows: string,
47+
cols: string,
4848
},
49-
result?: any;
49+
result?: any,
5050
}) => boolean|void;
5151
```
5252

5353
The `export` action of the Table widget has the next parameters that you can configure to your needs:
5454

55-
- `options` - an object with the export options; options differ depending on the format type:
55+
- `options` - an object with the export options; options differ depending on the format type
56+
- `result` - the result of the exported Excel or CSV data (usually Blob or file depending on the `download` option)
57+
58+
**Common options for both formats ("csv" "xlsx" ):**
59+
60+
- `format` (string) - (optional) the export format that can be "csv" or "xlsx"
61+
- `fileName` (string) - (optional) a file name ("data" by default)
5662
- `header` (boolean) - (optional) defines if a header should be exported (**true** by default)
5763
- `footer` (boolean) - (optional) defines if a footer should be exported (**true** by default)
58-
- `download` (boolean) - (optional) defines whether to download a file. **true** is set by default. if set to **false**, the file will not be downloaded, CSV data (Blob) will be available as `ev.result`
59-
- `format` (string) - (optional) the export format that can be "csv" or "xlsx"
60-
**Options for "xlsx" format:**
61-
:::note
62-
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.
63-
:::
64-
- `fileName` (string) - (optional) a name of .xlsx file ("data" by default)
64+
- `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`
65+
66+
**Options specific for "xlsx" format:**
67+
6568
- `sheetName` (string) - a name of Excel sheet ( "data" by default)
66-
- `styles` (boolean or object) - if set to **false**, grid will be exported without any styling; an object includes parameters for custom styles for cells in the header, body, and footer. Can be configured using a hash of style properties:
67-
- header - style properties for header cells with the next properties:
69+
- `styles` (boolean or object) - if set to **false**, grid will be exported without any styling; can be configured using a hash of style properties:
70+
- header - an object with the next settings for header cells:
6871
- `fontWeight` (string) - (optional) can be set to "bold" or if not set, the font will be normal
6972
- `color` (string) - (optional) text color in header
7073
- `background` (string) - (optional) background color for header
71-
- `align` - (optional) text alignment that can be "left"|"right"|"center"; if not set, alignment set in Excel will be applied
74+
- `align` - (optional) text alignment that can be "left"|"right"|"center". If not set, alignment set in Excel will be applied
7275
- `borderBottom` (string) - (optional) the style of the bottom border
7376
- `borderRight` (string) - (optional) the style of the right border (e.g., *borderRight: "0.5px solid #dfdfdf"* )
74-
- lastHeaderCell - style properties for the last row of header cells; properties are the same as for *header*
75-
- cell - style properties for body cells; properties are the same as for *header*
76-
- firstFooterCell - style properties for the first row of footer cells; properties are the same as for *header*
77-
- footer - style properties for footer cells; properties are the same as for *header*
78-
- `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;
79-
- `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.
77+
- lastHeaderCell - style properties for the last row of header cells. Properties are the same as for *header*
78+
- cell - style properties for body cells.Properties are the same as for *header*
79+
- firstFooterCell - style properties for the first row of footer cells. Properties are the same as for *header*
80+
- footer - style properties for footer cells. Properties are the same as for *header*
81+
- `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
82+
- `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
8083
- `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)
8184
- `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
8285
- `header` (boolean) - (optional) defines if a header should be exported (**true** by default)
8386
- `footer` (boolean) - (optional) defines if a footer should be exported (**true** by default)
84-
- `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 data (Blob) will be available as `ev.result`
85-
**Options for "csv" format:**
86-
- `fileName` (string) - (optional) a file name ("data" by default)
87+
- `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 data (Blob) will be available as `ev.result`
88+
89+
:::note
90+
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.
91+
:::
92+
93+
**Options specific for "csv" format:**
94+
8795
- `rows` (string) - (optional) rows delimiter, "\n" by default
8896
- `cols` (string) - (optional) columns delimiter, "\t" by default
89-
- `result` - the exported data result (usually Blob or file depending on the `download` option)
9097

91-
In the example below we get access to the Table instance and trigger the `export`action on the button click using the [`api.exec()`](/api/internal/exec-method) method.
98+
In the example below we get access to the Table instance and trigger the `export`action using the [`api.exec()`](/api/internal/exec-method) method.
9299

93100
~~~jsx
94-
const table = new pivot.Pivot("#root", {
95-
fields,
96-
data: dataset,
97-
config: {
98-
rows: ["studio", "genre"],
99-
columns: [],
100-
values: [
101-
{
102-
id: "title",
103-
method: "count"
104-
},
105-
{
106-
id: "score",
107-
method: "max"
108-
}
109-
]
110-
}
111-
});
112-
113-
function toCSV() {
114-
table.api.getTable().exec("export", {
101+
const widget = new pivot.Pivot("#root", { /*setting*/});
102+
widget.api.getTable().exec("export", {
115103
options: {
116104
format: "csv",
117105
cols: ";"
118106
}
119-
});
120-
}
121-
122-
const exportButton = document.createElement("button");
123-
exportButton.addEventListener("click", toCSV);
124-
exportButton.textContent = "Export";
125-
126-
document.body.appendChild(exportButton);
107+
});
108+
widget.api.getTable().exec("export", {
109+
options: {
110+
format: "xlsx",
111+
fileName: "My Report",
112+
sheetName: "Quarter 1",
113+
}
114+
});
127115
~~~
128116

129117
## Example

0 commit comments

Comments
 (0)