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="kanban"></div>

CSS

.special {
            color: blue;
            font-size: 10px;
        }

JavaScript

//I am not familiar what is the name of your fields
var request_date = 'request_date';
var due_date = 'due_date';
//Possible values: 'string', 'date', 'number', 'float', 'int' and 'bool'
var date = 'date';
var fields = [
{
    name: "id",
    type: "string"
  },
  {
    name: "status",
    map: "state",
    type: "string"
  },
  {
    name: "text",
    map: "label",
    type: "string"
  },
  {
    name: "tags",
    type: "string"
  },
  {
    name: "color",
    map: "hex",
    type: "string"
  },
  {
    name: "resourceId",
    type: "number"
  },
  {
    name: request_date,
    type: date
  },
  {
    name: due_date,
    type: date
  }
];

var source = {
  localData: [{
      id: "1161",
      state: "new",
      label: "Combine Orders",
      tags: "orders, combine",
      hex: "#5dc3f0",
      resourceId: 3,
      request_date: new Date(2018, 9, 31),
      due_date: new Date(2019, 9, 31)
    },
    {
      id: "1645",
      state: "work",
      label: "Change Billing Address",
      tags: "billing",
      hex: "#f19b60",
      resourceId: 1,
      request_date: new Date(2018, 10, 1),
      due_date: new Date(2019, 10, 1)
    },
    {
      id: "9213",
      state: "new",
      label: "One item added to the cart",
      tags: "cart",
      hex: "#5dc3f0",
      resourceId: 3,
      request_date: new Date(2018, 10, 2),
      due_date: new Date(2019, 10, 1)
    },
    {
      id: "6546",
      state: "done",
      label: "Edit Item Price",
      tags: "price, edit",
      hex: "#5dc3f0",
      resourceId: 4,
      request_date: new Date(2018, 10, 3),
      due_date: new Date(2019, 10, 1)
    },
    {
      id: "9034",
      state: "new",
      label: "Login 404 issue",
      tags: "issue, login",
      hex: "#6bbd49",
      request_date: new Date(2018, 10, 4),
      due_date: new Date(2019, 10, 1)
    }
  ],
  dataType: "array",
  dataFields: fields
};

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

var resourcesAdapterFunc = function() {
  var resourcesSource...