<section role="NotInToc" id="rich_scrollableDataTable">
   <title>
				&lt;
				rich:scrollableDataTable
				&gt;
				<emphasis role="since">
         <superscript> available since <emphasis role="version">3.1.0</emphasis>
         </superscript>
      </emphasis>
   </title>
   <section>
        <title>Description</title>
        <para>
            The <emphasis role="bold">
            <property>&lt;rich:scrollableDataTable&gt;</property>
         </emphasis> component is used for the table-like component creation.
		The component just adds the set of additional features described below in comparison with the standard table.
		</para>
		
		    <figure>
		       <title>
            <emphasis role="bold">
               <property>&lt;rich:scrollableDataTable&gt;</property>
            </emphasis> component</title>
         <mediaobject> 
            <imageobject>
               <imagedata fileref="images/scrollableDataTable_init.png"/>
            </imageobject>
         </mediaobject>
      </figure>
		
    </section>
   <section>
        <title>Key Features</title>
        <itemizedlist>
			      <listitem>
            <para>Highly customizable look and feel</para>
         </listitem>
			      <listitem>
            <para>Variable content of the table cells</para>
         </listitem>
			      <listitem>
            <para>Dynamically fetching the rows from the server when the table is scrolled up and down</para>
         </listitem>
			      <listitem>
            <para>Resizing columns by mouse dragging the column bar</para>
         </listitem>
			      <listitem>
            <para>Sorting column by clicking the header</para>
         </listitem>
			      <listitem>
            <para>Fixed one or more left columns when table is scrolled horizontally</para>
         </listitem>
			      <listitem>
            <para>One and multi-selection rows mode</para>
         </listitem>
			      <listitem>
            <para>Built-it drag-n-drop support</para>
         </listitem>
                                            <listitem>
            <para>
               <link linkend="sort">Sorting column values</link>
            </para>
         </listitem>
        </itemizedlist>
      <para>
		<emphasis role="bold"><property moreinfo="none">&lt;rich:scrollableDataTable&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">bypassUpdates</property>
		</listitem>
		<listitem>
			<property moreinfo="none">data</property>
		</listitem>
		<listitem>
			<property moreinfo="none">eventsQueue</property>
		</listitem>
		<listitem>
			<property moreinfo="none">frozenColCount</property>
		</listitem>
		<listitem>
			<property moreinfo="none">height</property>
		</listitem>
		<listitem>
			<property moreinfo="none">hideWhenScrolling</property>
		</listitem>
		<listitem>
			<property moreinfo="none">ignoreDupResponses</property>
		</listitem>
		<listitem>
			<property moreinfo="none">onselectionchange</property>
		</listitem>
		<listitem>
			<property moreinfo="none">requestDelay</property>
		</listitem>
		<listitem>
			<property moreinfo="none">scriptVar</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">similarityGroupingId</property>
		</listitem>
		<listitem>
			<property moreinfo="none">sortOrder</property>
		</listitem>
		<listitem>
			<property moreinfo="none">status</property>
		</listitem>
		<listitem>
			<property moreinfo="none">timeout</property>
		</listitem>
	</itemizedlist>
	<para>
		<emphasis role="bold"><property moreinfo="none">&lt;rich:scrollableDataTable&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">align</property>
		</listitem>
		<listitem>
			<property moreinfo="none">bgcolor</property>
		</listitem>
		<listitem>
			<property moreinfo="none">border</property>
		</listitem>
		<listitem>
			<property moreinfo="none">captionClass</property>
		</listitem>
		<listitem>
			<property moreinfo="none">captionStyle</property>
		</listitem>
		<listitem>
			<property moreinfo="none">cellpadding</property>
		</listitem>
		<listitem>
			<property moreinfo="none">cellspacing</property>
		</listitem>
		<listitem>
			<property moreinfo="none">columns</property>
		</listitem>
		<listitem>
			<property moreinfo="none">columnsWidth</property>
		</listitem>
		<listitem>
			<property moreinfo="none">dir</property>
		</listitem>
		<listitem>
			<property moreinfo="none">frame</property>
		</listitem>
		<listitem>
			<property moreinfo="none">lang</property>
		</listitem>
		<listitem>
			<property moreinfo="none">onRowContextMenu</property>
		</listitem>
		<listitem>
			<property moreinfo="none">onRowMouseMove</property>
		</listitem>
		<listitem>
			<property moreinfo="none">onRowMouseOut</property>
		</listitem>
		<listitem>
			<property moreinfo="none">onRowMouseOver</property>
		</listitem>
		<listitem>
			<property moreinfo="none">onclick</property>
		</listitem>
		<listitem>
			<property moreinfo="none">ondblclick</property>
		</listitem>
		<listitem>
			<property moreinfo="none">onkeydown</property>
		</listitem>
		<listitem>
			<property moreinfo="none">onkeypress</property>
		</listitem>
		<listitem>
			<property moreinfo="none">onkeyup</property>
		</listitem>
		<listitem>
			<property moreinfo="none">onmousedown</property>
		</listitem>
		<listitem>
			<property moreinfo="none">onmousemove</property>
		</listitem>
		<listitem>
			<property moreinfo="none">onmouseout</property>
		</listitem>
		<listitem>
			<property moreinfo="none">onmouseover</property>
		</listitem>
		<listitem>
			<property moreinfo="none">onmouseup</property>
		</listitem>
		<listitem>
			<property moreinfo="none">rules</property>
		</listitem>
		<listitem>
			<property moreinfo="none">sortPriority</property>
		</listitem>
		<listitem>
			<property moreinfo="none">title</property>
		</listitem>
	</itemizedlist>
	<note>
		<title>Using <emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis></title>
		<para>
			The relative width of <emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> is not supported by <emphasis role="bold"><property>&lt;rich:scrollableDataTable&gt;</property></emphasis>. It is, however, supported by <emphasis role="bold"><property>&lt;rich:dataTable&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;rich:extendedDataTable&gt;</property></emphasis>.
		</para>
	</note>
    </section>
   <section>
                    <title>Details of Usage</title>
                    <para> The component represents on a page as a scrollable table with some fixed
                              (non-scrollable) rows ( with header and footer) and columns. Like
                              other tables <emphasis role="bold">
                                        <property>&lt;rich:scrollableDataTable&gt;</property>
                              </emphasis> also has optional footer and header that could be
                              implemented using the corresponding facets. Columns of the table are
                              optionally resizable. Resizing is available using "drag and drop" of
                              the column vertical borders. <!--There is possibility to expand or
                              collapse the columns through JS API on the client side. -->You can define
                              the number of the fixed columns from the left side using the <emphasis>
                                        <property>"frozenColCount"</property>
                              </emphasis> attribute that is not scrolled via horizontal scroll. </para>
                    <para> There is possibility to increase component performance using the <emphasis>
                                        <property>"hideWhenScrolling"</property>
                    </emphasis> attribute. If the attribute value is "true" data is
                              hidden during scrolling. </para>

                    <para> It's possible to select the whole row with onclick on the row or
                              some set of rows. Selection is optional and availability of such
                              feature is defined on the component. There are two ways to select a
                              few rows: </para> 
      <itemizedlist>
                                        <listitem>
                                                  <para>Just clicking the columns one by one.</para>
                                        </listitem>
                                        <listitem>
                                                  <para>Clicking some row with the SHIFT button
                                                  hold. In this case all the rows starting
                                                  from last selected up to clicked should
                                                  be selected.</para>
                                        </listitem>
                              </itemizedlist>
                    

                    <!--para> The columns provides the possibility of expanding/collapsing on the
                              client side through the next JS API:</para> <itemizedlist>
                                        <listitem>
                                                  <para><code>collapse(columnId)</code> - Performs
                                                  the collapse action for the column with
                                                  the corresponding id</para>
                                        </listitem>
                              </itemizedlist--> 
                              <para> It's possible to sort the table content after
                              	clicks on the header. The feature is optional (to disable it, use the <emphasis>
                              		<property>&quot;sortable&quot;</property></emphasis> attribute in <emphasis role="bold">
                              			<property>&lt;rich:column&gt;</property></emphasis>). Every column should be
                              pointed to the comparator method that is used for sorting the table.
                              In case the <emphasis role="bold">
                                        <property>&lt;rich:scrollableDataTable&gt;</property>
                              </emphasis> is already sorted by some column and the header of this
                              column has been clicked again - the sorting is reversed. </para>
                    <para>
                              <emphasis role="bold">The typical variant of using:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[...
<rich:scrollableDataTable value="#{modelBuilder.model}" var="issues"
			frozenColCount="1"
			first="0"
			rows="40" 
			width="300px"
			height="396px">
	<rich:column width="100px">
		<f:facet name="header" >
			<h:outputText value="State"/>
		</f:facet>
		<h:outputText value="#{issues.cell1}"/>
		<f:facet name="footer">
			<h:outputText value="State"/>
		</f:facet>
	</rich:column>		
	<!--Set of columns and header/footer facets-->
</rich:scrollableDataTable>
...
]]></programlisting>

                    <para>The <emphasis>
                                        <property>"selection"</property>
                              </emphasis> attribute allows to get the row data when using
                                        <property>one and multi-selection rows mode</property>.</para>
                    <para>This attribute is a reference to object to the instance of
                              
                              <ulink url="&apidoc_framework;org/richfaces/model/selection/Selection.html">     
            <code>org.richfaces.model.selection.Selection</code>
         </ulink> interface, containing the current collection of objects selected by you.</para>
                    <para>In the following example when you submit the form, the current collection of
                              the selected objects is placed in the object's property. Then
                              on complete action the <emphasis role="bold">
                                        <property>&lt;rich:modalPanel&gt;</property>
                              </emphasis> with selected data is shown.</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="200px" 
						width="300px" id="carList" rows="40" columnClasses="col"
						value="#{dataTableScrollerBean.allCars}" var="category" sortMode="single"
						selection="#{dataTableScrollerBean.selection}">
						<rich:column id="make">
								<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:scrollableDataTable>
				<rich:spacer height="20px"/>
				<a4j:commandButton value="Show Current Selection" reRender="table" 
						action="#{dataTableScrollerBean.takeSelection}" 
						oncomplete="javascript:Richfaces.showModalPanel('panel');"/>
</h:form>
<rich:modalPanel id="panel" autosized="true">
		<f:facet name="header">
				<h:outputText value="Selected Rows"/>
		</f:facet>
		<f:facet name="controls">
				<span style="cursor:pointer" onclick="javascript:Richfaces.hideModalPanel('panel')">X</span>
		</f:facet>
		<rich:dataTable value="#{dataTableScrollerBean.selectedCars}" var="sel" id="table">
				<rich:column>
						<f:facet name="header"><h:outputText value="Make" /></f:facet>
						<h:outputText value="#{sel.make}" />
				</rich:column>
				<rich:column id="model">
						<f:facet name="header"><h:outputText value="Model" /></f:facet>
				<h:outputText value="#{sel.model}" />
				</rich:column>
				<rich:column id="price">
						<f:facet name="header"><h:outputText value="Price" /></f:facet>
						<h:outputText value="#{sel.price}" />
				</rich:column>
		</rich:dataTable>
</rich:modalPanel>
...]]></programlisting>
                    <para>This is a result:</para>
                    <figure>
                              <title>The <emphasis>
                                                  <property>"selection"</property>
                                        </emphasis> attribute usage</title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/scrollableDataTable2.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>
                    <para>
         <ulink url="http://wiki.jboss.org/wiki/RichFacesCookbook/ScrollableDataTableSelectionUsage">On RichFaces LiveDemo page </ulink> you can find the fuller example of usage of this
                              attribute as well as the example bean.</para>
                    <para> The <emphasis role="bold">
                                        <property>&lt;rich:scrollableDataTable&gt;</property>
                              </emphasis> component has the following extra attributes for event
                              processing on the client:</para> 
      <itemizedlist>
                                        <listitem>
                                                  <para>
                                                  <emphasis>
                                                  <property>"onselectionchange"</property>
                                                  </emphasis>
                                                  </para>
                                        </listitem>
                                        <!-- <listitem>
                                                  <para>
                                                  <emphasis>
                                                  <property>&quot;oncomplete&quot;</property>
                                                  </emphasis>
                                                  </para>
                                                  </listitem>  -->
                                        <listitem>
                                                  <para>
                                                  <emphasis>
                                                  <property>"onRowClick"</property>
                                                  </emphasis>
                                                  </para>
                                        </listitem>
                                        <listitem>
                                                  <para>
                                                  <emphasis>
                                                  <property>"onRowDblClick"</property>
                                                  </emphasis>
                                                  </para>
                                        </listitem>
                                        <listitem>
                                                  <para>
                                                  <emphasis>
                                                  <property>"onRowMouseUp"</property>
                                                  </emphasis>
                                                  </para>
                                        </listitem>
                                        <listitem>
                                                  <para>
                                                  <emphasis>
                                                  <property>"onRowMouseDown"</property>
                                                  </emphasis>
                                                  </para>
                                        </listitem>
                              </itemizedlist>
                    
   	<para>Starting with the 3.3.1 version of the components framework it becomes possible to switch selection mode with the   <emphasis>
   		<property>&quot;selectionMode&quot;</property></emphasis> attribute.</para>
                   
                    <para>Information about sorting and filtering you can find in the RichFaces Developer guide section about <link linkend="sort">sorting</link>.</para>
                    <para> Information on the <emphasis>
                                        <property>"process"</property>
                    </emphasis> attribute usage you can find in the 
                              <link linkend="process"> "Decide what to process" </link> guide section. </para>
                    <note>
                    	<title>Note:</title>
                    	<para>
                    	If you want to use specific features such as pagination on database level you should pass to the 
                    		<emphasis>
               <property>"value"</property>
            </emphasis> of the 
                    		<emphasis role="bold">
               <property>&lt;rich:scrollableDataTable&gt;</property>
            </emphasis> component
                    		an object which class extends <code>org.richfaces.model.ScrollableTableDataModel</code>.
                    	</para>
                    </note>
          </section>
   <section>
      <title>Reference Data</title>
      <para>
         <ulink url="&tlddoc;rich/scrollableDataTable.html">Table of 
							&lt;rich:scrollableDataTable&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.component.ScrollableDataTable</entry>
                                        </row>
                                        <row>
                                                  <entry>component-class</entry>
                                                  <entry>org.richfaces.component.html.HtmlScrollableDataTable</entry>
                                        </row>
                                        <row>
                                                  <entry>component-family</entry>
                                                  <entry>org.richfaces.component.ScrollableDataTable</entry>
                                        </row>
                                        <row>
                                                  <entry>renderer-type</entry>
                                                  <entry>org.richfaces.renderkit.html.ScrollableDataTableRenderer</entry>
                                        </row>
                                        <row>
                                                  <entry>tag-class</entry>
                                                  <entry>org.richfaces.taglib.ScrollableDataTableTag</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>Defines the header content</entry>
                                                  </row>
                                                  <row>
                                                            <entry>footer</entry>
                                                            <entry>Defines the footer 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  morerows="2">.rich-sdt</entry>
   					<entry  morerows="2">Defines styles for a component appearance</entry>
   					<entry>tableBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				<row>
   					<entry>tableBorderColor</entry>
   					<entry>border-color</entry>
   				</row>
   				<row>
   					<entry>tableBorderWidth</entry>
   					<entry>border-width</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-std-header-row</entry>
   					<entry>Defines styles for a header raw</entry>
   					<entry>headerBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				
   				<row>
   				<entry  morerows="4">.rich-sdt-header-cell</entry>
   				<entry  morerows="4">Defines styles for header cells</entry>
   				<entry>tableBorderWidth</entry>
   				<entry>border-bottom-width, border-right-width</entry>
   				</row>
   				<row>
   					<entry>tableBorderColor</entry>
   					<entry>border-bottom-color, border-right-color</entry>
   				</row>
   				<row>
   					<entry>headerTextColor</entry>
   					<entry>color</entry>
   				</row>
   				<row>
   					<entry>generalFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				<row>
   					<entry>generalSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-sdt-hsplit</entry>
   					<entry></entry>
   					<entry>tipBorderColor</entry>
   					<entry>border-right-color</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-std-footer-row</entry>
   					<entry>Defines styles for a footer raw</entry>
   					<entry>tableSubfooterBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-sdt-footer-cell</entry>
   					<entry>Defines styles for footer cells</entry>
   					<entry>tableBorderColor</entry>
   					<entry>border-right-color</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-sdt-column-cel</entry>
   					<entry>Defines styles for column cells</entry>
   					<entry>tableBorderColor</entry>
   					<entry>border-bottom-color, border-right-color</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-sdt-row-selected</entry>
   					<entry>Defines styles for a selected row</entry>
   					<entry>additionalBackgroundColor</entry>
   					<entry>background-color</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-sdt-row-active</entry>
   					<entry>Defines styles for an active row</entry>
   					<entry>tabDisabledTextColor</entry>
   					<entry>color</entry>
   				</row>
   				
   				<row>
   					<entry  morerows="1">.rich-sdt-header-cell-body, .rich-sdt-column-cell-body, .rich-sdt-footer-cell-body</entry>
   					<entry  morerows="1">Define styles for the component cells body</entry>
   					<entry>generalFamilyFont</entry>
   					<entry>font-family</entry>
   				</row>
   				<row>
   					<entry>generalSizeFont</entry>
   					<entry>font-size</entry>
   				</row>
   			</tbody>
   		</tgroup>
   	</table>
   	
   	<table id="scrdattableC">
   		<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-sdt-hsep</entry>
   					<entry>Defines styles for header separators</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-sdt-column-sort-up</entry>	
   					<entry>Defines styles for ascending sorted column</entry>
   				</row>
   				
   				<row>
   					<entry>.rich-sdt-column-sort-down</entry>
   					<entry>Defines styles for descending sorted column</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>
                              <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableDataTable.jsf?c=scrollableDataTable">On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold">
                                        <property>&lt;rich:scrollableDataTable&gt;</property>
                                        </emphasis> usage. </para>
                    <para>Cookbook article <ulink url="http://www.jboss.org/community/docs/DOC-11857">
                    	Scrollable dataTable Selection Usage</ulink> provides a simple example of how you can use the <emphasis>
                    		<property>&quot;selection&quot;</property></emphasis> attribute in order to get row selection in <emphasis role="bold">
                    	<property>&lt;rich:scrollableDataTable&gt;</property>.
                    </emphasis></para>
          </section>
</section>
