Sort multiple columns in the flat view at runtime

Slice configuration

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to sort multiple columns in the flat view at runtime</h2>
  <p>
    In the flat view, you can sort multiple columns either via UI or
    programmatically.
  </p>
  <p>
    To sort multiple columns via UI, press <code>Ctrl</code> 
    (<code>Command</code> on macOS) and click a sorting arrow on each
    column to be sorted.
  </p>
  <p>
    To sort multiple columns programmatically, use the
    <a href="https://www.flexmonster.com/api/setflatsort/" target="_blank"
      >setFlatSort()</a
    > method. It's also possible to preset sorting in the report using the
    <a
      href="https://www.flexmonster.com/api/slice-object/#flatSort"
      target="_blank"
      >slice.flatSort</a
    > property.
  </p>
  <p>
    In the example below, we sort the <code>Category</code> and <code>Price</code> fields.
  </p>
  <p>
    Click the <b>Get Flat Sorting</b> button to output sorting for the flat view
    under the component.
  </p>
  <p>
    <a href="https://www.flexmonster.com/doc/slice/" target="_blank"
    >Visit our docs to learn more about configuring the slice</a>.
  </p>
</div>

<button onclick="setSort()">Set flat sorting</button>
<button onclick="removeSort()">Remove flat sorting</button>
<button onclick="getSort()">Get flat sorting</button>

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

<div class="output" id="output">Output will appear here</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.json"
					},
					slice: {
						rows: [
							{
              	uniqueName: "Category"
              },
              {
              	uniqueName: "Color"
              },
              {
              	uniqueName: "Country"
              }
						],
						columns: [
							{ uniqueName: "[Measures]" }
						],
						measures: [
							{
              	uniqueName: "Price", 
                aggregation: "sum",
                  filter: {
                  measure: {
                    uniqueName: "Price",
                    aggregation: "sum"
                  },
                  query: {
                    top: 9
                  }
         				 }
              },
						]
					},
          options: {
            grid: {
              type: "flat"
            }
          }
				}
		});
    
function setSort() {
	let sort = [
  	{
  		uniqueName: "Category",
    	sort: "desc"
  	},
  	{
    	uniqueName: "Price",
    	sort: "asc"
  	}
  ];
  pivot.setFlatSort(sort);
}

function removeSort() {
	let sort = [
  	{
  		uniqueName: "Category",
    	sort: "undefined"
  	},
  	{
    	uniqueName: "Price",
    	sort: "undefined"
  	}
  ];
  pivot.setFlatSort(sort);
}

function getSort() {
	let flatSort = pivot.getFlatSort();
  showOutput(JSON.stringify(flatSort, null, 2));
}

function showOutput(content) {
  document.getElementById("output").innerText = content;
}