# Grouping in FlexGrid

Learn how to group columns of Wijmo's JavaScript DataGrid in this tutorial

## Content

The grid supports grouping via the source **CollectionView**.

Group the data by one or more properties by adding **GroupDescription** objects to the grid's **collectionView.groupDescriptions**.

This example groups the data by country and by product:
```javascript
import * as wjCore from '@mescius/wijmo';
import * as wjGrid from '@mescius/wijmo.grid';

// basic grouping
var theGrid = new wjGrid.FlexGrid('#theGrid', {
    itemsSource: new wjCore.CollectionView(data, {
        sortDescriptions: [ 'country', 'product' ],
        groupDescriptions: [ 'country', 'product' ]
    })
});
```
You may also want to hide the columns that are being grouped on in order to avoid showing redundant data.

This example groups the data by country and product, and hides those columns to achieve a cleaner appearance:
```javascript
// hide columns being grouped on
var theGridHideCols = new wjGrid.FlexGrid('#theGridHideCols', {
    autoGenerateColumns: false,
    columns: [
        { binding: 'country', header: 'Country', visible: false },
        { binding: 'product', header: 'Product', visible: false },
        { binding: 'downloads', header: 'Downloads', width: '*' },
        { binding: 'sales', header: 'Sales', width: '*' },
        { binding: 'expenses', header: 'Expenses', width: '*' },
    ],
    itemsSource: new wjCore.CollectionView(data, {
        sortDescriptions: [ 'country', 'product' ],
        groupDescriptions: [ 'country', 'product' ]
    })
});
```