jqxGrid

http://www.jqwidgets.com/

by Justin Peszleny

HTML

<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.bootstrap.css">

<div id="jqxgrid">

JavaScript

$(document).ready(function () {
	var data = [{
  		"Description": "Apple",
      "Quantity": 10,
      "UnitPrice": 1.29,
      "TotalPrice": 12.90
  },
  {
  		"Description": "Apple",
      "Quantity": 10,
      "UnitPrice": 1.29,
      "TotalPrice": 12.90
  },
  {
  		"Description": "Apple",
      "Quantity": 10,
      "UnitPrice": 1.29,
      "TotalPrice": 12.90
  }];

  var source = {
    localdata: data,
    datatype: "json",
    datafields: [
      { name: 'ID', type: 'number' },
      { name: 'Description', type: 'string' },
      { name: 'Quantity', type: 'number' },
      { name: 'UnitPrice', type: 'float' },
      { name: 'TotalPrice', type: 'float' }
    ]
  };
  
  $("#jqxgrid").jqxGrid({
    source: new $.jqx.dataAdapter(source),
    width: '100%',
    autoheight: true,
    autorowheight: true,
    altrows: true,
    theme: 'bootstrap',
    columnsheight: 26,
    rowsheight: 26,
    statusbarheight: 26,
    editable: true,
    selectionmode: 'none',
    showstatusbar: true,
    showaggregates: true,
    columns: [
    	{ text: 'Description', datafield: 'Description' },
      { text: 'Quantity', datafield: 'Quantity', width: 125, cellsalign: 'right', align: 'right' },
      { text: 'Unit Price', datafield: 'UnitPrice', width: 125, cellsformat: 'c2', cellsalign: 'right', align: 'right' },
      { text: 'Total', datafield: 'TotalPrice', width: 125, editable: false, cellsformat: 'c2', aggregates: ['sum'], cellsalign: 'right', align: 'right' }
    ]
	});
  let height = parseInt(document.querySelector(".jqx-rc-all").style.height.slice(0,-2))
  $('#jqxgrid').jqxGrid({ autoheight: false}); 
  $("#jqxgrid").jqxGrid({ height: height-2 });
  $('#jqxgrid').jqxGrid({ autoheight: true}); 
});