Html Grid

Set the filterable 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(10);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     },
     {
         name: 'lastname',
         type: 'string'
     },
     {
         name: 'name',
         type: 'string'
     },  
     {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };

 var dataAdapter = new $.jqx.dataAdapter(source);
 
$("#jqxgrid").jqxGrid(
  {
    width: 850,
    source: dataAdapter,
    filterable: true,
    showfiltercolumnbackground: false,
    // cellValue - cell's current value, row data - row's data, data field - column's data field, filterGroup - group of filters, defaultFilterResult - the built-in boolean evaluated result-
    filter: function(cellValue, rowData, dataField, filterGroup, defaultFilterResult)
    {
        return true;
    },
    selectionmode: 'multiplecellsextended',
    columns: [
      { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },
      {
        text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220
      },
      { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
      { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' },
      { text: 'Qty.', datafield: 'quantity', filtertype: 'number',  cellsalign: 'right' }
    ]
  });