JSGrid Basic Grouping

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.2/jsgrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.2/jsgrid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.2/jsgrid-theme.min.css">
<div id="jsGrid"></div>

JavaScript

var data = [{"Metric":"Revenue","Q3'18":7.65,"Q2'18":7.45,"Q1'18":7.28,"Q1'19":7.55,"Q4'18":7.71},{"Metric":"Manpower Cost","Q3'18":4.23,"Q2'18":5.1,"Q1'18":4.06,"Q1'19":5.25,"Q4'18":5.14},{"Q3'18":2.46,"Q2'18":2.44,"Q1'18":2.31,"Q1'19":3.11,"Q4'18":2.86},{"Metric":"Digital Revenue","Q3'18":2.63,"Q2'18":3.48,"Q1'18":2.52,"Q1'19":3.79,"Q4'18":3.55},{"Metric":"HeadCount","Q3'18":297,"Q2'18":273,"Q1'18":279,"Q1'19":302,"Q4'18":294},{"Metric":"HeadCount Offshore","Q3'18":231,"Q2'18":211,"Q1'18":214,"Q1'19":218,"Q4'18":222},{"Metric":"HeadCount Offshore","Q3'18":66,"Q2'18":62,"Q1'18":65,"Q1'19":84,"Q4'18":72}];

var cols = ['Metric', 'Q3 2018'];

$("#jsGrid").jsGrid({
        width: "100%",
        height: "400",
     
        inserting: false,
        editing: false,
        autoload: true,
 
        controller: {
        	loadData: function() {
          	return data;
          }
        },
        
        fields: [
        	{ name: "Metric", type: "text", width: 100 },
         
          { name: "Q1'18", width: 50 },
                  { name: "Q2'18", width: 50 },
                          { name: "Q3'18", width: 50 },
                                  { name: "Q4'18", width: 50 },
        ]
});