# Column groups

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

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

{% hint style="success" %}
The **Showcase: Object Tables** template app contains an example implementation of a column groups. Check it out!
{% endhint %}

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

## Basic groups

```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)

### Groups support `show-if` and `hide-if`

Much like standard table columns, column groups can also make use of dynamic `show-if` and `hide-if` attributes. Note that hidden column groups always take priority over `show-if` and `hide-if` attributes on nested columns.

```xml
<object-table>
    <column-group heading="Group 1" hide-if="true">
        <column heading="Hidden column 1">{col1}</column>
        <column heading="Hidden column 2">{col2}</column>
    </column-group>

    <column-group heading="Group 2" show-if="true">
        <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-b9a58e1959e66e28106c5628b8c896dd4496443b%2Fobject-table-column-group-hide-if.png?alt=media)

### Groups can be collapsed

Use the `collapsed="true | false"` 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.

```xml
<object-table>

    <column ... />
    <column ... />
    <column ... />

    <column-group heading="Collapsed group" collapsed="true">
        <column heading="Hidden column 1">{col1}</column>
        <column heading="Hidden column 2">{col2}</column>
    </column-group>

    <column ... />
    <column ... />
    <column ... />

    <column-group heading="Group 2" show-if="true">
        <column heading="Column 9">{col9}</column>
        <column heading="Column 10">{col10}</column>
    </column-group>
</object-table>
```

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

{% hint style="info" %}
**Tip**: Column groups are useful for separating concepts in a table such as totals, descriptions or other data types. Collapsed column groups improve the UX of large tables that would otherwise be hard to view because of the horizontal scrolling required.
{% endhint %}