# column-group

## Overview

{% hint style="info" %}
**Version compatibility**

`column-group` was introduced in version **4.70.0** of the JourneyApps Runtime.
{% endhint %}

Columns in an `object-table` can be grouped to indicate categories or cater for more sophisticated use cases.

{% hint style="info" %}
See more information in the guide on `object-table` [column groups](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/object-table/object-table-guides/column-groups).
{% endhint %}

### Basic Example

```xml
<object-table ...>
    <column-group heading="Group 1">
        <column heading="Column 1">{col1}</column>
        <column heading="Column 2">{col2}</column>
    </column-group>

    <column-group heading="Group 2">
        <column heading="Column 3">{col3}</column>
        <column heading="Column 4">{col4}</column>
    </column-group>
</object-table>
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-8523b981ed031205600d4c15affe9aa90aeeb30a%2Fobject-table-column-group-basic.png?alt=media)

## Standard Attributes

### `heading`

**Optional**

**Type**: `string`

**Default value:** unset

Text to appear in the header position of the `column-group`.

## Advanced Attributes

### `collapsed`

**Optional**

**Type**: `boolean`

**Default value:** `false`

Use the `collapsed` attribute to put an entire group into a collapsed or expanded state. Unlike `show-if` and `hide-if`, column groups will remain visible but are represented as a vertical bar in-place of the group itself.

### `show-if` and `hide-if`

{% content-ref url="../../xml-fields/show-if" %}
[show-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/show-if)
{% endcontent-ref %}

{% content-ref url="../../xml-fields/hide-if" %}
[hide-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/hide-if)
{% endcontent-ref %}