# How to use column groups in Data Grid?

**URL:** <https://forum.servoy.com/t/how-to-use-column-groups-in-data-grid/20961>\
**Category:** Questions\
**Created:** [March 1, 2023, 11:34am UTC](https://forum.servoy.com/t/how-to-use-column-groups-in-data-grid/20961 "2023-03-01T11:34:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![swingman](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/swingman/32/4536_2.png) [@swingman](https://forum.servoy.com/u/swingman)\
**Post date:** [March 1, 2023, 11:34am UTC](https://forum.servoy.com/t/how-to-use-column-groups-in-data-grid/20961/1 "2023-03-01T11:34:13Z")

</div>

Hi All,

I would like to add some headerGroups in an Data Grid (ag-grid).  
There is a property on the column called headerGroup, but I do not know how to use it to get a headerGroup to span several columns…

---

<div class="post-metadata">

**Author:** ![mboegem](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/mboegem/32/4399_2.png) [@mboegem](https://forum.servoy.com/u/mboegem)\
**Post date:** [March 6, 2023, 7:59am UTC](https://forum.servoy.com/t/how-to-use-column-groups-in-data-grid/20961/2 "2023-03-06T07:59:09Z")

</div>

There’s a property on the grid, called ‘groupUseEntireRow’, I guess that’s what you are looking for.

---

<div class="post-metadata">

**Author:** ![swingman](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/swingman/32/4536_2.png) [@swingman](https://forum.servoy.com/u/swingman)\
**Post date:** [March 6, 2023, 8:08am UTC](https://forum.servoy.com/t/how-to-use-column-groups-in-data-grid/20961/3 "2023-03-06T08:08:00Z")

</div>

Thanks for replying Marc, maybe I should have shown an example:

If you look at

[https://www.ag-grid.com/javascript-data … mn-groups/](https://www.ag-grid.com/javascript-data-grid/column-groups/)

there is

```auto
const gridOptions = {
    columnDefs: [
        {
            headerName: 'Athlete Details',
            children: [
                { field: 'athlete' },
                { field: 'age' },
                { field: 'country' },
            ]
        },
        {
            headerName: 'Sports Results',
            children: [
                { field: 'sport' },
                { field: 'total', columnGroupShow: 'closed' },
                { field: 'gold', columnGroupShow: 'open' },
                { field: 'silver', columnGroupShow: 'open' },
                { field: 'bronze', columnGroupShow: 'open' },
            ]
        }
    ],

    // other grid options ...
}

```

The Servoy component gives the impression that you can set the column groups in properties.  
Is that the case?