JQuery TreeGrid

Bind to the filter event by type: jqxTreeGrid. Author: http://jqwidgets.com

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="container">
  <div id="jqxDropDownList"></div>
  <input type="text" id="filterInput" />
  <button id="filter">Filter</button>
  <button id="clear">X</button>
</div>


<div id="treeGrid"></div>

CSS

#container {
  display: flex;
  width: 490px;
}

#container :nth-child(3) {
  margin-left: auto;
}

JavaScript

// jqxTreeGrid
var employees = [{
  "EmployeeID": 2,
  "FirstName": "Andrew",
  "LastName": "Fuller",
  "Country": "USA",
  "Title": "Vice President, Sales",
  "HireDate": "1992-08-14 00:00:00",
  "BirthDate": "1952-02-19 00:00:00",
  "City": "Tacoma",
  "Address": "908 W. Capital Way",
  "expanded": "true",
  children: [{
    "EmployeeID": 8,
    "FirstName": "Laura",
    "LastName": "Callahan",
    "Country": "USA",
    "Title": "Inside Sales Coordinator",
    "HireDate": "1994-03-05 00:00:00",
    "BirthDate": "1958-01-09 00:00:00",
    "City": "Seattle",
    "Address": "4726 - 11th Ave. N.E."
  }, {
    "EmployeeID": 1,
    "FirstName": "Nancy",
    "LastName": "Davolio",
    "Country": "USA",
    "Title": "Sales Representative",
    "HireDate": "1992-05-01 00:00:00",
    "BirthDate": "1948-12-08 00:00:00",
    "City": "Seattle",
    "Address": "507 - 20th Ave. E.Apt. 2A"
  }, {
    "EmployeeID": 3,
    "FirstName": "Janet",
    "LastName": "Leverling",
    "Country": "USA",
    "Title": "Sales Representative",
    "HireDate": "1992-04-01 00:00:00",
    "BirthDate": "1963-08-30 00:00:00",
    "City": "Kirkland",
    "Address": "722 Moss Bay Blvd."
  }, {
    "EmployeeID": 4,
    "FirstName": "Margaret",
    "LastName": "Peacock",
    "Country": "USA",
    "Title": "Sales Representative",
    "HireDate": "1993-05-03 00:00:00",
    "BirthDate": "1937-09-19 00:00:00",
    "City": "Redmond",
    "Address": "4110 Old Redmond Rd."
  }, {
    "EmployeeID": 5,
    "FirstName": "Steven",
    "LastName": "Buchanan",
    "Country": "UK",
    "Title": "Sales Manager",
    "HireDate": "1993-10-17 00:00:00",
    "BirthDate": "1955-03-04 00:00:00",
    "City": "London",
    "Address": "14 Garrett Hill",
    "expanded": "true",
    children: [{
      "EmployeeID": 6,
      "FirstName": "Michael",
      "LastName": "Suyama",
      "Country": "UK",
      "Title": "Sales Representative",
      "HireDate": "1993-10-17 00:00:00",
      "BirthDate": "1963-07-02 00:00:00",
     ...