JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://raw.githubusercontent.com/tabalinas/jsgrid/master/css/jsgrid.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.css">
<div id="kfuhitlist">

</div>

CSS

.jsgrid-grid-header,
.jsgrid-grid-body,
.jsgrid-header-row > .jsgrid-header-cell,
.jsgrid-filter-row > .jsgrid-cell,
.jsgrid-insert-row > .jsgrid-cell,
.jsgrid-edit-row > .jsgrid-cell {
    border: 1px solid #e9e9e9;
}

.jsgrid-header-row > .jsgrid-header-cell {
    border-top: 0;
}

.jsgrid-header-row > .jsgrid-header-cell,
.jsgrid-filter-row > .jsgrid-cell,
.jsgrid-insert-row > .jsgrid-cell {
    border-bottom: 0;
}

.jsgrid-header-row > .jsgrid-header-cell:first-child,
.jsgrid-filter-row > .jsgrid-cell:first-child,
.jsgrid-insert-row > .jsgrid-cell:first-child {
    border-left: none;
}

.jsgrid-header-row > .jsgrid-header-cell:last-child,
.jsgrid-filter-row > .jsgrid-cell:last-child,
.jsgrid-insert-row > .jsgrid-cell:last-child {
    border-right: none;
}

.jsgrid-header-row .jsgrid-align-right,
.jsgrid-header-row .jsgrid-align-left {
    text-align: center;
}

.jsgrid-grid-header {
    background: #f9f9f9;
}

.jsgrid-header-scrollbar {
    scrollbar-arrow-color: #f1f1f1;
    scrollbar-base-color: #f1f1f1;
    scrollbar-3dlight-color: #f1f1f1;
    scrollbar-highlight-color: #f1f1f1;
    scrollbar-track-color: #f1f1f1;
    scrollbar-shadow-color: #f1f1f1;
    scrollbar-dark-shadow-color: #f1f1f1;
}

.jsgrid-header-scrollbar::-webkit-scrollbar {
    visibility: hidden;
}

.jsgrid-header-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.jsgrid-header-sortable:hover {
    cursor: pointer;
    background: #fcfcfc;
}

.jsgrid-header-row .jsgrid-header-sort {
    background: #c4e2ff;
}

.jsgrid-header-sort:before {
    content: " ";
    display: block;
    float: left;
    width: 0;
    height: 0;
    border-style: solid;
}

.jsgrid-header-sort-asc:before {
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent #009a67 transparent;
}

.jsgrid-header-sort-desc:before {
    border-width: 5px 5px 0 5px;
    border-color: #009a67 transparent transparent transparent;
}

.jsgrid-grid-body {
    border-top: none;
}

.jsgrid-cell {
   ...

JavaScript

window.jsGrid.sortStrategies.textsort = (index1, index2) => {
	const tempindex1 = index1.replace(/(<([^>]+)>)/ig, '');
	const tempindex2 = index2.replace(/(<([^>]+)>)/ig, '');
  console.log(index1);

	return window.jsGrid.sortStrategies.string(tempindex1, tempindex2);
};

var selectedItems = [];

$('#kfuhitlist').jsGrid({
                width: '100%',
                height: '600px',
                sorting: true,
                data: [
                	{
											FarmerId: 1231,
                      Name: 'lars larsen'
									},
                  {
											FarmerId: 1212311,
                      Name: 'hans Hansen'
									}
                ],
                fields: [
                {
                    name: 'comparegrafh',
                    title: ' ',
                    width: 25,
                    sorting: false,
                    itemTemplate: (value, item ) => {
                        console.log(value)
                        console.log(item)
                        var $cb = $('<input>').attr('type', 'checkbox').attr('data-comparegraph-farmid', item.FarmerId);
                        
                        if(selectedItems.indexOf(item) > -1) {
                        	$cb.attr('checked', 'checked');
                        }
                        
                        $cb.on("change", function() {
                        	if(this.checked) {
                          	selectedItems.push(item);
                          } else {
                          	selectedItems = selectedItems.filter(function(selectedItem) {
	return selectedItem != item;
});
                          }
                        });
                        
                        return $cb;
                    }
                },
                {  
                		name: 'Name',
                    type: 'text',
                    title: '<span data-toggle="tooltip" data-placement="bottom" title="Name">Name</span>',
                    width:...