Using TableFormat, ColumnFormat, and RowFormats

Note: This procedure assumes inline data (as shown in the example at the end of this topic) has been inserted in the UIX file. The inline data named "demoTableData" provides the data for the rows and columns.

To add formatting to a table, column, and row:

To add formatting information to the entire table, select the table node in the Design Structure Window and then set the tableFormat complex attribute by following these steps:
1. In the Property Inspector, click the icon in the column next to the tableFormat attribute to enter the table format property values or specify the data source to bind to. You may use an EL syntax data binding expression or use the Bind to Data dialog to select the data source. The table format values supported are:
  - bandingInterval - Enter the number of rows or columns in each banding group.
  - tableBanding - Select 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.
    - rowBanding - The rows are alternately banded. The number of rows in each banding group is determined by bandingInterval.
To add formatting information to a column, select the column node in the Design Structure Window and then set the columnFormat complex attribute by following these steps:
- In the Property Inspector, click the icon in the column next to the columnFormat attribute to enter the column format property values or specify the data source to bind to. You may use an EL syntax data binding expression or use the Bind to Data dialog to select the data source. The column format values supported are:
  - bandingShade - Select from the following:
    - dark - The column is shaded dark.
    - light - The column is shaded light.
  - cellNoWrapFormat - Select true or false to specify whether the column will be rendered by wrapping the cell contents in multiple lines.
  - columnDataFormat - Select the data formatting for column cells from the following supported values:
    - textFormat - The column cell data is left aligned. For displaying text data.
    - numberFormat - The column cell data is right aligned. For displaying numbers.
    - iconButtonFormat - The column cell data is center aligned. For displaying icons and buttons.
  - displayGrid - Select true or false to specify whether a 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.
  - width - Enter the width of the column in pixels or as a percentage.
To add formatting information to each table row, select the table node in the Design Structure Window and then set the rowFormats complex attribute by following these steps:
- In the Property Inspector, click the icon in the column next to the rowFormats attribute to specify the data source to bind to. You may use an EL syntax data binding expression or use the Bind to Data dialog to select the data source. The formatting you can control is whether to display a grid line above the row contents.

Note: To use data binding, see Data Binding a Component Attribute.

Example (UIX XML)


...
<provider>
  <data name="demoTableData">
    <inline>
      <!-- data for 4 rows -->
      <demoRowData firstColumnText="First row"
                   secondColumnText="First Button"
                   thirdColumnText="First col"
                   fourthColumnText="111"
                   isSelected="false"
                   isDisabled="true" />
      <demoRowData firstColumnText="Second row"
                   secondColumnText="Second Button"   
                   thirdColumnText="Second col"    
                   fourthColumnText="222"   
                   isSelected="true" /> 
      <demoRowData firstColumnText="Third row" 
                   secondColumnText="Third Button"         
                   thirdColumnText="Third col"  
                   fourthColumnText="333"    
                   isSelected="false" />  
      <demoRowData firstColumnText="4th row"   
                   secondColumnText="4th Button"   
                   thirdColumnText="4th row col"   
                   fourthColumnText="444"  
                   isSelected="false" /> 
      <!-- data for the row headers -->
      <demoRowHeaderData headerText="1"/> 
      <demoRowHeaderData headerText="2"/>
      <demoRowHeaderData headerText="3"/>
      <demoRowHeaderData headerText="4"/> 
      <!-- data for the 4 column headers -->
      <demoColHeaderData textKey="H1"/> 
      <demoColHeaderData textKey="H2"/>
      <demoColHeaderData textKey="H3"/>
      <demoColHeaderData textKey="H4"/>
      <!-- formatting information for the rows -->
      <demoRowFormats/>
      <demoRowFormats displayGrid="false"/>
      <demoRowFormats/>
      <demoRowFormats/> 
    </inline>
  </data>
</provider>
...
<contents>
  ...
  <table alternateText="No Items Found."
         blockSize="25"
         tableData="${uix.data.demoTableData.demoRowData}"
         rowFormats="${demoTableData.demoRowFormats}
         columnHeaderData="${uix.data.demoTableData.demoColHeaderData}"
         rowHeaderData="${uix.data.demoTableData.demoRowHeaderData}">
    <tableFormat bandingInterval="1" tableBanding="rowBanding"/>
    <contents>
      <!-- table's indexed children are the columns -->
      <column>
        <!-- first column stamp -->
        <contents>
          <styledText text="${uix.current.firstColumnText}"/>
        </contents>
      </column>

      <column>
        <!-- second column stamp -->
        <contents>
          <styledText text="${uix.current.secondColumnText}"/>
        </contents>
        <!-- second column header -->
      </column>

      <column>
        <!-- third column stamp -->
        <contents>
          <styledText text="${uix.current.thirdColumnText}"/>
        </contents>
      </column>

      <column>
        <!-- column formatting -->
        <columnFormat columnDataFormat="numberFormat" 
                      width="45%"/>
        <!-- fourth column stamp -->
        <contents>
          <styledText text="${uix.current.fourthColumnText}"/>
        </contents>
      </column>
    </contents>
  </table>
</contents>
...