Html Grid

Set the editable 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>
<div id="divPivotGrid" style="height: 400px; width: 800px; background-color: white;">
</div>

CSS

.jqx-checkbox:focus>.jqx-checkbox-default>div {
  border: 1px solid red;
  border-radius: 2px;
}

JavaScript

$(document).ready(function() {

  var results = [{
      "Hour": "1hour",
      "Date": "2019-05-29",
      "REC_COUNT": "0",
    },
    {
      "Hour": "2hours",
      "Date": "2019-05-30",
      "REC_COUNT": "52",
    },
    {
      "Hour": "3hours",
      "Date": "2019-05-31",
      "REC_COUNT": "10",
    },
    {
      "Hour": "3hours",
      "Date": "2019-05-31",
      "REC_COUNT": "10",
    }
  ];


  // create a data source and data adapter
  var source = {
    localdata: results,
    datatype: "json",
    datafields: [{
        name: 'Hour',
        type: 'string'
      },
      {
        name: 'Date',
        type: 'string'
      },
      {
        name: 'REC_COUNT',
        type: 'number'
      }
    ]
  };
  var dataAdapter = new $.jqx.dataAdapter(source);
  dataAdapter.dataBind();


  var pivotDataSource = new $.jqx.pivot(
    dataAdapter, {
      pivotValuesOnRows: false,
      rows: [{
        dataField: 'Date'
      }],
      columns: [{
        dataField: 'Hour'
      }],
      values: [{
          dataField: 'REC_COUNT',
          'function': 'sum',
          text: 'sum'
        },
        {
          dataField: 'REC_COUNT',
          'function': 'count',
          text: 'count'
        },
      ]
    });
  // create a pivot grid
  $('#divPivotGrid').jqxPivotGrid({
    source: pivotDataSource,
    treeStyleRows: true,
    autoResize: false,
    multipleSelectionEnabled: true
  });
});