Demo - GroupPanel

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.grouppanel.min.js"></script>
<div class="container">

  <h1>
    GroupPanel control</h1>
  <p>
    The <b>wijmo.grid.grouppanel</b> module provides a <b>GroupPanel</b>
    control that adds an Outlook-style grouping UI to the grid.</p>
  <p>
    To use the <b>GroupPanel</b> control, drag column headers into
    the panel to create the groups. You may also drag the groups
    into new positions or remove groups:</p>
  <div id="theGroupPanel"></div>
  <div id="theGrid"></div>
   <input id="inp" type="text" placeholder="drag grop grid columns here"/>
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin:10px 0;
}
body {
  margin-bottom: 20px;
}

JavaScript

onload = function () {

  // generate some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
  		products = 'Phones,Computers,Cameras,Stereos'.split(','),
      data = [];
  for (var i = 0; i < 200; i++) {
    data.push({
    	id: i,
      country: countries[i % countries.length],
      product: products[i % products.length],
      downloads: Math.round(100 + Math.random() * 10000),
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000,
    });
  }

  // create group panel grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: data
  });
  
  // create the group panel
  var theGroupPanel = new wijmo.grid.grouppanel.GroupPanel('#theGroupPanel', {
  	placeholder: 'Drag columns here to create groups',
  	grid: theGrid
  }); 
  
  var dragInfo = null;  
  theGrid.hostElement.addEventListener('dragstart', function(e){
  	var htInfo = theGrid.hitTest(e);
    if(htInfo.panel != theGrid.columnHeaders){
    	return;
    }    
    // save dragInfo
    dragInfo = htInfo;
  });
  
  theGrid.hostElement.addEventListener('dragend', function(e){
  	dragInfo = null;
  });
  
  // make input field droppable
  var inp = document.getElementById('inp');
  inp.addEventListener('dragover', function(e){
  	if(dragInfo){
    	e.preventDefault();
    }
  });
  // fill value on drop
  inp.addEventListener('drop', function(e){
  	if(!dragInfo){
    	return;
    }
    
    let column = dragInfo.panel.columns[dragInfo.col];
    // set value	
    inp.value = column.header || column.binding;
  });
  
}