Html Grid

Set the filterable property of the jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<button id="click">get selected cells</button>

<br><br>

<div id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;"></div>

JavaScript

// prepare sample data
var data = new Array();
var countries =
    [
      "Germany", "France", "United States", "Italy", "Spain", "Finland", "Canada", "Japan", "Brazil", "United Kingdom", "China", "India", "South Korea", "Romania", "Greece"
    ];
var dataPoints =
    [
      "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
    ];
for (var i = 0; i < countries.length * 2; i++) {
  var row = {};
  var value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
  row["country"] = countries[i % countries.length];
  row["value"] = value;
  data[i] = row;
}
// create a data source and data adapter
var source =
    {
      localdata: data,
      datatype: "array",
      datafields:
      [
        { name: 'country', type: 'string' },
        { name: 'value', type: 'number' }
      ]
    };
var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
var pivotDataSource = new $.jqx.pivot(
  dataAdapter,
  {
    pivotValuesOnRows: true,
    rows: [{ dataField: 'country', width: 190 }],
    columns: [],
    values: [
      { dataField: 'value', width: 200, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
      { dataField: 'value', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
      { dataField: 'value', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
    ]
  });
// create a pivot grid
$('#divPivotGrid').jqxPivotGrid({
  source: pivotDataSource,
  treeStyleRows: true,
  autoResize: false,
  multipleSelectionEnabled: true
});

$('#click').jqxButton();
$('#click').click(() => {
  var pivotCells = $('#divPivotGrid').jqxPivotGrid('getPivotCells');
  var selectedCells = pivotCells.getSelectedCells();
 ...