orderingList component allows to reorder items in a list.

Ordering List could contain several columns in list representation. And it also has strong keyboard support out of the box.

OrderingList example

Manage simple playlist represented via Ordering List:

Song Name Artist Name Yes Sir, I Can Boogie Baccara Sorry, i`m A Lady Baccara A Quien Le Importa Baccara The Devil Send You To Laredo Baccara Ni Mas Ni Menos Baccara Parlez-vous Francais? Baccara Que Naadie Sepa Mi Sufrir Baccara Borriquito Baccara Love Me Please Love Me Baccara Paloma Blanca Baccara Me Tienes Desenganada Baccara El Porompompero Baccara Yes Sir, I Can Boogie Baccara Sorry, i`m A Lady Baccara Storm on Serret Mountain David Miles Huber After the Storm David Miles Huber Storm on Serret Mountain David Miles Huber Spring Showers David Miles Huber Exotic Journey David Miles Huber Evening Rain David Miles Huber Brandenburg Concerto No 1-1 I Bach, Johann Sebastian Brandenburg Concerto No 1-2 I Bach, Johann Sebastian Brandenburg Concerto No 1-3 I Bach, Johann Sebastian Brandenburg Concerto No 1-4 I Bach, Johann Sebastian Brandenburg Concerto No 2-1 I Bach, Johann Sebastian Brandenburg Concerto No 2-2 I Bach, Johann Sebastian Brandenburg Concerto No 2-3 I Bach, Johann Sebastian Brandenburg Concerto No 3-1 I Bach, Johann Sebastian Brandenburg Concerto No 3-2 I Bach, Johann Sebastian Organ Concerto In D Minor, BW Bach, Johann Sebastian Toccata & Fugue In D Minor, B Bach, Johann Sebastian The Road To Hell (Part 1) Chris Rea The Road To Hell (Part 2) Chris Rea You Must Be Evil Chris Rea Texas Chris Rea Looking For A Rainbow Chris Rea Your Warm And Tender Love Chris Rea Daytona Chris Rea That`s What They Always Say Chris Rea Let`s Dance Chris Rea I Just Wanna Be With You Chris Rea Tell Me There`s A Heaven Chris Rea First First Up Up Down Down Last Last

Current Selection No Songs Selected

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
    <style>
    .cent{
        text-align:center;
    }
    .top{
        vertical-align:top;
    }
    .70per{
        width:70%;
    }
    .30per{
        width:200px;
    }
</style>
    <h:form>
        <h:panelGrid columns="2" columnClasses="top 70per, top 30per" width="100%">
        <rich:orderingList value="#{library.songsList}" var="lib" listHeight="300" listWidth="350" converter="orderingListConverter" selection="#{library.selectedSongsSet}">
            <rich:column  width="180">
            <f:facet name="header">
                <h:outputText value="Song Name" />
            </f:facet> 
                <h:outputText value="#{lib.title}"></h:outputText>
            </rich:column>
            <rich:column> 
                <f:facet name="header">
                    <h:outputText value="Artist Name" />
                </f:facet>
                <h:outputText value="#{lib.album.artist.name}"></h:outputText><br/>
            </rich:column>
            <a4j:support event="onclick" ignoreDupResponses="true" requestDelay="500" action="#{library.takeSelection}" reRender="output"/>
            <a4j:support event="onkeyup" ignoreDupResponses="true" requestDelay="500" action="#{library.takeSelection}" reRender="output"/>
        </rich:orderingList>
        <rich:panel id="output" header="Current Selection" style="width:200px">
            <rich:dataList value="#{library.selectedSongsList}" var="song" rendered="#{not empty library.selectedSongsList}">
                <h:outputText value="#{song.title}"></h:outputText>
            </rich:dataList>
            <h:outputText value="No Songs Selected" rendered="#{empty library.selectedSongsList}"/>
        </rich:panel>
        </h:panelGrid>
    </h:form>
</ui:composition>

<<Hide Source

In this example you may select some songs (using the mouse and Ctrl/Shift keys) and move them within the list using controls.

Content definition for this component is similar to any Iteration component. Thus, all you need is to define collection in Ordering List value attribute and iterate the collection in nested columns with var attribute.

In order to set initially selected rows or to process submitted selection, use selection attribute.