Html Grid

Set the filterable property of the jqxGrid. Author: http://jqwidgets.com

by txhi

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>

CSS

.jqx-grid-cell
       {
            border-right-color: transparent !important;
       }

JavaScript

var data = generatedata(10);
var source = {
  localdata: data,
  datafields: [
    {
      name: 'check',
      type: 'boolean'
    }, {
      name: 'productname',
      type: 'string'
    }],
  datatype: "array"
};

var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid({
  width: 550,
  source: dataAdapter,
  autoheight: true,
  editable: true,
  showheader: false,
  selectionmode: 'singlerow',
  columns: [
    {
      text: '', datafield: 'check', columntype: 'checkbox', width: 25
    },
    {
      text: 'Product', datafield: 'productname', editable: false
    }
  ]
});