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>
<button id="click">click</button>
<br><br><div id="jqxComboBox"></div>

JavaScript

var data = generatedata(5);
var source = {
  localdata: data,
  datafields: [
    {
      name: 'firstname',
      type: 'string'
    }, {
      name: 'lastname',
      type: 'string'
    }],
  datatype: "array"
};

var dataAdapter = new $.jqx.dataAdapter(source);
var theme = 'energyblue';
$("#jqxComboBox").jqxComboBox({
  source: dataAdapter,
  theme: theme,
  width: '200px',
  height: '25px',
  displayMember: 'firstname',
  valueMember: 'lastname',
  selectedIndex: 0
});

var newdata = [];
$('#click').jqxButton({ theme: theme });
$('#click').click(() => {
	data[0].firstname = "Cafe";
  data[1].firstname = "Tea";
  source.localdata = data;
  dataAdapter.dataBind();
});