About ColumnGroup

Use the columnGroup component to place two or more columns in a group. A group of columns has a column header that spans across all of the columns in the group. The columnGroup components can be nested.

Table with 3 groups of columns.

To specify the group column header text, use the columnHeader named child of columnGroup to insert the preferred child styledText. The text attribute of styledText defines the group column header text. You can specify an inlineStyle for the styledText element.

The indexed children of columnGroup are the individual column components, or nested columnGroup elements.


<table ... >
  <contents>
    <columnGroup>
      <columnHeader>
        <styledText text="Group Col 1"/>
      </columnHeader>
      <contents>
        <column>
          <columnHeader>
            <styledText text="col1"/>
          </columnHeader>
          <contents>
            <!-- column contents -->
          </contents>
        </column>
        <column>
          <columnHeader>
            <styledText text="col2"/>
          </columnHeader>
          <contents>
            <!-- column contents -->
          </contents>
        </column>
      </contents>
    </columnGroup>
    <columnGroup>
      <columnHeader>
        <styledText text="Group Col 2"/>
      </columnHeader>
      <contents>
        <column>
          <columnHeader>
            <styledText text="col3"/>
          </columnHeader>
          <contents>
            <!-- column contents -->
          </contents>
        </column>
        <column>
          <columnHeader>
            <styledText text="col4"/>
          </columnHeader>
          <contents>
            <!-- column contents -->
          </contents>
        </column>
      </contents>
    </columnGroup>
  </contents>
</table>