WebPivotTable use options internally to control its look and feels and behaviours. Change any of these options will trigger WebPivotTable to refresh and the changes will take effect immediately.

Setting these options is the major mechanism to customize WebPivotTable.

How To Set Options?

There are two ways to set options:

• Passing options as attribute of web-pivot-table tag

  <web-pivot-table
    options='{"localeFilePath": "./lang/", "locale":"en", "leavePageWarning": 0}'>
  </web-pivot-table>

Since attribute of HTML tag or custom element can only be a string, we need stringify options when we passing it this way. WebPivotTable will convert this string to javascript object and deeply merge it into default options.

It is quite easy to make mistake when write options like this, so it might not a good idea to set complicate options this way. But if we are using WebPivotTable together with some javascript framework, like React and Vue, we can pass javascript object as props and in that case, passing complicate options this way is not an issue.

• Calling setOptions API

  Instead of passing options as attribute of web-pivot-tab tag, we can also set options by calling setOptions API after WebPivotTable was created on page.

    var wpt = document.getElementsByTagName('web-pivot-table')[0];
  
    wpt.$eventBus.$emit('setOptions', {
      localeFilePath: "./lang/",
      locale: "en",
      leavePageWarning: 0
    });
  

  Since we can pass javascript object as parameters of setOptions API and it will be deeply merged into default options, this is a better way to set complicate options.

  `setOption` API is one of serveral APIs which are availabe on both Current release and current release.

`leavePageWarning`

If we set it to true, it will give end users a chance to save their operations before they leave.

This dialog is a system dialog of browsers, different browsers may have different style of dialogs. The prompt message comes from language file Msg_LeavingPage.

`locale`

setLocale API will change this option as well.

`localeFilePath`

`availableLocales`

Default availableLocales:

  availableLocales: [{
    value: 'en', abbr: 'EN', label:'Lbl_English', attach:" ( english ) "
  },{
    value: 'zh-CN', abbr: 'CN', label:'Lbl_Chinese', attach:" ( 中文 ) "
  },{
    value: 'de', abbr: 'DE', label:'Lbl_German', attach:" ( deutsch ) "
  },{
    value: 'tr-TR', abbr: 'TR', label:'Lbl_Turkish', attach:" ( türk ) "
  },{
    value: 'es', abbr: 'ES', label:'Lbl_Spanish', attach:" ( español ) "
  },{
    value: 'pt', abbr: 'PT', label:'Lbl_Portuguese', attach:" ( português ) "
  },{
    value: 'it', abbr: 'IT', label:'Lbl_Italian', attach:" ( italiano ) "
  // },{
  //   value: 'fr', abbr: 'FR', label:'Lbl_French', attach:" ( français ) "
  // },{
  //   value: 'ar', abbr: 'AR', label:'Lbl_Arabic', attach:" ( العربية ) "
  // },{
  //   value: 'ru-RU', abbr: 'RU', label:'Lbl_Russian', attach:" ( русский ) "
  // },{
  //   value: 'nl', abbr: 'NL', label:'Lbl_Dutch', attach:" ( Nederlands ) "
  // },{
  //   value: 'el', abbr: 'EL', label:'Lbl_Greek', attach:" ( Ελληνικά ) "
  // },{
  //   value: 'he', abbr: 'HE', label:'Lbl_Hebrew', attach:" ( עִבְרִית ) "
  // },{
  //   value: 'hi', abbr: 'HI', label:'Lbl_Hindi', attach:" ( हिन्दीة ) "
  // },{
  //   value: 'hu', abbr: 'HU', label:'Lbl_Hungarian', attach:" ( magyar ) "
  // },{
  //   value: 'sv', abbr: 'SV', label:'Lbl_Swedish', attach:" ( svenska ) "
  // },{
  //   value: 'ko', abbr: 'KO', label:'Lbl_Korean', attach:" ( 한국어 ) "
  // },{
  //   value: 'ja', abbr: 'JA', label:'Lbl_Japanese', attach:" ( 日本語 ) "
  // },{
  //   value: 'vn', abbr: 'VN', label:'Lbl_Vietnamese', attach:" ( Tiếng Việt ) "
  }]

Please reference Internationalization for more details.

`server`

`limit`

`smallScreenBreakpoint`

`mediumScreenBreakpoint`

`navigationPanelWidth`

`decimalPoint`

`thousandsSep`

`defaultToDistinctCount`

`drillThroughBySingleClick`

`deferLayoutExcludeFilter`

`defaultValueFormat`

`uiFlags`

`styles`

`fileLinks`

  [
    {
      type: WptConstants.FORMAT_WPT,
      url: "https://webpivottable.com/testfiles/file9.wpt",
      label: "Test file 9 (olap mode)"
    },{
      type: WptConstants.FORMAT_WPT,
      url: "https://webpivottable.com/testfiles/file8.wpt",
      label: "Test file 8 (memory mode)"
    },{
      type: WptConstants.FORMAT_CSV,
      url: "https://webpivottable.com/testfiles/example.csv",
      label: "USA Selection Poll Data (Total 4,000 records)"
    },{
      type: WptConstants.FORMAT_CSV,
      url: "https://webpivottable.com/testfiles/sales.csv",
      label: "Sales Sample Data (Total 2,823 records)"
    },{
      type: WptConstants.FORMAT_CSV,
      url: "https://webpivottable.com/testfiles/FL_insurance.csv",
      label: "Florida Insurance Data (Total 36,634 records)"
    },{
      type: WptConstants.FORMAT_EXCEL,
      url: "https://webpivottable.com/testfiles/example.xls",
      label: "USA Selection Poll Data (Total 4,000 records)"
    },{
      type: WptConstants.FORMAT_EXCEL,
      url: "https://webpivottable.com/testfiles/sales.xls",
      label: "Sales Sample Data (Total 2,823 records)"
    },{
      type: WptConstants.FORMAT_EXCEL,
      url: "https://webpivottable.com/testfiles/FL_insurance.xls",
      label: "Florida Insurance Data (Total 36,634 records)"
    },{
      type: WptConstants.FORMAT_EXCEL,
      url: "https://webpivottable.com/testfiles/example.xlsx",
      label: "USA Selection Poll Data (Total 4,000 records)"
    },{
      type: WptConstants.FORMAT_EXCEL,
      url: "https://webpivottable.com/testfiles/sales.xlsx",
      label: "Sales Sample Data (Total 2,823 records)"
    },{
      type: WptConstants.FORMAT_EXCEL,
      url: "https://webpivottable.com/testfiles/FL_insurance.xlsx",
      label: "Florida Insurance Data (Total 36,634 records)"
    },{
      type: WptConstants.FORMAT_WSWPT,
      url: "https://webpivottable.com/testfiles/sample91.wpt",
      label: "Predefined small CSV WebPivotTable file"
    },{
      type: WptConstants.FORMAT_WSDATA,
      url: "https://demo.webpivottable.com/wpt/wsSample",
      label: "Simple Sample Web Service"
    },{
      type: WptConstants.FORMAT_GSS,
      url: "https://docs.google.com/spreadsheet/pub?key=0Alkl5EEsxBwBdDFLV2Q4a1NWMmw1TXZBRlFMZ1Rxd0E&output=html",
      label: "USA Selection Poll Data (Total 4,000 records)"
    },{
      type: WptConstants.FORMAT_GSS,
      url: "https://docs.google.com/spreadsheet/pub?key=0Alkl5EEsxBwBdHJMOTh4Sm1BSFlDYXRwVW5lc0xuMVE&output=html",
      label: "Sales Sample Data (Total 2,823 records)"
    },{
      type: WptConstants.FORMAT_OLAP,
      url: "http://olap.flexmonster.com/olap/msmdpump.dll",
      label: "Sample Microsoft Analysis Service"
    },{
      type: WptConstants.FORMAT_OLAP,
      url: "http://sampledata.infragistics.com/data/msmdpump.dll",
      label: "Sample Microsoft Analysis Service 1"
    },{
      type: WptConstants.FORMAT_OLAP,
      url: "http://52.4.22.157:8080/mondrian/xmla",
      label: "Sample Mondrian OLAP Server"
    },{
      type: WptConstants.FORMAT_OLAP,
      url: "http://52.4.22.157:8282/icCube/xmla",
      label: "Sample icCube OLAP Server"
    }
  ]

`customHandlers` Available in the current release.

This custom Handlers only available in current release.

These options only enable/disable custom handlers, the real custom handler should be passing in event listener. Please see How to listen To Events for more details.

`customButtons` Available in the current release.

Each customButton is an object:

  [ 
    {
      position: "left",
      type: "button",
      label: "Button1",
      labelTranslation: 0,
      title: "Custom button 1",
      titleTranslation: 0,
      style: "color: #000; font-weight: 300;",
      eventName: "customButton1"
    },
    {
      position: "center",
      type: "button",
      label: "Button2",
      labelTranslation: 0,
      title: "",
      titleTranslation: 0,
      style: "color: #000; font-weight: 300;",
      eventName: "customButton2"
    },
    {
      position: "right",
      type: "select",
      label: "Please select",
      labelTranslation: 0,
      style: "width:200px; margin-top: 1px;",
      value: "value2",
      options: [{
        label: "label1", value: "value1"
      }, {
        label: "label2", value: "value2"
      }, {
        label: "label3", value: "value3"
      }],
      eventName: "customButton3"
    }
  ]

This options only add button/select to top bar, the click handler for button and change handler for select should be passing in event listener. Please see How to listen To Events for more details.

For example:

  wpt.$eventBus.$on('customButton1', function(payload){
    console.log("custom Button 1 click", payload);
  });

  wpt.$eventBus.$on('customButton2', function(payload){
    console.log("custom Button 2 click", payload);
  });

  wpt.$eventBus.$on('customButton3', function(payload){
    console.log("custom Button 3 (select) changed", payload);
  });

`filestack`

key: "A4bieoUsyR4yBrNPkFIvrz" //demo.webpivottable.com

`source`

  source: {                  // Default options for each new source
    navigationPanel: {          // Navigation Panel
      show: 1,                  // show/hide: 1/0
      position:'right',         // position: 'left', 'top', 'right', 'bottom'
      stacked: 0,               // stack fields area or not: 1/0
      width: 300,               // width, only for left and right
      height: 200               // height, only for top and bottom
    },
    fieldsListFilter: "",
    fieldsListSort: 0,          // -1 descend, 1- ascend, 0-no sort
    grid: {
      cellWidth: 120,
      cellHeight: 21
    }
  }

`report`

  report: {                  // Default options for each new report
    navigationPanel: {          // Navigation Panel
      show: 1,                  // show/hide: 1/0
      position:'right',         // position: 'left', 'top', 'right', 'bottom'
      stacked: 0,               // stack fields area or not: 1/0
      width: 300,               // width, only for left and right
      height: 200               // height, only for top and bottom
    },
    width: 1000,
    header: {
      width: {
        value: 100,
        measure: "%"   // %, px,
      },
      height: {
        auto: true,
        value: 100,
        measure: "px"
      },
      padding: {
        top: 10,
        right: 10,
        bottom: 10,
        left: 10
      },
      title: {
        enabled: true,
        align: 'center',          // left, center, right
        margin: {
          top: 10,
          right: 10,
          bottom: 10,
          left: 10
        },
        fontSize: 28,
        fontWeight: "bold"
      }

    },

    component: {
      width: {
        value: 50,
        measure: "%"   // %, px,
      },
      height: {
        auto: true,
        value: 300,
        measure: "px"
      },
      title: {
        enabled: true,
        align: 'center',            // left, center, right
        margin: {
          top: 10,
          right: 10,
          bottom: 10,
          left: 10
        },
        fontSize: 24,
        fontWeight: "bold"
      },
      content:{
        align: 'center',            // left, center, right
        margin: {
          top: 10,
          right: 10,
          bottom: 10,
          left: 10
        }
      }
    }
  },

`sheet`

  sheet:{                    // Default options for each new sheet

    sheet: {
      chartFirst: 0,          // show chart at top/left? 0/1
      pivotLayout: WptConstants.PIVOT_LAYOUT_TILE_VERTICAL,
                              // Pivot Grid and chart layout
                              // 0 -- tile horizontal, 1 -- tile vertical,
                              // 2 -- grid only,  3 -- chart only
      expandRows: 1,          // Expand/collapse All rows
      expandCols: 1,          // Expand/Collapse All columns
      showRowTotals: 1,
      showColTotals: 1,
      showRowSubtotals: 1,
      showColSubtotals: 1,

      navigationPanel: {          // Navigation Panel
        show: 1,                  // show/hide: 1/0
        position:'right',         // position: 'left', 'top', 'right', 'bottom'
        stacked: 0,               // stack fields area or not: 1/0
        width: 300,               // width, only for left and right
        height: 200               // height, only for top and bottom
      },
      deferLayoutUpdate: false,
      fieldsListFilter: "",
      fieldsListSort: 0,          // -1 descend, 1- ascend, 0-no sort
    },

    grid: {
      showSigns: 1,
      showEmptyAsZero: 0,
      compactForm: 1,
      rowHeaderWidth: 200,
      cellWidth: 100,
      cellHeight: 20,
      theme: 'wpt-default',
      noFixedColumns: 0,
      cellStyle: {
        columnHeader: {
          textAlign: 'center',
          backgroundColor: '#bfd6eb',
          fontWeight: 'bold',
        },
        compoundColumn: {
          verticalAlign: "top",
          textAlign: 'left',
          backgroundColor: '#bfd6eb',
          fontWeight: 'bold',
        },
        rowHeader: {
          textAlign: 'left',
          backgroundColor: '#bfd6eb',
          fontWeight: 'bold',
        },
        compoundRow: {
          verticalAlign: "top",
          textAlign: 'left',
          backgroundColor: '#bfd6eb',
          fontWeight: 'bold',
        },
        totalCell: {
          textAlign: 'right',
          backgroundColor: '#72d2df',
        },
        subtotalCell: {
          textAlign: 'right',
          backgroundColor: '#d2e9e9',
        },
        dataCell: {
          textAlign: 'right',
          backgroundColor: '#eee',
        },
        noDataCell: {
          backgroundColor: "#ddd",
        }
      },
    },

    chart: {
      width: 500,
      height: 300,
      combined: true,

      high:{
        theme: 'default', //default, grid, gray, skies, drak-blue, drak-green
        chart:{
          type:'column',  //column, bar, line, spline, area, areaspline, pie
          options3d: {
            enabled: false,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
          }
        },
        credits: {
          enabled:false
        },
        exporting: {
          enabled:false
        },
        navigation:{
          buttonOptions:{
            align: 'right',   // left, center, right
            verticalAlign: 'top' // top, middle, bottom
          }
        },
        legend: {
          enabled: true,
          floating: false,
          layout: 'vertical',  //horizontal, vertical
          align: 'right',      // left, center, right
          verticalAlign: 'middle', // top, middle, bottom
          reversed: false
        },
        tooltip:{
          enabled: true,
          shadow: true
        },
        plotOptions: {
          series:{
            stacking: null, //null, 'normal', 'percent'
            dataLabels: {
              enabled: false,
              align:'center',  // left, center, right
              rotation:0    // 0 -- 360
            }
          }
        },
        xAxis: {
          labels:{
            enabled: true,
            align:'left',  // left, center, right
            rotation:45    // 0 -- 360
          }
        }
      }
    }
  }
}