<?xml version='1.0' encoding='UTF-8'?>

<section>
  <sectioninfo>
    <keywordset>
      <keyword>table</keyword>
      <keyword>rich:dataTable</keyword>
      <keyword>HtmlDataTable</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.DataTable</entry>
        </row>
        <row>
          <entry>component-class</entry>
          <entry>org.richfaces.component.html.HtmlDataTable</entry>
        </row>
        <row>
          <entry>component-family</entry>
          <entry>org.richfaces.DataTable</entry>
        </row>
        <row>
          <entry>renderer-type</entry>
          <entry>org.richfaces.DataTableRenderer</entry>
        </row>
        <row>
          <entry>tag-class</entry>
          <entry>org.richfaces.taglib.DataTableTag</entry>
        </row>
      </tbody>
    </tgroup>
  </table>

  <section>
    <title>Creating the Component with a Page Tag</title>
    <para>Here is a simple example as it could be used on a page:</para>

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

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDataTable;
...
HtmlDataTable myTable = new HtmlDataTable();
...
]]></programlisting>
  </section>
  <section>
    <title>Details of Usage</title>
    <para>The <property>table</property> component is very similar to the custom JSF dataTable one,
      except for the common peculiarities of any rich component:</para>
    <itemizedlist>
      <listitem>Skin support. The <property>table</property> completely meets a three-class
        principle of Rich Faces skinnability</listitem>
      <listitem>Support of Ajax updates for a limited set of strings</listitem>
    </itemizedlist>
    <para>Skins support is described in the <link linkend="ArchitectureOverview">corresponding
        section</link>. Ajax support is possible because the component is created basing on the
        <emphasis role="bold">
        <property>&lt;a4j:repeat&gt;</property>
      </emphasis> component and as a result the component has its possibilities of Ajax updates for
      a limited set of strings. The component is implemented with the <emphasis>
        <property>&quot;ajaxKeys&quot;</property>
      </emphasis> attribute for a <property>table</property> and in contrast to the <emphasis
        role="bold">
        <property>&lt;a4j:repeat&gt;</property>
      </emphasis> outputs the standard HTML structure for table rendering.</para>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="XML"><![CDATA[...
    <rich:dataTable value="#{capitalsBean.capitals}" var="capitals" 
            ajaxKeys="#{bean.ajaxSet}" binding="#{bean.table}" id="table">
            <!--Set of columns and header/footer facets-->
    </rich:dataTable>
...
    <a4j:commandButton action="#{bean.someAction}" reRender="table"/>
...
]]></programlisting>
    <para>For such a table during <property>someAction</property> method processing called with AJAX
      request when the key is pressed it&apos;s possible to fill in lot&apos;s of ajaxKeys
      with strings indices that are to be updated. A resulting output on the client contains only
      required strings and they are updated in the tree, even when update is specified for the whole
      table.</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 dataTables 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 dataTable to your page style sheets</listitem>
    </itemizedlist>
  </section>
  
  <section>   
    <title>Skin Parameters Redefinition</title>
    
    <table>
      <title>Skin parameters redefinition for a table</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>
            <entry>CSS properties</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>tableBackgroundColor</entry>
            <entry>background-color</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    
    <table>
      <title>Skin parameters redefinition for a header</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>
            <entry>CSS properties</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>headerBackgroundColor</entry>
            <entry>background-color</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    
    <table>
      <title>Skin parameters redefinition for a footer</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>
            <entry>CSS properties</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>tableFooterBackgroundColor</entry>
            <entry>background-color</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    
    <table>
      <title>Skin parameters redefinition for a column header</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>
            <entry>CSS properties</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>additionalBackgroundColor</entry>
            <entry>background-color</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    
    <table>
      <title>Skin parameters redefinition for a column footer</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>
            <entry>CSS properties</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>tableSubfooterBackgroundColor</entry>
            <entry>background-color</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    
    <table>
      <title>Skin parameters redefinition for cells</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>
            <entry>CSS properties</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>generalSizeFont</entry>
            <entry>font-size</entry>
          </row>
          <row>
            <entry>generalTextColor</entry>
            <entry>color</entry>
          </row>
          <row>
            <entry>generalFamilyFont</entry>
            <entry>font-family</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    
  </section>
  
  <section>
    <title>Definition of Custom Style Classes</title>
    
    <para>On the screenshot there are classes names that define styles for component elements.</para>
    
    <figure>
      <title>DataTable class names</title>
      <mediaobject>
        <imageobject>
          <imagedata fileref="images/dataTable2.png" scalefit="1"/>
        </imageobject>
      </mediaobject>
    </figure>
        
    <table>
      <title>Classes names that define a table appearance</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Class name</entry>
            <entry>Description</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>rich-table</entry>
            <entry>Defines styles for all table</entry>
          </row>
          <row>
            <entry>rich-table-caption</entry>
            <entry>Defines styles for a &quot;caption&quot; facet element</entry>
          </row>
          <row>
            <entry>rich-table-header</entry>
            <entry>Defines styles for a table header row</entry>
          </row>
          <row>
            <entry>rich-table-headercell</entry>
            <entry>Defines styles for a header cell</entry>
          </row>
          <row>
            <entry>rich-table-subheader</entry>
            <entry>Defines styles for a column header</entry>
          </row>
          <row>
            <entry>rich-table-subheadercell</entry>
            <entry>Defines styles for a column header cell</entry>
          </row>
          <row>
            <entry>rich-table-cell</entry>
            <entry>Defines styles for a table cell</entry>
          </row>
          <row>
            <entry>rich-table-row</entry>
            <entry>Defines styles for a table row</entry>
          </row>
          <row>
            <entry>rich-table-subfooter</entry>
            <entry>Defines styles for a column footer</entry>
          </row>
          <row>
            <entry>rich-table-subfootercell</entry>
            <entry>Defines styles for a column footer cell</entry>
          </row>
          <row>
            <entry>rich-table-footer</entry>
            <entry>Defines styles for a footer row</entry>
          </row>
          <row>
            <entry>rich-table-footercell</entry>
            <entry>Defines styles for a footer cell</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    <para>To redefine an appearance of all <property>tables</property> on a page, redefine the
      corresponding class in the CSS file used with the page.</para>
    <para>To redefine a style of a particular page, use <emphasis>
        <property>&quot;component class&quot;</property>
      </emphasis> attributes which list is the same as the <property>dataTable</property> one and is
      known to you.</para>
  </section>
  <section>
    <title>Relevant Resources Links</title>
    <para>
      <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?c=dataTable"
        >Here</ulink> you can see the example of <emphasis role="bold"
        ><property>&lt;rich:dataTable&gt;</property></emphasis> usage and sources for the given example. </para>
    <para>The article about <emphasis role="bold"><property>&lt;rich:dataTable&gt;</property></emphasis>
      flexibility can be found <ulink url="http://labs.jboss.com/wiki/RichFacesArticleDataTable"
        >here</ulink>.</para>
    <para>More information about using <emphasis role="bold"
      ><property>&lt;rich:dataTable&gt;</property></emphasis> and <emphasis role="bold"
        ><property>&lt;rich:subTable&gt;</property></emphasis> could be found on the <ulink
          url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4059044#4059044">RichFaces Users Forum.</ulink>
    </para>
    <para>How to use <emphasis role="bold"><property>&lt;rich:dataTable&gt;</property></emphasis> and <emphasis
      role="bold"><property>&lt;rich:dataScroller&gt;</property></emphasis> in a context of Extended
      Data Model see <ulink
        url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;t=115636"
        >here</ulink>.</para>
  </section>
</section>
