jQuery Grid

Set the altrows 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://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id="grid">
    </div>
    <br />
    <div id="top">Add New Row to Top</div>
    <div id="bottom">Add New Row to Bottom</div>

JavaScript

var data = generatedata(20);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'name', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var getSourceAdapter = function (name) {
                var source =
                {
                    localdata: data,
                    datafields:
                    [
                        { name: 'name', type: 'string' },
                        { name: 'productname', type: 'string' }
                    ],
                    datatype: "array"
                };
                var fields = new Array();
                fields.push(name);
                var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true, autoSort: true, uniqueDataFields: fields, autoSortField: name });
                return dataAdapter.records;
            }
            $("#grid").jqxGrid(
            {
                width: 800,
                filterable: true,
                source: dataAdapter,
                showeverpresentrow: true,
                everpresentrowposition: "top",
                editable: true,
                everpresentrowactionsmode: "columns",
                columns: [
                  {
                      text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215,
                      createEverPresentRowWidget: function (datafield, htmlElement, popup, addCallback) {
                          var inputTag = $("<input style='box-sizing: border-box; border: none;'/>").appendTo(htmlElement);
                          inputTag.jqxInput({...