Html Grid

Set the showfilterrow 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="jqxgrid"></div>

JavaScript

var data = generatedata(500);
var source = {
  localdata: data,
  datafields: [{
    name: 'firstname',
    type: 'string'
  }, {
    name: 'lastname',
    type: 'string'
  }, {
    name: 'productname',
    type: 'string'
  }, {
    name: 'date',
    type: 'date'
  }, {
    name: 'quantity',
    type: 'number'
  }, {
    name: 'price',
    type: 'number'
  }],
  datatype: "array"
};

var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
  width: 500,
  theme: 'energyblue',
  showfilterrow: true,
  source: adapter,
  editable:true,
  filterable: true,
  sortable: true,
  ready: function () {
    //addfilter();
  },
  autoshowfiltericon: true,
  columns: [{
    text: 'First Name',
    datafield: 'firstname',
    width: 90
  }, {
    text: 'Last Name',
    datafield: 'lastname',
    width: 90
  }, {
    text: 'Unit Price',
    datafield: 'price',
    cellsformat: 'c2', 
    cellsalign: 'right',
    width: 90,
    align: 'right',
    filtertype: 'number',
    //createfilterwidget: function (column, columnElement, widget) {
    //	console.log(1001);
    //  widget.jqxInput({ source: data, width: '250', height: '22px', rtl : true });
    //},
    //columntype: 'numberinput',
    createeditor: function (row, cellvalue, editor) {
      editor.jqxNumberInput({ decimalDigits: 2, spinButtons: false });
    },
    /**/
    cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {     
      console.log(1004);
      if (value < 0) {
        var val = value.toString(); //new variable to take the value as string
        if(val.charAt(0) === "-"){ //checks if it has negative sign
          val = value.toFixed(2);
          val = val.substr(1); //clear out that as it is adding the sign in number string
        }
        var num2 = val.toString().split('.');
        var thousands = num2[0].split('').reverse().join('').match(/.{1,3}/g).join(',');
        var decimals = (num2[1]) ? '.'+num2[1] : '';
        var answer = ...