JQuery Grid

Set the virtualmode 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">
<div id='jqxWidget'>
    <div id="jqxgrid"></div>
</div>

JavaScript

const data = [
 {
   firstname: "Andrew",
   lastname: "Davolio",
   productname: "Green Tea",
   price: 2.3
 }, {
   firstname: "George",
   lastname: "Peterson",
   productname: "Ice Tea",
   price: 5
 }, {
   firstname: "Andrew",
   lastname: "Hayden",
   productname: "Black Tea",
   price: 2
 }];

 const source = {
   datatype: "array",
   datafields: [{
       name: 'firstname',
       type: 'string'
     },
     {
       name: 'lastname',
       type: 'string'
     },
     {
       name: 'productname',
       type: 'string'
     },
     {
       name: 'price',
       type: 'number'
     }
   ],
   addrow: function(rowid, rowdata, position, commit) {
     // synchronize with the server - send insert command
     // call commit with parameter true if the synchronization with the server is successful 
     //and with parameter false if the synchronization failed.
     // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
     commit(true);
   },
   deleterow: function(rowid, commit) {
     // synchronize with the server - send delete command
     // call commit with parameter true if the synchronization with the server is successful 
     //and with parameter false if the synchronization failed.
     commit(true);
   },
   updaterow: function(rowid, newdata, commit) {
     // synchronize with the server - send update command
     // call commit with parameter true if the synchronization with the server is successful 
     // and with parameter false if the synchronization failed.
     commit(true);
   },
   totalrecords: data.length
 };

 // load virtual data.
 const rendergridrows = function(params) {
		//Fetch the data from the server and pass it.
   return data;
 }

 const dataAdapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
   width: '80%',
   theme: 'energyblue',
   autoheight: true,
   source: dataAdapter,
   virtualmode: true,
   pageable: true,
   showeverpresentrow: true,
...