<section role="NotInToc" id="rich_extendedDataTable">
   <title>
				&lt;
				rich:extendedDataTable
				&gt;
				<emphasis role="since">
         <superscript> available since <emphasis role="version">3.2.2</emphasis>
         </superscript>
      </emphasis>
   </title>
   <section>
      <title>Description</title>
   	<para>The component is meant for rendering tables and differs from the standard <emphasis role="bold">
                                        <property moreinfo="none">&lt;rich:dataTable&gt;</property>
   	</emphasis> component in that supports some extended features.</para>
      <figure float="0">
         <title>
            <emphasis role="bold">
                                                  <property moreinfo="none">&lt;rich:extendedDataTable&gt;</property>
                                        </emphasis> component</title>
         <mediaobject>
            <imageobject>
               <imagedata fileref="images/extendedDataTable_init.png" width="75%"/>
            </imageobject>
         </mediaobject>
      </figure>
   </section>
	<section id="extDataTable_key_features">
      <title>Key Features</title>
      <itemizedlist>
         <listitem>
            <para>Possibility to scroll data</para>
         </listitem>
         <listitem>
            <para>Possibility to add an attribute to set the kind of
                                                  selection (none, single line or multiple
                                        lines)</para>
         </listitem>
         <listitem>
            <para>Possibility to change the sequence of the displayed
                                                  columns by dragging the column-header to another
                                                  position</para>
         </listitem>
         <listitem>
            <para>Possibility to show or hide columns by selecting or
                                                  deselecting them in a context menu</para>
         </listitem>
         <listitem>
            <para>Possibility to save the current settings (visible
                                                  columns, column width, sequence of the columns) to
                                                  be reused the next time the page will be
                                        shown</para>
         </listitem>
         <listitem>
            <para>Possibility to combine rows to groups</para>
         </listitem>
      </itemizedlist>
      <para>
		<emphasis role="bold"><property moreinfo="none">&lt;rich:extendedDataTable&gt;</property></emphasis> includes the following attributes not included with <emphasis role="bold"><property moreinfo="none">&lt;rich:dataTable&gt;</property></emphasis>:
      </para>
	<itemizedlist>
		<listitem>
			<property moreinfo="none">activeClass</property>
		</listitem>
		<listitem>
			<property moreinfo="none">activeRowKey</property>
		</listitem>
		<listitem>
			<property moreinfo="none">enableContextMenu</property>
		</listitem>
		<listitem>
			<property moreinfo="none">groupingColumn</property>
		</listitem>
		<listitem>
			<property moreinfo="none">height</property>
		</listitem>
		<listitem>
			<property moreinfo="none">noDataLabel</property>
		</listitem>
		<listitem>
			<property moreinfo="none">onselectionchange</property>
		</listitem>
		<listitem>
			<property moreinfo="none">selectedClass</property>
		</listitem>
		<listitem>
			<property moreinfo="none">selection</property>
		</listitem>
		<listitem>
			<property moreinfo="none">selectionMode</property>
		</listitem>
		<listitem>
			<property moreinfo="none">tableState</property>
		</listitem>
	</itemizedlist>
	<para>
		<emphasis role="bold"><property moreinfo="none">&lt;rich:extendedDataTable&gt;</property></emphasis> does <emphasis>not</emphasis> include the following attributes available with <emphasis role="bold"><property moreinfo="none">&lt;rich:dataTable&gt;</property></emphasis>:
	</para>
	<itemizedlist>
		<listitem>
			<property moreinfo="none">columns</property>
		</listitem>
		<listitem>
			<property moreinfo="none">columnsWidth</property>
		</listitem>
		<listitem>
			<property moreinfo="none">onRowContextMenu</property>
		</listitem>
	</itemizedlist>
   </section>
   <section>
      <title>Details of Usage</title>
      <para>The <emphasis role="bold">
                                        <property moreinfo="none">&lt;rich:extendedDataTable&gt;</property>
                              </emphasis> component is similar to the <emphasis role="bold">
                                        <property moreinfo="none">&lt;rich:dataTable&gt;</property>
                              </emphasis>, but <emphasis role="bold">
      	<property moreinfo="none">&lt;rich:extendedDataTable&gt;</property>
                              </emphasis> supports some extended features (see the &quot;Key Features&quot; section above). 
      	The data in the component is scrollable. You can also set the
                              type of selection (<emphasis>
                                        <property moreinfo="none">"none",</property>
                              </emphasis>
                              <emphasis>
                                        <property moreinfo="none">"single"</property>
                              </emphasis> or <emphasis>
                                        <property moreinfo="none">"multi"</property>
                              </emphasis> lines). Selection of multiple lines is possible using
                              Shift and Ctrl keys.</para>
      <para>Here is an example:</para>
      <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
      <programlisting role="XML" format="linespecific"><![CDATA[...
<rich:extendedDataTable id="edt" value="#{extendedDT.dataModel}" var="edt" width="500px" height="500px" selectedClass="dataTableSelectedRow" sortMode="single" selectionMode="multi" selection="#{extendedDT.selection}" rowKeyVar="rkvar" tableState="#{extendedDT.tableState}">
       <rich:column id="id" headerClass="dataTableHeader" width="50" label="Id" sortable="true" sortBy="#{edt.id}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
              <f:facet name="header">
                     <h:outputText value="Id" />
              </f:facet>
              <h:outputText value="#{edt.id}" />
       </rich:column>
       <rich:column id="name" width="300" headerClass="dataTableHeader" label="Name" sortable="true" sortBy="#{edt.name}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon" filterBy="#{edt.name}" filterEvent="onkeyup" visible="false"> 
              <f:facet name="header"> 
                     <h:outputText value="Name" />
              </f:facet>
              <h:outputText value="#{edt.name}" />
       </rich:column>
       <rich:column id="date" width="100" headerClass="dataTableHeader" label="Date" sortable="true" comparator="#{extendedDT.dateComparator}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
              <f:facet name="header">
                     <h:outputText value="Date" />
              </f:facet>
              <h:outputText value="#{edt.date}"><f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" />
              </h:outputText>
       </rich:column>
       <rich:column id="group" width="50" headerClass="dataTableHeader" label="Group" sortable="true" sortBy="#{edt.group}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
              <f:facet name="header">
                     <h:outputText value="Group" />
              </f:facet>
              <h:outputText value="#{edt.group}" />
       </rich:column>
</rich:extendedDataTable>
...]]></programlisting>
      <figure float="0">
         <title>
            <emphasis role="bold">
                                                  <property moreinfo="none">&lt;rich:extendedDataTable&gt;</property>
                                        </emphasis> component with selected multiple lines</title>
         <mediaobject>
            <imageobject>
               <imagedata fileref="images/extendedDataTable_init2.png" width="75%"/>
            </imageobject>
         </mediaobject>
      </figure>
      <para>Information about sorting and filtering can be found in <link linkend="sort">RichFaces Developer Guide section on sorting</link>.
                    </para>
      <para>
                          For external filtering the 
                          <emphasis role="bold">
            <property moreinfo="none">&lt;rich:extendedDataTable&gt;</property>
         </emphasis> 
                          component supports the <emphasis>
            <property moreinfo="none">"filter"</property>
         </emphasis> facet
                          for <emphasis role="bold">
            <property moreinfo="none">&lt;rich:column&gt;</property>
         </emphasis>.
                          In this facet you can define your own controls for filtering which will be positioned like built-in filter controls.
                          Rest of the filter scenario is the same as described in the <link linkend="filter">RichFaces Developer Guide section on filtering</link>.
                    </para>
      <para> In the example the <emphasis>
                                        <property moreinfo="none">"selection"</property>
                              </emphasis> attribute contains an object with selected rows.</para>
      <note>
         <title>Note:</title>
      	<para> The <emphasis>
      		<property moreinfo="none">"height"</property>
      	</emphasis> attribute is mandatory. The default value is <emphasis>
                                                  <property moreinfo="none">"500px"</property>
                                        </emphasis>. </para>
      </note>
      <para> Menu on the right side of the column header is used to perform actions like
                              sorting, grouping, hiding columns. </para>
      <para>This is an example:</para>
      <figure float="0">
         <title>Column menu</title>
         <mediaobject>
            <imageobject>
               <imagedata fileref="images/extendedDataTable_init3.png" width="50%"/>
            </imageobject>
         </mediaobject>
      </figure>
      <para> After selecting a "Group by this column" option, you can see the data
                              grouped. You can collapse and expand groups by clicking on a group
                              header. </para>
      <para>This is an example:</para>
      <figure float="0">
         <title>
            <emphasis role="bold">
                                                  <property moreinfo="none">&lt;rich:extendedDataTable&gt;</property>
                                        </emphasis> component with grouped data</title>
         <mediaobject>
            <imageobject>
               <imagedata fileref="images/extendedDataTable_init4.png" width="75%"/>
            </imageobject>
         </mediaobject>
      </figure>
      <para> The <emphasis>
                                        <property moreinfo="none">"label"</property>
                              </emphasis> attribute in <emphasis role="bold">
                                        <property moreinfo="none">&lt;rich:column&gt;</property>
                              </emphasis> sets the name of the column, which is used when dragging
                              columns (in drag window) and in context menu, in "Columns" submenu. </para>
      <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
      <programlisting role="XML" format="linespecific"><![CDATA[...
<rich:column id="name" label="#{msg['name']}"
...]]></programlisting>
      <figure float="0">
         <title>
            <emphasis role="bold">
                                                  <property moreinfo="none">&lt;rich:extendedDataTable&gt;</property>
                                        </emphasis> component with Drag&amp;Drop column 'Name'</title>
         <mediaobject>
            <imageobject>
               <imagedata fileref="images/extendedDataTable_init5.png" width="75%"/>
            </imageobject>
         </mediaobject>
      </figure>
      <para>The <emphasis role="bold">
                                        <property moreinfo="none">&lt;rich:extendedDataTable&gt;</property>
      </emphasis>  component  columns can be hidden: </para>
      <figure float="0">
         <title>
            <emphasis role="bold">
                                                  <property moreinfo="none">&lt;rich:extendedDataTable&gt;</property>
                                        </emphasis> component with hidden column 'Id' and 'Group'</title>
         <mediaobject>
            <imageobject>
               <imagedata fileref="images/extendedDataTable_init6.png" width="75%"/>
            </imageobject>
         </mediaobject>
      </figure>
      <!--   <para>
  For each column can be set the filter.
  </para>
  
  <para>
  <emphasis role="bold">Example:</emphasis>
  </para>
  <programlisting role="XML"><![CDATA[<![CDATA[...
  <rich:column id="name"
  filterBy="#{entity.name}" filterEvent="onkeyup">
...
]]>]]></programlisting>
  
  <figure>
  <title><emphasis role="bold">
  <property>&lt;&extDataTable;&gt;</property>
  </emphasis> component with filtered column 'Name'</title>
  <mediaobject>
  <imageobject>
  <imagedata fileref="images/extendedDataTable_filtered.png" width="75%"/>
  </imageobject>
  </mediaobject>
  </figure>
  --><para>The 
         <emphasis>
                                        <property moreinfo="none">"tableState"</property>
                              </emphasis> attribute can be used to bind state of the table (column
                              width, column position, visible, sequence, grouping...) to a
                              backing-bean string property, for a later used. This state can be for
                              example saved to a database, and it is different from standard JSF
                              state saving mechanisms.</para>
      <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
      <programlisting role="XML" format="linespecific"><![CDATA[...
<rich:extendedDataTable tableState="#{extendedDT.tableState}">
...
]]></programlisting>
   </section>
   <section>
      <title>Reference Data</title>
      <para>
         <ulink url="&tlddoc;rich/extendedDataTable.html">Table of 
							&lt;rich:extendedDataTable&gt; 
							 attributes</ulink>.
						</para>
      <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.ExtendedDataTable</entry>
               </row>
               <row>
                  <entry>component-class</entry>
                  <entry>org.richfaces.component.html.HtmlExtendedDataTable</entry>
               </row>
               <row>
                  <entry>component-family</entry>
                  <entry>org.richfaces.ExtendedDataTable</entry>
               </row>
               <row>
                  <entry>renderer-type</entry>
                  <entry>org.richfaces.ExtendedDataTableRenderer</entry>
               </row>
               <row>
                  <entry>tag-class</entry>
                  <entry>org.richfaces.taglib.ExtendedDataTableTag</entry>
               </row>
            </tbody>
         </tgroup>
      </table>
      <table>
         <title>Facets</title>
         <tgroup cols="2">
            <thead>
               <row>
                  <entry>Facet</entry>
                  <entry>Description</entry>
               </row>
            </thead>
            <tbody>
               <row>
                  <entry>header</entry>
                  <entry>Redefines the header content</entry>
               </row>
               <row>
                  <entry>footer</entry>
                  <entry>Redefines the footer content</entry>
               </row>
               <row>
                  <entry>caption</entry>
                  <entry>Redefines the caption content</entry>
               </row>
            </tbody>
         </tgroup>
      </table>
   	
   	<table>
   		<title>Style classes (selectors) with the corresponding skin parameters</title>
   		<tgroup cols="4">
   			<thead>
   				<row>
   					<entry>Class (selector) name</entry>
   					<entry>Description</entry>
   					<entry>Skin Parameters</entry>
   					<entry>CSS properties mapped</entry>
   					
   				</row>
   			</thead>
   			<tbody>
   				<row>
   					<entry>.extdt-empty-cell</entry>
   					<entry>Defines styles for empty cells of the component</entry>
   					<entry>tableBorderWidth, tableBorderColor</entry>
   					<entry>border-bottom</entry>
   				</row>
   				
   				<row>
   					<entry>.extdt-table-layout</entry>
   					<entry>Defines styles for the table layout</entry>
   					<entry>tableBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="3">.extdt-cell</entry>
   					<entry morerows="3">Defines styles for the table cells</entry>
   					<entry>tableBorderWidth, tableBorderColor</entry>
   					<entry>border-right, border-bottom</entry>
   				</row>
   				<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>
   				
   				<row>
   					<entry>.extdt-header</entry>
   					<entry>Defines styles for the header</entry>
   					<entry>headerBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				
   				<row>
   					<entry>.extdt-header-continue</entry>
   					<entry>Defines styles for all header lines after the first</entry>
   					<entry>headerBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="4">.extdt-headercell</entry>
   					<entry morerows="4">Defines styles for the header cells</entry>
   					<entry>tableBorderWidth, tableBorderColor</entry>
   					<entry>border-right, border-bottom</entry>
   				</row>
   				<row>
   					<entry>generalSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>headerTextColor</entry>
   					<entry>color</entry>
   				</row>
   				<row>
   					<entry>headerWeightFont</entry>
   					<entry>font-weight</entry>
   				</row>
   				<row>
   					<entry>generalFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				
   				<row>
   					<entry>.extdt-subheader</entry>
   					<entry>Defines styles for the subheader</entry>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="1">.extdt-table-filterrow</entry>
   					<entry morerows="1">Defines styles for the filter row</entry>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				<row>
   					<entry>tableBorderWidth, tableBorderColor</entry>
   					<entry>border-top</entry>
   				</row>
   				
   				<row>
   					<entry morerows="3">.extdt-subheadercell</entry>
   					<entry morerows="3">Defines styles for the subheader cells</entry>
   					<entry>tableBorderWidth, tableBorderColor</entry>
   					<entry>border-right, border-bottom</entry>
   				</row>
   				<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>
   				
   				<row>
   					<entry morerows="5">.extdt-caption</entry>
   					<entry morerows="5">Defines styles for the table caption</entry>
   					<entry>tableBorderWidth, tableBorderColor</entry>
   					<entry>border-bottom</entry>
   				</row>
   				<row>
   					<entry>generalSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>headerWeightFont</entry>
   					<entry>font-weight</entry>
   				</row>
   				<row>
   					<entry>generalTextColor</entry>
   					<entry>color</entry>
   				</row>
   				<row>
   					<entry>generalFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				<row>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				
   				<row>
   					<entry morerows="4">.extdt-footercell</entry>
   					<entry morerows="4">Defines styles for the footer cell</entry>
   					<entry>tableBorderWidth, tableBorderColor</entry>
   					<entry>border-right, border-bottom</entry>
   				</row>
   				<row>
   					<entry>generalSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				<row>
   					<entry>generalTextColor</entry>
   					<entry>color</entry>
   				</row>
   				<row>
   					<entry>headerWeightFont</entry>
   					<entry>font-weight</entry>
   				</row>
   				<row>
   					<entry>generalFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				
   				<row>
   					<entry morerows="3">.extdt-subfootercell</entry>
   					<entry morerows="3">Defines styles for the subfooter cell</entry>
   					<entry>tableBorderWidth, tableBorderColor</entry>
   					<entry>border-right, border-bottom</entry>
   				</row>
   				<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>
   				
   				<row>
   					<entry>.extdt-row-selected</entry>
   					<entry>Defines styles for the selected row</entry>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				
   				<row>
   					<entry>.extdt-row-active</entry>
   					<entry>Defines styles for the active row</entry>
   					<entry>tabDisabledTextColor</entry>
   					<entry>color</entry>
   				</row>
   			</tbody>
   		</tgroup>
   	</table>
   	
   	<table>
   		<title>Style classes (selectors) without skin parameters</title>
   		<tgroup cols="2">
   			<thead>
   				<row>
   					<entry>Class name</entry>
   					<entry>Description</entry>
   				</row>
   			</thead>
   			<tbody>
   				<row>
   					<entry>.rich-extdt</entry>
   					<entry>Defines styles for all table</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-extdt-caption</entry>
   					<entry>Defines styles for a "caption" facet element</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-extdt-header</entry>
   					<entry>Defines styles for a table header
   						row</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-extdt-header-continue</entry>
   					<entry>Defines styles for all header lines after the first</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-extdt-subheader</entry>
   					<entry>Defines styles for a column header</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-extdt-footer</entry>
   					<entry>Defines styles for a footer row</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-extdt-footer-continue</entry>
   					<entry>Defines styles for all footer lines after the first</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-extdt-subfooter</entry>
   					<entry>Defines styles for a column footer</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-extdt-headercell</entry>
   					<entry>Defines styles for a header cell</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-extdt-subheadercell</entry>
   					<entry>Defines styles for a column header cell</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-extdt-cell</entry>
   					<entry>Defines styles for a table cell</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-extdt-row</entry>
   					<entry>Defines styles for a table row</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-extdt-firstrow</entry>
   					<entry>Defines styles for a table start row</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-extdt-footercell</entry>
   					<entry>Defines styles for a footer cell</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-extdt-subfootercell</entry>
   					<entry>Defines styles for a column footer cell</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-extdt-group-cell</entry>
   					<entry>Defines styles for a grouping row cell</entry>
   				</row>
   			</tbody>
   		</tgroup>
   	</table>
	<para>You can find all necessary information about style classes redefinition in 
						<link linkend="customstyles">Definition of Custom Style Classes</link> 
							section.</para>
						</section>
   <section>
      <title>Relevant Resources Links</title>
      <para>
      	Some additional information about the component usage can be found 
	  <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/extendedDataTable.jsf?c=extendedDataTable">on its LiveDemo page</ulink>.</para>
   </section>
</section>
