JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.css">
<div ng-app="app">
  <div ng-controller="MainCtrl">
    <div id="grid1" ui-grid="gridOptions" ui-grid-tree-view ui-grid-grouping ui-grid-selection class="grid"></div>
  </div>
</div>

CSS

.grid {
  width: 800px;
  height: 600px;
}

JavaScript

var app = angular.module('app', ['ui.grid', 'ui.grid.treeView', 'ui.grid.selection', 'ui.grid.grouping']);

app.controller('MainCtrl', ['$scope', 'uiGridGroupingConstants', function($scope, uiGridGroupingConstants) {
  var data = [{
    Store: '1 - Houston',
    MFG: 'Nike',
    Description: 'Nike Shoe 1',
    Cost: .99,
    Qty: 12,
    BusinessDate: '1/1/2015'
  }, {
    Store: '1 - Houston',
    MFG: 'Nike',
    Description: 'Nike Shoe 1',
    Cost: .99,
    Qty: 12,
    BusinessDate: '5/4/2015'
  }, {
    Store: '1 - Houston',
    MFG: 'Reebok',
    Description: 'Reebok Shoe 1',
    Cost: .99,
    Qty: 12,
    BusinessDate: '7/1/2015'
  }, {
    Store: '2 - Dallas',
    MFG: 'Reebok',
    Description: 'Reebok Shoe 2',
    Cost: .99,
    Qty: 12,
    BusinessDate: '12/25/2016'
  }, {
    Store: '2 - Dallas',
    MFG: 'Reebok',
    Description: 'Reebok Shoe 2',
    Cost: .99,
    Qty: 12,
    BusinessDate: '8/14/2014'
  }, {
    Store: '2 - Dallas',
    MFG: 'FootJoy',
    Description: 'FootJoy Shoe 1',
    Cost: .99,
    Qty: 12,
    BusinessDate: '5/29/2017'
  }, {
    Store: '3 - New York',
    MFG: 'FootJoy',
    Description: 'FootJoy Shoe 2',
    Cost: .99,
    Qty: 12,
    BusinessDate: '2/3/2014'
  }, {
    Store: '3 - New York',
    MFG: 'FootJoy',
    Description: 'FootJoy Shoe 1',
    Cost: .99,
    Qty: 12,
    BusinessDate: '1/24/2017'
  }, {
    Store: '3 - New York',
    MFG: 'FootJoy',
    Description: 'FootJoy Shoe 1',
    Cost: .99,
    Qty: 12,
    BusinessDate: '3/16/2013'
  }];


  $scope.gridOptions = {
    data: data,
    enableSorting: true,
    enableFiltering: true,
    enableGridMenu: true,
    enableFullRowSelection: false,
    enableGroupHeaderSelection: true,
    treeRowHeaderAlwaysVisible: false,
    exporterMenuAllData: true,
    exporterMenuVisibleData: true,
    flatEntityAccess: true,
    fastWatch: true,
    enableHorizontalScrollbar: 1,
    enableCellSelection: true,
    enableCellEditOnFocus: false,
    columnDefs: [{
     ...