About TableFormat, ColumnFormat, and RowFormats

Table with alternate one row banding

To change the appearance of a table and its contents created by table and column components, use the following attributes:

tableFormat - Set the tableFormat complex attribute on the table component to specify the formatting for the entire table. This complex attribute can be databound. Currently the table formatting you can control is banding.
- bandingInterval - Specifies the number of rows or columns in each banding group.
- tableBanding - Specifies the banding strategy used for the table. The values allowed:
  - noBanding - Default. No banding is used in the table.
  - columnBanding - The columns are alternately banded. The number of columns in each banding group is determined by bandingInterval. For example, if bandingInterval is 2, then 2 dark columns alternate with 2 light columns.
  - rowBanding - The rows are alternately banded. The number of rows in each banding group is determined by bandingInterval. For example, if bandingInterval is 2, then 2 dark rows alternate with 2 light rows.
columnFormat - Set the columnFormat complex attribute on the column component to specify the formatting for that column. This complex attribute may be databound. Or, you can use the following attributes:
- bandingShade - Two values are allowed for column banding:
  - dark - Default. The column is shaded dark.
  - light - The column is shaded light.
- cellNoWrapFormat - Specifies a boolean value that determines whether the column will be rendered by wrapping the cell contents in multiple lines. Default is false, that is, wrapping is allowed.
- columnDataFormat - Specifies the data formatting for the column cells. Three values are allowed:
  - textFormat - Default. Use for columns that contain text data. Currently, text data is left aligned.
  - numberFormat - Use for columns that contain numbers. Currently, numbers are right aligned.
  - iconButtonFormat - Use for columns that contain icons and buttons, which are center aligned.
- displayGrid - Specifies a boolean value that determines whether a vertical grid line is displayed before the column's content. By default, a grid line is shown to the left of every column, in a left-to-right locale. In cases where you want to use vertical grid lines more sparingly to emphasize the relationship between some columns and to de-emphasize it between others, set this attribute to false to turn off a vertical grid line located before, or to the left, of a given data column.
- width - Specifies the percentage of extra width in the table this column should receive. The total percentage among all the columns should add to 100%. If a table takes up more space than its content needs, UIX redistributes that space among the columns. Some column data (like buttons) don't need any more space than the minimum they are given. Other column data (like text) should take extra space as that reduces the number of lines needed to display their content.
rowFormats - Set the rowFormats complex attribute on the table component to specify the formatting for each table data row. Currently the row formatting you can control is the appearance of horizontal grid lines above the rows. This complex attribute must be databound.
- displayGrid - Specifies a boolean value that determines whether a grid line is displayed above the row.

The following sampe UIX XML code produces the table shown above:


...
<provider>
  <!-- all the data used by our table demo -->
  <data name="demoTableData">
    <inline>
      <!-- DataObjectList to provide information to the data rows -->
      <demoRowData firstColumnText="First row"
                   secondColumnText="First Button"
                   thirdColumnText="First col"
                   fourthColumnText="111"/>
      <demoRowData firstColumnText="Second row"
                   secondColumnText="Second Button"
                   thirdColumnText="Second col"
                   fourthColumnText="222"/>
      <demoRowData firstColumnText="Third row"
                   secondColumnText="Third Button"
                   thirdColumnText="Third col"
                   fourthColumnText="333"/>
      <demoRowData firstColumnText="4th row"
                   secondColumnText="4th Button"
                   thirdColumnText="4th row col"
                   fourthColumnText="444"/>
      <!-- DataObjectList to provide information to the row header stamps -->
      <demoRowHeaderData headerText="1"/>
      <demoRowHeaderData headerText="2"/>
      <demoRowHeaderData headerText="3"/>
      <demoRowHeaderData headerText="4"/>
      <!-- DataObjectList to provide formmating information to the rows -->
      <demoRowFormats/>
      <demoRowFormats displayGrid="false"/>
      <demoRowFormats/>
      <demoRowFormats/>
    </inline>
  </data>
</provider>
...
<table tableData="${uix.data.demoTableData.demoRowData}"
       rowHeaderData="${uix.data.demoTableData.demoRowHeaderData}"
       rowFormats="${demoTableData.demoRowFormats}"
       width="55%">
  <contents> 
    <column>
      <columnHeader>
        <styledText text="First Header"/>
      </columnHeader>
      <contents>
        <!-- first column stamp -->
        <text text="${uix.current.firstColumnText}"/>
      </contents>
    </column>
    <column>
      <columnHeader>
        <styledText text="Second Header">
          <inlineStyle>
            <property name="color">red</property>
          </inlineStyle>
        </styledText>
      </columnHeader>
      <contents>
        <!-- second column stamp -->
        <button text="${uix.current.secondColumnText}"/>
      </contents>
      <columnFormat columnDataFormat="iconButtonFormat"/>
    </column>
    <column>
      <columnHeader>
        <styledText text="Third Header"/>
      </columnHeader>
      <contents>
        <!-- third column stamp -->
        <text text="${uix.current.thirdColumnText}"/>
      </contents>
    </column>
    <column>
      <columnHeader>
        <styledText text="Header 4"/>
      </columnHeader>
      <contents>
        <!-- fourth column stamp -->
        <text text="${uix.current.fourthColumnText}"/>
      </contents>
      <columnFormat columnDataFormat="numberFormat"/> 
    </column>
  </contents>
  <!-- row header stamp node -->
  <rowHeaderStamp>
    <text text="${uix.current.headerText}"/>
  </rowHeaderStamp>
  <tableFormat bandingInterval="1" tableBanding="rowBanding"/>
</table>
...