# Drag and Drop Grouping with GroupPanel

Learn how to use drag and drop grouping with FlexGrid in this tutorial

## Content

The **wijmo.grid.grouppanel** module provides a **GroupPanel** control that adds an Outlook-style grouping UI to the grid.

To use the **GroupPanel** control, drag column headers into the panel to create the groups. You may also drag the groups into new positions or remove groups.

First we create a FlexGrid:

```javascript
import * as wjGrid from '@mescius/wijmo.grid';
import * as wjGridGroupPanel from '@mescius/wijmo.grid.grouppanel';

  // create group panel grid
  var theGrid = new wjGrid.FlexGrid('#theGrid', {
    itemsSource: data
  });
```

Then, we create a GroupPanel and pass in a reference to the FlexGrid insance:

```javascript
// create the group panel and pass in the grid
var theGroupPanel = new wjGridGroupPanel.GroupPanel('#theGroupPanel', {
    placeholder: 'Drag columns here to create groups',
    grid: theGrid
});
```

The GroupPanel control supports the following keyboard commands:

| **Key Combination** | **Action** |
| --------------- | ------ |
| Left | Move focus to the previous group. |
| Right | Move focus to the next group. |
| Home | Move focus to the first group. |
| End | Move focus to the last group. |
| Ctrl + Left | Move the current group to the left. |
| Ctrl + Right | Move the current group to the Right. |
| Delete | Delete the current group. |
| Alt + G | Group the column where the active cell is located. (only focus on the grid) |