JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://kendo.cdn.telerik.com/2015.1.225/js/kendo.all.min.js"></script>
<script src="https://bxaccess.com/FundMgmt/scripts/3rdParty/knockout/knockout-3.3.0.js"></script>
<script src="https://bxaccess.com/FundMgmt/scripts/3rdParty/knockout/knockout-kendo.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.225/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.1.225/styles/kendo.common.min.css">
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<input type="text" data-bind="dataItemAutocompleteCategories: autocompleteDataItems, addCallback: addDataItem, searchResultContainer: 'searchAutoCompleteCalulator'" id="dataItemSelector" class="form-control search-box" />
<div class="in-page-autocomplete" id="searchAutoCompleteCalulator"></div>
<div class="col-md-5">
  <input id="isPrimary" type='checkbox' data-bind="checked: isPrimary, click: primaryClicked" />
  <span>PRIMARY ONLY</span>
</div>
<div class="row">
  <div class="col-md-7">
    <input type="text" id="search" value="" style="width:100%" />
  </div>
  <div class="col-md-5">
    <input id="isPrimary" type='checkbox' />
    <span>PRIMARY ONLY</span>
  </div>
</div>


<div>
  <span class="clickable" onclick="expandAll();">EXPAND ALL</span>
  <span> | </span>
  <span class="clickable" onclick="collapseAll();">COLLAPSE ALL</span>
</div>
<div id="grid" data-bind="kendoGrid: gridOptions"></div>

<script id="gridItemsRowTemplate" type="text/x-kendo-template">
  <tr>
    <td class="k-group-cell">&nbsp;</td>
    <td class="k-group-cell">&nbsp;</td>
    <td...

CSS

.clickable:hover {
  cursor: pointer;
}

.k-grid .k-header {
  display: none;
}

JavaScript

ko.bindingHandlers.dataItemAutocompleteCategories = (function() {
  var self = {};
  var top;

  $.widget("custom.catcomplete", $.ui.autocomplete, {
    _create: function() {
      this._super();
      this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
    },
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li;
        if (item.category != currentCategory) {
          ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
          currentCategory = item.category;
        }
        li = that._renderItemData(ul, item);
        if (item.category) {
          li.attr("aria-label", item.category + " : " + item.label);
        }
      });
    }
  });

  var topN = function(data) {
    return function(request, response) {
      var results = $.ui.autocomplete.filter(data, request.term);
      response(results.slice(0, top));
    };
  };

  self.init = function(element, valueAccessor, allBindingsAccessor) {
    var allBindings = allBindingsAccessor();
    var cb = allBindings.addCallback;
    var searchResultContainer = allBindings.searchResultContainer;
    top = allBindings.top || 20;
    var data = valueAccessor();

    $(element).catcomplete({
      source: topN(ko.unwrap(data)),
      select: function(event, ui) {
        cb(ui);
        $(this).val('');
        event.preventDefault();
      },
      appendTo: $('#' + searchResultContainer),
    });
  };
  self.update = function(element, valueAccessor, allBindingsAccessor) {

    $(element).catcomplete('option', 'source', topN(ko.unwrap(valueAccessor())));
    $(element).catcomplete('widget').css({
        'z-index': 10004
      })
      .addClass('sectioned-autocomplete');
  };

  return self;
})();



const jsonData =

  [{
    category: 'SBS',
    priority: 'Primary',
    dataitemId: 1,
    dataitemName: 'DataItem1',
    dataitemDescription: 'Description1'

  }, {
   ...