Options showTotals and showGrandTotals

Options

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div>
  <p>
    Select the type of grid to see how different configs for totals affect the layout:
  </p>
  <div class="buttons-container">
    <div class="select-container compact">
      <span class="text"><b>Grid type:</b></span>
      <select id="select-grid-type">
        <option value="compact">Compact view</option>
        <option value="classic" selected>Classic (tabular) view</option>
        <option value="flat">Flat view</option>
      </select>
    </div>

    <div class="buttons-row no-space">
      <div class="select-container compact">
        <span class="text"><b>Totals:</b></span>
        <select id="select-totals">
          <option value="on" selected>Rows and Columns</option>
          <option value="rows">Rows only</option>
          <option value="columns">Columns only</option>
          <option value="off">Off</option>
        </select>
      </div>

      <div class="select-container compact">
        <span class="text"><b>Grand totals:</b></span>
        <select id="select-grand-totals">
          <option value="on" selected>Rows and Columns</option>
          <option value="rows">Rows only</option>
          <option value="columns">Columns only</option>
          <option value="off">Off</option>
        </select>
      </div>
    </div>
  </div>
</div>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

.buttons-row.no-space {
  justify-content: flex-start;
  column-gap: 40px;
  margin-top: 0;
}

.buttons-row.no-space > .select-container.compact {
  margin-top: 5px;
}

JavaScript

let pivot = new Flexmonster({
  container: '#pivot-container',
  componentFolder: 'https://cdn.flexmonster.com/',
  height: 600,
  toolbar: true,
  report: {
    dataSource: { filename: 'data/data.csv' },
    slice: {
      rows: [{ uniqueName: 'Country' }, { uniqueName: 'Color' }],
      columns: [
        { uniqueName: 'Category' },
        { uniqueName: 'Business Type' },
        { uniqueName: '[Measures]' },
      ],
      measures: [{ uniqueName: 'Price', aggregation: 'sum' }],
      expands: {
        rows: [{ tuple: ['country.[australia]'] }],
        columns: [{ tuple: ['category.[accessories]'] }],
      },
    },
    options: {
      grid: { type: 'classic', showTotals: 'on', showGrandTotals: 'on' },
    },
  },
});

document
  .getElementById('select-grid-type')
  .addEventListener('change', function () {
    setGridOption('type', this.value);
  });

document
  .getElementById('select-totals')
  .addEventListener('change', function () {
    setGridOption('showTotals', this.value);
  });

document
  .getElementById('select-grand-totals')
  .addEventListener('change', function () {
    setGridOption('showGrandTotals', this.value);
  });

function setGridOption(option, value) {
  pivot.setOptions({ viewType: 'grid', grid: { [option]: value } });
  pivot.refresh();
}