Display grand totals at the bottom of the flat table

Options

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to display grand totals at the bottom of the flat table</h2>
  <p>
    By default, grand totals are displayed at the top of the flat table. To
    display grand totals at the bottom, set the
    <a
      href="https://www.flexmonster.com/api/options-object/#grandTotalsPosition"
      target="_blank"
      >options.grid.grandTotalsPosition</a
    >
    property to <code>"bottom"</code>.
  </p>
  <p>
    <a href="https://www.flexmonster.com/doc/options/" target="_blank"
      >Learn more about Flexmonster's options in our documentation</a
    >.
  </p>
</div>

<button onclick="setGrandTotalsPosition('top')">
  Show grand totals at the top
</button>
<button onclick="setGrandTotalsPosition('bottom')">
  Show grand totals at the bottom
</button>

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

CSS

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

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 400,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      columns: [
      	{
        	uniqueName: "Color"
      	}
      ],
      rows: [
      	{
        	uniqueName: "Country"
      	}, 
        {
        	uniqueName: "[Measures]"
      	}
      ],
      measures: [
      	{
        	uniqueName: "Price",
        	format: "currency",
        	filter: {
          	measure: {
            	uniqueName: "Price",
              aggregation: "sum"
            },
            query: {
            	top: 9
            }
          }
      	}, 
        {
        	uniqueName: "Discount",
        	format: "currency"
      	}
      ],
    },
    options: {
      grid: {
        type: "flat",
      	grandTotalsPosition: "bottom"
      }
    }
  }
});

function setGrandTotalsPosition(position) {
	pivot.setOptions({
  	grid: {
    	grandTotalsPosition: position
    }
  });
  pivot.refresh();
}