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:

See the Pen <a href="https://codepen.io/webdatarocks/pen/oQLGgm/" target="_blank" rel="noopener">Grid Options</a> by WebDataRocks (<a href="https://codepen.io/webdatarocks" target="_blank" rel="noopener">@webdatarocks</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.