Column groups

Version compatibility

column-group was introduced in version 4.70.0 of the JourneyApps Runtime.

The Showcase: Object Tables template app contains an example implementation of a column groups. Check it out!

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

Basic groups

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

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.

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

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.

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

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.