Documentation menu
Options Object
An options
object defines the view and functionality available for users. Popular use cases:
- Enable/disable filtering and sorting
- Show/hide subtotals and grand totals
- Define the formatting pattern for date and time
The options
object consists of grid options and general options. You can find more details in the following sections:
- List of options that define the grid view and functionality
- List of options that apply to the entire component
- How to set options for a specific report
- How to set options for all reports
- Example
Grid Options
Name | Type | Description |
---|---|---|
grid.type | String | Selects the grid form. Supported types are: "compact" , "flat" and "classic" .Default value: "compact" . |
grid.title | String | Specifies the grid title. Default value: "" . |
grid.showFilter | Boolean | Indicates whether the filtering feature is enabled (true ) or not (false ).Default value: true . |
grid.showHeaders | Boolean | Indicates whether the headers on the spreadsheet are visible (true ) or not (false ).Default value: true . |
grid.showTotals | String | Specifies how the subtotals are shown: either only for the columns ("columns" ), only for the rows ("rows" ) or for the columns and rows ("on" ). To hide the subtotals completely, set this property to "off" .Default value: "on" . |
grid.showGrandTotals | String | Specifies how the grand totals are shown: either only for columns ("columns" ), only for the rows ("rows" ) or for the rows and columns ("on" ). To hide grand totals completely, set this property to "off" .Default value: "on" . |
grid.showHierarchies | Boolean | Specifies how multi-level hierarchies are shown on the grid: either with the icon on the left (false ) or with the link on the right (true ).Default value: true . |
grid.showHierarchyCaptions | Boolean | Specifies whether the hierarchy captions are visible on the grid (true ) or not (false ).Default value: true . |
grid.showReportFiltersArea | Boolean | Indicates whether the report filtering area is visible on the grid (true ) or not (false ).Default value: true . |
General Options
Name | Type | Description |
---|---|---|
configuratorActive | Boolean | Indicates whether the Field List is closed (false ) or opened (true ).Default value: false . |
configuratorButton | Boolean | Indicates whether the Field List button is visible (true ) or not (false ). Demo.Default value: true . |
showAggregations | Boolean | Indicates if the aggregation selection control for measures is visible in the Field List (true ) or not (false ).Default value: true . |
showCalculatedValuesButton | Boolean | Specifies whether the “Add calculated value” button is visible in the Field List (true ) or not (false ).Default value: true . |
drillThrough | Boolean | Specifies whether the drill-through feature is enabled (true ) or not (false ). The cell can be drilled through by double-clicking the cell.Default value: true . |
showDrillThroughConfigurator | Boolean | Specifies whether the Field List button is visible (true ) in the drill-through pop-up window or not (false ).Default value: true . |
sorting | String | Specifies whether the sorting controls are visible in the columns ("columns" ), rows ("rows" ) or in the columns and rows at the same time ("on" ). The controls can be hidden by setting this parameter to "off" .Default value: "on" . |
datePattern | String | This property is used for formatting of “date string” date fields ("type":"date string" in the JSON data source, the "ds+" prefix in CSV).Default pattern string: "dd/MM/yyyy" . |
dateTimePattern | String | This property is used for formatting “datetime” date fields ("type":"datetime" in the JSON data source, the "dt+" prefix in CSV).Default pattern string: "dd/MM/yyyy HH:mm:ss" . |
saveAllFormats | Boolean | If there are more than 5 formats defined in the report, only the formats for currently displayed measures are saved in the report. Set the saveAllFormats property to true to save all the formats defined in the report.Default value: false . |
showDefaultSlice | Boolean | Specifies whether the default slice can be selected automatically (for cases when the slice is not set in the report). If showDefaultSlice is true , the first hierarchy from the data source is put into the rows and the first measure is put into columns. If showDefaultSlice is false , the grid remains empty.Default value: true . |
defaultHierarchySortName | String | Specifies a type of sorting for the hierarchy members. Possible values are "desc" (descending), "asc" (ascending) or "unsorted" .Default value: "asc" . |
showAggregationLabels | Boolean | Specifies whether the aggregation labels like "Sum of" , "Total Sum of" , etc. are displayed in the row and column titles. Aggregation labels can be changed in a JSON localization file.Default value: true . |
How to set options for a specific report
Initially, all the options in a report are set to their default values. Setting options that differ from the defaults can be done in three ways:
- Presetting options in the report. Here is an example of setting a grid type:
{
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
},
options: {
grid: {
type: "classic"
}
}
}Try the CodePen example.
- Using setOptions() and refresh() API calls.
2.1. Here is an example of setting a grid title:
webdatarocks.setOptions({
grid: {
title: "A New Title"
}
});
webdatarocks.refresh();Try the CodePen example.2.2. An example of disabling sorting:
webdatarocks.setOptions({
sorting: "off"
});
webdatarocks.refresh();Try the CodePen example.
- Via the Toolbar. Click the Options tab to change the form of the pivot table or the look of grand totals and subtotals:
How to set options for all reports
To set options for all reports, specify them in the Global Object:
const pivot = new WebDataRocks({ container: "#wdr-component", // Other parameters global: { options: { grid: { showFilter: false, showReportFiltersArea: false, }, configuratorButton: false, drillThrough: false, sorting: "off", }, }, report: { // Your report } });
See an example on CodePen.
Learn more about setting configurations for all reports: Global Object.
Example
A live demo with setting grid options: