JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.4.0/jsgrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.4.0/jsgrid-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.4.0/jsgrid.min.css">
<button id="butAdd">add</button>
<button id="butrefresh">refresh</button>
<div id="jsGrid"></div>

JavaScript

var countries = [
            { Name: "", Id: 0 },
            { Name: "United States", Id: 1 },
            { Name: "Canada", Id: 2 },
            { Name: "United Kingdom", Id: 3 },
            { Name: "France", Id: 4 },
            { Name: "Brazil", Id: 5 },
            { Name: "China", Id: 6 },
            { Name: "Russia", Id: 7 }
        ];
        
        var clients = [
        	{ Name: "Otto Clay", Age:61, Address: "test 1", Country: 2, Married : false},
        	{ Name: "Lacey Hess", Age:29, Address: "test 2", Country: 2, Married : false},
        
        ];
        var clients2 = [
        	{ Name: "karl May", Age:61, Address: "test 1", Country: 2, Married : true},
        	{ Name: "Ly na", Age:29, Address: "test 2", Country: 2, Married : true},
        
        ];
        
$("#jsGrid").jsGrid({
        height: "600px",
        width: "100%",
 
        filtering: true,
        editing: true,
        sorting: true,
        paging: true,
        autoload: true,
 
        pageSize: 15,
        pageButtonCount: 5,
 
        deleteConfirm: "Do you really want to delete the client?",
 
        controller: {
        	loadData: function() {
          	return clients2;
          }
        },
 
        fields: [
            { name: "Name", type: "text", width: 150 },
            { name: "Age", type: "number", width: 50 },
            { name: "Address", type: "text", width: 200 },
            { name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
            { name: "Married", type: "checkbox", title: "Is Married", sorting: false },
            { type: "control" }
        ]
    });
    
    $("#butAdd").click(function () {
    	var rnd = makeid();
      var age = Math.floor((Math.random() * 80) + 1);
    	clients.push({ Name: "Lacey Hess" + rnd, Age: age, Address: "test" + rnd, Country: 2, Married : false});
      $("#jsGrid").jsGrid("loadData");
      //alert("added");
    })
    
     $("#butrefresh").click(function () {
  ...