JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.js"></script>
<div id="form">
<div id="grid-container">
    <table id="grid-command-buttons" class="table table-condensed table-hover table-striped bootgrid-table" aria-busy="false">
        <thead>
            <tr>
                <th data-column-id="id" data-identifier="true" data-type="numeric">ID</th>
                <th data-column-id="sender">Sender</th>
                <th data-column-id="received" data-order="desc">Received</th>
                <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
            </tr>                    
        </thead>
        <tbody>
            <tr>
                <td class="text-left">1122</td>
                <td class="text-left">scott@outlook.com</td>
                <td class="text-left">2014-10-27T07:23:43</td>
                <td class="text-left"></td>
            </tr>
            <tr>
                <td class="text-left">1123</td>
                <td class="text-left">scott@outlook.com</td>
                <td class="text-left">2014-10-27T07:23:43</td>
                <td class="text-left"></td>
            </tr>
            <tr>
                <td class="text-left">1124</td>
                <td class="text-left">scott@outlook.com</td>
                <td class="text-left">2014-10-27T07:23:43</td>
                <td class="text-left"></td>
            </tr>            
            <tr>
                <td class="text-left">1125</td>
                <td class="text-left">scott@outlook.com</td>
                <td class="text-left">2014-10-27T07:23:43</td>
                <td class="text-left"></td>
            </tr>            
            <tr>
                <td class="text-left">1126</td>
                <td class="text-left">scott@outlook.com</td>
                <td...

CSS

.bootgrid-header,
.bootgrid-footer {
  margin: 15px 0;
}
.bootgrid-header a,
.bootgrid-footer a {
  outline: 0;
}
.bootgrid-header .search,
.bootgrid-footer .search {
  display: inline-block;
  margin: 0 20px 0 0;
  vertical-align: middle;
  width: 180px;
}
.bootgrid-header .search .glyphicon,
.bootgrid-footer .search .glyphicon {
  top: 0;
}
.bootgrid-header .search.search-field::-ms-clear,
.bootgrid-footer .search.search-field::-ms-clear,
.bootgrid-header .search .search-field::-ms-clear,
.bootgrid-footer .search .search-field::-ms-clear {
  display: none;
}
.bootgrid-header .pagination,
.bootgrid-footer .pagination {
  margin: 0 !important;
}
.bootgrid-header .actionBar,
.bootgrid-footer .infoBar {
  text-align: right;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu {
  text-align: left;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item {
  cursor: pointer;
  display: block;
  margin: 0;
  padding: 3px 20px;
  white-space: nowrap;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover,
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox,
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item .dropdown-item-checkbox,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item...

JavaScript

var rowIds = [];
var grid = $("#grid-command-buttons").bootgrid({
    selection:true,
    multiSelect: false,
    rowSelect : true,
    formatters: {
        "commands": function(column, row)
        {
            return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-pencil\"></span></button> " + 
                "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-trash-o\"></span></button>";
        }
    }
}).on("selected.rs.jquery.bootgrid", function (e, rows) {
                console.log("Select Event Fired"); 
                console.log(rows);
                for (var i = 0; i < rows.length; i++) {
                    rowIds.push({ id: rows[i].id, ad: rows[i].sender, cns: rows[i].received });
                }
                console.log(rowIds);
  
            }).on("deselected.rs.jquery.bootgrid", function (e, rows) {
              console.log("Deselect Event Fired"); 
              console.log(rows);
                for (var i = 0; i < rows.length; i++) {
                        $.each(rowIds, function (ix) {
                        if (rowIds[ix].id == rows[i].id) {
                            rowIds.splice(ix, 1);
                            return false;
                        }
                    });
                }
     console.log(rowIds);
    
            });