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

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>

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.
Last modified 3mo ago