JSFiddle - React, Tailwind, and code Playground

by RaviMakwana

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

CSS

.azita .jqx-grid-cell {
background-color:transparent;
}
.azita [data-key="2"],.azita [data-key="8"]{
background-color:plum;
}
.azita [data-key="4"],.azita [data-key="1"],.azita [data-key="3"]{
background-color:rgb(235, 187, 235);
}
.azita [data-key="5"]{
background-color: #bbf585;
}
.azita [data-key="6"],.azita [data-key="7"],.azita [data-key="9"]{
background-color: #d4fcaf;
}
.newColor{
background-color: yellow;

}

JavaScript

var employees = [
  {
    "EmployeeID": 2, "FirstName": "Andrew", "LastName": "Fuller", "Country": "USA", "Title": "Vice President, Sales", "BirthDate": "1952-02-19 00:00:00",
    'children': [
      { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "Country": "USA", "Title": "Sales Representative", "BirthDate": "1963-08-30 00:00:00"},
      { "EmployeeID": 4, "FirstName": "Margaret", "LastName": "Peacock", "Country": "USA", "Title": "Sales Representative", "BirthDate": "1937-09-19 00:00:00" },

    ]},
  {
    "EmployeeID": 5, "FirstName": "Steven", "LastName": "Buchanan", "Country": "UK", "Title": "Sales Manager", "BirthDate": "1955-03-04 00:00:00",
    'children': [
      { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "Country": "UK", "Title": "Sales Representative", "BirthDate": "1963-07-02 00:00:00"},
      { "EmployeeID": 7, "FirstName": "Robert", "LastName": "King", "Country": "UK", "Title": "Sales Representative", "BirthDate": "1960-05-29 00:00:00"},
      { "EmployeeID": 9, "FirstName": "Anne", "LastName": "Dodsworth", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00" }
    ]
  },
  { "EmployeeID": 8, "FirstName": "Laura", "LastName": "Callahan", "Country": "USA", "Title": "Inside Sales Coordinator", "BirthDate": "1958-01-09 00:00:00",
   'children': [
     { "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "Country": "USA", "Title": "Sales Representative", "BirthDate": "1948-12-08 00:00:00" }]
  }

];
// prepare the data
var source =
    {
      dataType: "json",
      dataFields: [
        { name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' },
        { name: 'BirthDate', type: 'date' }
      ],
      hierarchy:
      {
       ...