Inserting a ColumnHeader

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 insert a columnHeader:

In the Design Structure Window, expand the column node to locate the columnHeader named child node.
Right-click the columnHeader named child and choose Insert inside columnHeader | styledText .
In the Property Inspector, change the value of the text attribute for styledText to the column header text.
Or,

Enter ${uix.current.textKey} where textKey is the key to the column header text, if the column is using inline data bound to the table as shown in the example.
To add an inline style for the column header, do the following:
1. In the UIX Visual Editor, select the styledText component for the column header.
2. In the Property Inspector, modify the inlineStyle attribute. In the right column, click the icon to open a dialog, then click New to enter the CSS property values. The property element defines a single name/value pair. The name is defined by the Name attribute, and the Value by the plain-text contents of the element. For example, you can enter 'color' for Name, and 'red' for Value. In the Advanced tab, you can enter an EL syntax data binding expression or use the Bind to Data dialog to select a data source for this complex attribute.
Repeat step 1 to 4 for each column.

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 3 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}"
         columnHeaderData="${uix.data.demoTableData.demoColHeaderData}"
         rowHeaderData="${uix.data.demoTableData.demoRowHeaderData}">
    <contents>
      <!-- table's indexed children are the columns -->
      <column>
        <!-- first column stamp -->
        <contents>
          <styledText text="${uix.current.firstColumnText}"/>
        </contents>
        <!-- first column header -->
        <columnHeader>
          <styledText text="${uix.current.textKey}">
            <inlineStyle>
              <property name="color">red</property>
            </inlineStyle>
          <styledText>
        </columnHeader>
      </column>

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

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

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