<?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 column component</title>
      <mediaobject> 
        <imageobject>
            <imagedata fileref="images/column2.gif"/>
        </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>Column modified with colspan and breakbefore attributes</title>
      <mediaobject> 
        <imageobject>
            <imagedata fileref="images/column3.gif"/>
        </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>Column generated with rowspan attribute</title>
      <mediaobject> 
        <imageobject>
            <imagedata fileref="images/column4.gif"/>
        </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>
 <title>Look-and-Feel Customization</title>
     <para>For skinnability implementation the components use a <emphasis 
><property>style class redefinition method</property></emphasis>.</para>
    <para>Default style classes are mapped on <emphasis 
><property>skin parameters</property>.</emphasis></para>
	<para>To redefine appearance of all columns at once, there are two ways:</para>
        <itemizedlist>
        <listitem>to redefine corresponding skin parameters</listitem>
        <listitem>to add <emphasis 
            ><property>style classes</property></emphasis> used by the column to your page style sheets</listitem>
         </itemizedlist>
     </section>
		 <section>
		 <title>Definition of Custom Style Classes</title>
		 		 
		     <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>
  