dataTable

The dataTable component provides a tabular view of a UIData structure. It supports table Header and Footer facets, embedded column components, which in turn may contain column header, footer, and commandSortHeader facets. The dataTable component may also optionally be used with a dataPaginator to provide a paged table view.

The dataTable component can be used in cases where a tablular view of a data-set is required.

The followings code shows how to create a basic dataTable component:

<ice:dataTable
        var="car"
         value="#{list.cars}"
         sortColumn="#{list.sort}"
         sortAscending="#{list.ascending}"
         >
  
        <f:facet name="header">
                 <ice:outputText value="(header table)"  />
         </f:facet>
 
        <f:facet name="footer">
                 <ice:outputText value="(footer table)"  />
         </f:facet>
  
        <ice:column>
                <f:facet name="header">
                         <ice:outputText value="Type" />
                 </f:facet>
                <ice:outputText value="#{car.type}" />
                <f:facet name="footer">
                         <ice:outputText id="ftr1" value="(footer col1)"  />
                 </f:facet>
        </ice:column>
  
        <ice:column>
                <f:facet name="header">
                         <ice:outputText value="Color" />
                </f:facet>
                <ice:outputText value="#{car.color}" />
                <f:facet name="footer">
                        <ice:outputText id="ftr2" value="(footer col2)"  />
                </f:facet>
        </ice:column>
 
</ice:dataTable>
  

The following code shows how to create multiple columns.

 <ice:dataTable ..>
 	<f:facet name="header">
                    <ice:columnGroup>
                        <ice:headerRow>
                            <ice:column rowspan="2">
                                <ice:outputText value="First Name"/>
                            </ice:column>
                            <ice:column rowspan="2">
                                <ice:outputText value="Last Name"/>
                            </ice:column>
                            <ice:column colspan="2">
                                <ice:outputText value="Contact Info"/>
                            </ice:column>
                        </ice:headerRow>

                        <ice:headerRow>
                            <ice:column>
                                <ice:outputText value="Phone"/>
                            </ice:column>
                            <ice:column>
                                <ice:outputText value="Email"/>
                            </ice:column>

                        </ice:headerRow>
                    </ice:columnGroup>
                </f:facet>
                ......
                ......
</ice:dataTable>

The following code shows how to make columns resizable.

 <ice:dataTable resizable="true" ..>

The following code shows how to do logical row grouping.

               <ice:dataTable id="groupingData"
                               value="#{groupBean.employees}"
                               var="employee"
                        >
                    <f:facet name="header">
                        <ice:columnGroup>
                            <ice:headerRow>
                                <ice:column>Department </ice:column>
                                <ice:column>Sub Department </ice:column>
                                <ice:column>Name</ice:column>
                            </ice:headerRow>
                        </ice:columnGroup>
                    </f:facet>
                    <ice:column groupOn="#{employee.deptName}">
                        <ice:outputText id="deptname" value="#{employee.deptName}"/>
                    </ice:column>

                    <ice:column>
                        <ice:outputText id="subdeptname" value="#{employee.subDeptName}"/>
                    </ice:column>

                    <ice:column>
                        <ice:outputText id="employeeName" value="#{employee.name}"/>
                    </ice:column>
               </ice:dataTable>