Html Grid

Set the groupable property of the jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
  <div id="jqxgrid"></div>

CSS

.container {
  display: flex;
  height: 100%;
  align-items: center;
}

JavaScript

var data = generatedata(500);
 var source = {
   localdata: data,
   datafields: [{
     name: 'firstname',
     type: 'string'
   }, {
     name: 'lastname',
     type: 'string'
   }, {
     name: 'productname',
     type: 'string'
   }, {
     name: 'date',
     type: 'date'
   }, {
     name: 'quantity',
     type: 'number'
   }, {
     name: 'price',
     type: 'number'
   }],
   datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
   width: 500,
   theme: 'energyblue',
   source: adapter,
   groupable: true,
   showgroupsheader: false,
   showtoolbar: true,
   rendertoolbar: function(statusbar) {
     var container = $("<div class='container'></div>");
     var firstName = $("<div style='width: 120px'><span id='checkboxFirstName'><span>First name</div>");
     var lastName = $("<div style='width: 120px'><span id='checkboxLastName'><span>Last name</div>");
     var product = $("<div style='width: 170px'><span id='checkboxProduct'><span>Product</div>");
     container.append(firstName);
     container.append(lastName);
     container.append(product);
     statusbar.append(container);

     $('#checkboxFirstName, #checkboxLastName, #checkboxProduct').jqxCheckBox({
       width: '300px',
       height: 25,
       boxSize: '15px',
       theme: 'energyblue'
     });


     $('#checkboxFirstName').on('change', function(event) {
       var checked = event.args.checked;
       var type = event.args.type;

       if (checked) {
         $('#jqxgrid').jqxGrid('addgroup', 'firstname');
       } else {
         $('#jqxgrid').jqxGrid('removegroup', 'firstname');
       }
     });
     $('#checkboxLastName').on('change', function(event) {
       var checked = event.args.checked;
       var type = event.args.type;

       if (checked) {
         $('#jqxgrid').jqxGrid('addgroup', 'lastname');
       } else {
         $('#jqxgrid').jqxGrid('removegroup', 'lastname');
       }
     });
     $('#checkboxProduct').on('change',...