<?xml version='1.0' encoding='UTF-8'?>
<section>
<sectioninfo>
<keywordset>
<keyword>rich:column</keyword>
<keyword>colspan</keyword>
<keyword>breakBefore</keyword>
</keywordset>
</sectioninfo>
    <table>
      <title>Component identification parameters </title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Name</entry>
            <entry>Value</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>component-type</entry>
            <entry>org.richfaces.Column</entry>
          </row>
          <row>
            <entry>component-class</entry>
            <entry>org.richfaces.component.html.HtmlColumn</entry>
          </row>
          <row>
          <entry>component-family</entry>
          <entry>org.richfaces.Column</entry>
          </row>
          <row>
          <entry>renderer-type</entry>
          <entry>org.richfaces.ColumnRenderer</entry>
          </row>          
          <row>
            <entry>tag-class</entry>
            <entry>org.richfaces.taglib.ColumnTag</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
 
  <section>
    <title>Creating the Component with a Page Tag</title>
    <para>To create the simplest variant of <property>column</property> on a page, use the following syntax:</para>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="XML"><![CDATA[...
    <rich:dataTable var="set">
        <rich:column>
            <h:outputText value="#{set.property1}"/>
        </rich:column>
        <!--Set of another columns and header/footer facets-->
    </rich:dataTable>
...
]]></programlisting>
  </section>
  <section>
  <title>Creating the Component Dynamically Using Java</title>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
  <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlColumn;
...
HtmlColumn myColumn = new HtmlColumn();
...
]]></programlisting>
</section>
<section>
<title>Details of Usage</title>
<para>To output a simple table, the <emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> component is used the same way as the standard 
<emphasis role="bold"><property>&lt;h:column&gt;</property></emphasis>, i.e. the following code on a page is used:</para>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
<programlisting role="XML"><![CDATA[...
    <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> 
        <rich:column>
            <f:facet name="header">State Flag</f:facet>
            <h:graphicImage value="#{cap.stateFlag}"/>
        </rich:column>
        <rich:column>
            <f:facet name="header">State Name</f:facet>
            <h:outputText value="#{cap.state}"/>
        </rich:column>
        <rich:column >
            <f:facet name="header">State Capital</f:facet>
            <h:outputText value="#{cap.name}"/>
        </rich:column>
        <rich:column>
        <f:facet name="header">Time Zone</f:facet>
            <h:outputText value="#{cap.timeZone}"/>
        </rich:column>
    </rich:dataTable>
...
]]></programlisting>
 <para>The result is:</para>
 <figure>
     <title>Generated <emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> component</title>
      <mediaobject> 
        <imageobject>
            <imagedata fileref="images/column2.png"/>
        </imageobject>
    </mediaobject>
    </figure>
<para>Now, in order to group columns with text information into one row in one column with a flag, use
 the <emphasis ><property>&quot;colspan&quot;</property></emphasis> attribute, which is similar to an HTML one, specifying that the first column contains 3 columns.
  In addition, it&apos;s necessary to specify that the next column begins from the first row with the help of the
   <emphasis ><property>&quot;breakBefore&quot;</property></emphasis> attribute = true.</para>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
   <programlisting role="XML"><![CDATA[...
     <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> 
        <rich:column colspan="3">
            <h:graphicImage value="#{cap.stateFlag}"/>
        </rich:column>
        <rich:column breakBefore="true"> 
            <h:outputText value="#{cap.state}"/>
        </rich:column>
        <rich:column >
            <h:outputText value="#{cap.name}"/>
        </rich:column>
        <rich:column>
            <h:outputText value="#{cap.timeZone}"/>
        </rich:column>
    </rich:dataTable>
...
]]></programlisting>
<para>As a result the following structure is rendered:</para>
<figure>
    <title><emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> modified with colspan and breakbefore attributes</title>
      <mediaobject> 
        <imageobject>
            <imagedata fileref="images/column3.png"/>
        </imageobject>
    </mediaobject>
    </figure>
     <para>The same way is used for <property>columns</property> grouping with the <emphasis ><property>&quot;rowspan&quot;</property></emphasis> 
    attribute that is similar to an HTML one responsible for rows quantity definition occupied with the 
    current one. The only thing to add in the example is an instruction to move onto the next row for each next after the second column.</para>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="XML"><![CDATA[...
    <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> 
        <rich:column rowspan="3">
            <f:facet name="header">State Flag</f:facet>
            <h:graphicImage value="#{cap.stateFlag}"/>
        </rich:column>
        <rich:column> 
            <f:facet name="header">State Info</f:facet>
            <h:outputText value="#{cap.state}"/>
        </rich:column>
        <rich:column breakBefore="true">
            <h:outputText value="#{cap.name}"/>
        </rich:column>
        <rich:column breakBefore="true">
            <h:outputText value="#{cap.timeZone}"/>
        </rich:column>
    </rich:dataTable>
...
]]></programlisting>
<para>As a result:</para>
<figure>
    <title><emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> generated with rowspan attribute</title>
      <mediaobject> 
        <imageobject>
            <imagedata fileref="images/column4.png"/>
        </imageobject>
    </mediaobject>
    </figure>
    <para>Hence, additionally to a standard output of a particular row provided with the <emphasis role="bold"><property>&lt;h:column&gt;</property></emphasis> 
    component, it becomes possible to group easily the rows with special HTML attribute.</para>
    <para>The columns also could be grouped in a particular way with the help of the <emphasis role="bold"><property>&lt;h:columnGroup&gt;</property></emphasis>
        component that is described in <link linkend="columnGroup">the following chapter</link>.</para>
</section>
    
    <section id="sortAndFilter">
        <title>Sorting and Filtering</title>
        <section>
            <title>Sorting</title>
            <para>In order to sort the columns you should use <emphasis><property>&quot;sortBy&quot;</property></emphasis> attribute which defines a bean property which is used for sorting of a column.</para>
            <para>By default, the first column sorted in ascending. Below you can see code example:</para>
            <para>
                <emphasis role="bold">Example:</emphasis>
            </para>
            <programlisting role="XML"><![CDATA[...
<h:form>
    <rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="300px">
        <f:facet name="header">
            <h:outputText value="Sorting Example"/>
        </f:facet>
        <rich:column sortBy="#{cap.state}">
            <f:facet name="header">
                <h:outputText value="State Name"></h:outputText>
            </f:facet>
            <h:outputText value="#{cap.state}"></h:outputText>
        </rich:column> 
        <rich:column sortBy="#{cap.name}">
            <f:facet name="header">
                <h:outputText value="State Capital"></h:outputText>
            </f:facet>
            <h:outputText value="#{cap.name}"/> 
        </rich:column>
    </rich:dataTable>
</h:form>
...
]]></programlisting>
            <para>This is result:</para>
            <figure>
                <title>Example sorting first column in ascending</title>
                <mediaobject> 
                    <imageobject>
                        <imagedata fileref="images/columnsort1.png"/>
                    </imageobject>
                </mediaobject>
            </figure>
            <para>In order to sort the data in descending order, you should double-click on the header of column, which you want to sort.</para>
            <para><emphasis><property>&quot;sortOrder&quot;</property></emphasis> attribute may be possible in three states:
                <itemizedlist>
                        <listitem>
                        <emphasis><property>&quot;none&quot;</property></emphasis>
                    </listitem>
                    <listitem>
                        <emphasis><property>&quot;ascending&quot;</property></emphasis>
                    </listitem>
                    <listitem>
                        <emphasis><property>&quot;descending&quot;</property></emphasis>.
                    </listitem>
                </itemizedlist>
               </para>
            <para>By default, data in the columns is not sorted.</para>
            <para>
                <emphasis role="bold">Example:</emphasis>
            </para>
            <programlisting role="XML"><![CDATA[...
<rich:dataTable value="#{dataTableScrollerBean.allCars}" var="category" rows="5" id="table">
        <rich:column id="make" sortBy="#{category.make}" sortOrder="#{sortingBean.makeDirection}">
            <f:facet name="header">
                <h:outputText styleClass="headerText" value="Make" />
            </f:facet>
            <h:outputText value="#{category.make}" />
        </rich:column>
        <rich:column id="model" sortBy="#{category.model}" sortOrder="#{sortingBean.modelDirection}">
            <f:facet name="header">
                <h:outputText styleClass="headerText" value="Model" />
            </f:facet>
            <h:outputText value="#{category.model}" />
        </rich:column>
        <rich:column id="price" sortBy="#{category.price}" sortOrder="#{sortingBean.priceDirection}">
            <f:facet name="header">
                <h:outputText styleClass="headerText" value="Price" />
            </f:facet>
            <h:outputText value="#{category.price}" />
        </rich:column>
        <rich:column id="mileage" sortBy="#{category.mileage}" sortOrder="#{sortingBean.mileageDirection}">
            <f:facet name="header">
                <h:outputText styleClass="headerText" value="Mileage" />
            </f:facet>
            <h:outputText value="#{category.mileage}" />
        </rich:column>
        <rich:column width="200px" id="vin">
            <f:facet name="header">
                <h:outputText styleClass="headerText" value="VIN" />
            </f:facet>
            <h:outputText value="#{category.vin}" />
        </rich:column>
        <rich:column id="stock">
            <f:facet name="header">
                <h:outputText styleClass="headerText" value="Stock" />
            </f:facet>
            <h:outputText value="#{category.stock}" />
        </rich:column>
</rich:dataTable>
...]]></programlisting>
            <para>Below you can see result:</para>
            <figure>
                <title>Sorting using the example of the <emphasis><property>&quot;sortOrder&quot;</property></emphasis> attribute</title>
                <mediaobject> 
                    <imageobject>
                        <imagedata fileref="images/columnsort2.png"/>
                    </imageobject>
                </mediaobject>
            </figure> 
            <para><emphasis><property>&quot;sortPriority&quot;</property></emphasis> attribute is defined in the <emphasis role="bold"><property>rich:dataTable</property></emphasis> component which should be defined as set of column ids in the order the columns should be set.</para>
            <para>If the columns sort order changed externally – sort priorities should be used to define which columns will be sorted first.</para>
            <para>
                <emphasis role="bold">Example:</emphasis>
            </para>
            <programlisting role="XML"><![CDATA[...
<rich:dataTable value="#{dataTableScrollerBean.allCars}"
                             var="category" rows="30" id="table"
		sortPriority="#{sortingBean.prioritList}">
        <rich:column id="make" sortBy="#{category.make}" sortOrder="#{sortingBean.makeDirection}" selfSorted="false">
            <f:facet name="header">
                <h:outputText styleClass="headerText" value="Make" />
            </f:facet>
            <h:outputText value="#{category.make}" />
        </rich:column>
        <rich:column id="model" sortBy="#{category.model}" sortOrder="#{sortingBean.modelDirection}" selfSorted="false">
            <f:facet name="header">
                <h:outputText styleClass="headerText" value="Model" />
            </f:facet>
            <h:outputText value="#{category.model}" />
        </rich:column>
        <rich:column id="price" sortBy="#{category.price}" sortOrder="#{sortingBean.priceDirection}" selfSorted="false">
            <f:facet name="header">
                <h:outputText styleClass="headerText" value="Price" />
            </f:facet>
            <h:outputText value="#{category.price}" />
        </rich:column>
        <rich:column id="mileage" sortBy="#{category.mileage}" sortOrder="#{sortingBean.mileageDirection}" selfSorted="false">
            <f:facet name="header">
                <h:outputText styleClass="headerText" value="Mileage" />
            </f:facet>
            <h:outputText value="#{category.mileage}" />
        </rich:column>
        <rich:column width="200px" id="vin">
            <f:facet name="header">
                <h:outputText styleClass="headerText" value="VIN" />
            </f:facet>
            <h:outputText value="#{category.vin}" />
        </rich:column>
        <rich:column id="stock">
            <f:facet name="header">
                <h:outputText styleClass="headerText" value="Stock" />
            </f:facet>
            <h:outputText value="#{category.stock}" />
        </rich:column>
        <f:facet name="footer">
            <rich:datascroller />
        </f:facet>
</rich:dataTable>
...]]></programlisting>
            <para><emphasis><property>&quot;selfSorted&quot;</property></emphasis> attribute will manage if it's header will be clickable, icons rendered and sorting will be fired after click on the header. 
                So, developer will be able to define the <emphasis><property>sortBy</property></emphasis> property and conditionally use internal sorting.</para>
            <para>The default attribute is set to <emphasis><property>&quot;true&quot;</property></emphasis>.</para>  
            <para>
                <emphasis role="bold">Example:</emphasis>
            </para>
            <programlisting role="XML"><![CDATA[...
<h:form>
    <rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="300px" columnClasses="center">
        <f:facet name="header">
	<h:outputText value="Sorting Example"/>
        </f:facet>
        <rich:column>
	<f:facet name="header">
	    <h:outputText value="State Flag"></h:outputText>
	</f:facet>
	<h:graphicImage value="#{cap.stateFlag}"/> 
        </rich:column>
        <rich:column sortBy="#{cap.state}" selfSorted="false"> 
	<f:facet name="header">
	    <h:outputText value="State Name"></h:outputText>
	</f:facet>
	<h:outputText value="#{cap.state}"></h:outputText>
        </rich:column> 
        <rich:column sortBy="#{cap.name}">
	<f:facet name="header">
	    <h:outputText value="State Capital"></h:outputText>
	</f:facet>
	<h:outputText value="#{cap.name}"/> 
        </rich:column>
    </rich:dataTable>
</h:form>
...
]]></programlisting>     
            <para>As a result, the second column will be unavailable for sorting.</para>
            <para><emphasis><property>&quot;sortable&quot;</property></emphasis> attribute  is used with <emphasis role="bold"><property>&lt;rich:scrollableDataTable&gt;</property></emphasis> component.</para>
            <para>Below you can find example code of usage and result:</para>
            <para>
                <emphasis role="bold">Example:</emphasis>
            </para>
            <programlisting role="XML"><![CDATA[...
<h:form>
   <rich:spacer height="30" />
    <rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1" height="400px" width="700px" id="carList" rows="40" columnClasses="col"
		                      value="#{dataTableScrollerBean.allCars}" var="category" sortMode="single"
			               binding="#{dataTableScrollerBean.table}"
			               selection="#{dataTableScrollerBean.selection}">
        <rich:column id="make" sortable="true">
	<f:facet name="header">
	    <h:outputText styleClass="headerText" value="Make" />
	</f:facet>
	<h:outputText value="#{category.make}" />
        </rich:column>
        <rich:column id="model">
	<f:facet name="header">
	        <h:outputText styleClass="headerText" value="Model" />
	</f:facet>
	<h:outputText value="#{category.model}" />
        </rich:column>
        <rich:column id="price">
	<f:facet name="header">
	    <h:outputText styleClass="headerText" value="Price" />
	</f:facet>
	<h:outputText value="#{category.price}" />
        </rich:column>
        <rich:column id="mileage">
	<f:facet name="header">
	    <h:outputText styleClass="headerText" value="Mileage" />
               </f:facet>
	<h:outputText value="#{category.mileage}" />
        </rich:column>
        <rich:column width="200px" id="vin">
	<f:facet name="header">
	    <h:outputText styleClass="headerText" value="VIN" />
               </f:facet>
	<h:outputText value="#{category.vin}" />
        </rich:column>
        <rich:column id="stock">
            <f:facet name="header">
                <h:outputText styleClass="headerText" value="Stock" />
            </f:facet>
            <h:outputText value="#{category.stock}" />
        </rich:column>
    </rich:scrollableDataTable>
   <rich:spacer height="20px"/>
</h:form>
...]]></programlisting>
            <para>As a result, only the first column can be sorted.</para>
            <figure>
                <title>Sorting using the example of the <emphasis><property>&quot;sortable&quot;</property></emphasis> attribute</title>
                <mediaobject> 
                    <imageobject>
                        <imagedata fileref="images/columnsort3.png"/>
                    </imageobject>
                </mediaobject>
            </figure>
            <para><emphasis><property>&quot;sortExpression&quot;</property></emphasis> attribute defines a bean property which is used for sorting of a column. Usage of this attribute is not recommendable.</para>
            <para>Sorting can&apos;t be used together with pagination.</para>
        </section>
        <section>
            <title>Filtering</title>
            <para>In order to filter the column value, in accordance with the entered value, it is necessary to use a <emphasis><property>&quot;filterBy&quot;</property></emphasis> attribute.</para>
            <para>If <emphasis><property>&quot;filterValue&quot;</property></emphasis> attribute isn&apos;t empty from the beginning – table should be filtered on first rendering.</para>
            <para>Below you can see example code and the result of its use:</para>
            <para>
                <emphasis role="bold">Example:</emphasis>
            </para>
            <programlisting role="XML"><![CDATA[...
<h:form>
    <rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="500px">
        <f:facet name="header">
            <h:outputText value="Filtering Example"/>
        </f:facet>
        <rich:column> 
	<f:facet name="header">
	    <h:graphicImage value="/images/ico_DataTable.gif"></h:graphicImage>
	</f:facet>
	<h:graphicImage value="#{cap.stateFlag}"/>
        </rich:column>
        <rich:column filterBy="#{cap.state}" filterDefaultLabel="click to filter" filterValue="#{filterName.filterBean}">
	<h:outputText value="#{cap.state}"></h:outputText>
        </rich:column> 
        <rich:column filterBy="#{cap.name}" filterDefaultLabel="click to filter">
	<h:outputText value="#{cap.name}"/> 
        </rich:column>
    </rich:dataTable>
</h:form>
...]]></programlisting>     
            <figure>
                <title>Filtering using the example of the <emphasis><property>&quot;filterBy&quot;</property></emphasis> attribute</title>
                <mediaobject> 
                    <imageobject>
                        <imagedata fileref="images/columnFilt1.png"/>
                    </imageobject>
                </mediaobject>
            </figure>  
            <para><emphasis><property>&quot;filterExpression&quot;</property></emphasis> attribute is used to check if the row should be present in result. Any expression could be used inside and should return boolean value. </para>
            <para>Below you can find example code:</para>
            <para>
                <emphasis role="bold">Example:</emphasis>
            </para>
            <programlisting role="XML"><![CDATA[...
<h:form id="form">
    <h:inputText value="#{capitalsBean.filter}">
        <a4j:support event="onblur" reRender="dataTable" />
    </h:inputText>
    <rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="500px">
        <f:facet name="header">
            <h:outputText value="Filtering Example" />
        </f:facet>
        <rich:column>
            <f:facet name="header">
                <h:graphicImage value="/images/ico_DataTable.gif"/>
            </f:facet>
            <h:graphicImage value="#{cap.stateFlag}" />
        </rich:column>
        <rich:column filterBy="#{cap.state}" filterDefaultLabel="click to filter" filterExpression="#{form:startWith(cap.name,cap.state)}">
            <h:outputText value="#{cap.state}"></h:outputText>
        </rich:column>
        <rich:column filterBy="#{cap.name}" filterDefaultLabel="click to filter">
            <h:outputText value="#{cap.name}" />
        </rich:column>
    </rich:dataTable>
</h:form>
...]]></programlisting>
<!--           <para><emphasis><property>&quot;filterFunction&quot;</property></emphasis> attribute has three values:</para>
            <itemizedlist>
                <listitem><emphasis><property>&quot;startWith&quot;</property></emphasis>(by default)</listitem>
                <listitem><emphasis><property>&quot;contains&quot;</property></emphasis></listitem>
                <listitem><emphasis><property>&quot;equals&quot;</property></emphasis></listitem>                
            </itemizedlist>
            <para>Example of usage you could see in the previous example.</para> -->  
            <para><emphasis><property>&quot;filterEvent&quot;</property></emphasis> attribute is used for customization. </para>
            <para><emphasis><property>&quot;filterMethod&quot;</property></emphasis> should be called for every object of the table. It should get current object and return boolean value. </para>
                        
        </section>
        
    </section>
    
 <section>
     <title>Look-and-Feel Customization</title>
     
     <para>For skinnability implementation, the components use a <emphasis>
         <property>style class redefinition method</property>.
     </emphasis> Default style classes are mapped on <emphasis>
         <property>skin parameters.</property>
     </emphasis></para>
     
     <para>There are two ways to redefine the appearance of all <emphasis role="bold">
         <property>&lt;rich:column&gt;</property>
     </emphasis> components at once:</para>
     
     <itemizedlist>
         <listitem>
             <para>Redefine the corresponding skin parameters</para>
         </listitem>
         
         <listitem>
             <para>Add to your style sheets <emphasis>
                 <property>style classes</property>
             </emphasis> used by a <emphasis role="bold">
                 <property>&lt;rich:column&gt;</property>
             </emphasis> component</para>
         </listitem>
     </itemizedlist>
 </section>
    
    <section>
        <title>Skin Parameters Redefinition</title>
        
        <para>Skin parameters redefinition for <emphasis role="bold">
            <property>&lt;rich:column&gt;</property>
        </emphasis> are the same as for the <emphasis role="bold">
            <property>&lt;rich:dataTable&gt;</property>
        </emphasis> <link linkend="SPR">component</link>.</para>
    </section>
    
		 <section>
		 <title>Definition of Custom Style Classes</title>
		     
		     <para>Custom style classes for <emphasis role="bold">
		         <property>&lt;rich:column&gt;</property>
		     </emphasis> are the same as for  the <emphasis role="bold">
		         <property>&lt;rich:dataTable&gt;</property>
		     </emphasis> <link linkend="DofCCS">component</link>.
		     </para>
		 		 
		     <para>In order to redefine styles for all <emphasis role="bold">
		         <property>&lt;rich:column&gt;</property>
		     </emphasis> components on a page using CSS, it&apos;s enough to create classes with the
		         same names and define necessary properties in them.</para>
		     
		     <para>To change styles of particular <emphasis role="bold">
		         <property>&lt;rich:column&gt;</property>
		     </emphasis> components, define your own style classes in the corresponding <emphasis
		         role="bold">
		         <property>&lt;rich:column&gt;</property>
		     </emphasis>attributes.</para>
                                </section>
    
    <section>
        <title>Relevant Resources Links</title>
        <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?c=column"
            >Here</ulink> you can see the example of <emphasis role="bold"
                ><property>&lt;rich:column&gt;</property></emphasis> usage and sources for the given example. </para>
    </section>          
</section>
  