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:

  1. List of options that define the grid view and functionality
  2. List of options that apply to the entire component
  3. How to set options for a specific report
  4. How to set options for all reports
  5. Example

Grid Options

NameTypeDescription
grid.typeStringSelects the grid form. Supported types are: "compact", "flat" and "classic".
Default value: "compact".
grid.titleStringSpecifies the grid title.
Default value: "".
grid.showFilterBooleanIndicates whether the filtering feature is enabled (true) or not (false).
Default value: true.
grid.showHeadersBooleanIndicates whether the headers on the spreadsheet are visible (true) or not (false).
Default value: true.
grid.showTotalsStringSpecifies 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.showGrandTotalsStringSpecifies 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.showHierarchiesBooleanSpecifies 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.showHierarchyCaptionsBooleanSpecifies whether the hierarchy captions are visible on the grid (true) or not (false).
Default value: true.
grid.showReportFiltersAreaBooleanIndicates whether the report filtering area is visible on the grid (true) or not (false).
Default value: true.

General Options

NameTypeDescription
configuratorActiveBooleanIndicates whether the Field List is closed (false) or opened (true).
Default value: false.
configuratorButtonBooleanIndicates whether the Field List button is visible (true) or not (false). Demo.
Default value: true.
showAggregationsBooleanIndicates if the aggregation selection control for measures is visible in the Field List (true) or not (false).
Default value: true.
showCalculatedValuesButtonBooleanSpecifies whether the “Add calculated value” button is visible in the Field List (true) or not (false).
Default value: true.
drillThroughBooleanSpecifies 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.
showDrillThroughConfiguratorBooleanSpecifies whether the Field List button is visible (true) in the drill-through pop-up window or not (false).
Default value: true.
sortingStringSpecifies 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".
datePatternStringThis 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".
dateTimePatternStringThis 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".
saveAllFormatsBooleanIf 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.
showDefaultSliceBooleanSpecifies 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.
defaultHierarchySortNameStringSpecifies a type of sorting for the hierarchy members. Possible values are "desc" (descending), "asc" (ascending) or "unsorted".
Default value: "asc".
showAggregationLabelsBooleanSpecifies 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:

  1. 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.

  2. 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.

  3. 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 also