ICEfaces Showcase

The <ace:dataTable> is a rich data table component and arguably one of the most comprehensive and versatile components available in the industry. A large set of features is supported by this tag including sorting, scrolling, pagination, data filtering, lazy loading, column stacking etc. The demo example below represents a superset of some more common features. To view filtering functionality enter a sample of text or characters in the open text boxes at the top of each column (i.e. enter “11” in the text box in the MPG column. The filtered data rows will appear. Delete the entry to return to the original table. View pagination capability by clicking on the page numbers at the bottom of the table.

ID	Name	Chassis	Weight	Accel	MPG	Cost
1	Enduro	Van	15383lbs.	10	17.86	$6,617.17
2	Tomcat	Bus	7331lbs.	15	16.65	$31,464.24
3	Doublecharge	Pickup	5333lbs.	15	17.84	$10,922.73
4	Swordfish	Bus	10956lbs.	5	5.17	$6,019.83
5	Iguana	Pickup	1696lbs.	10	9.43	$19,736.16
6	Dart	Motorcycle	9261lbs.	15	12.85	$37,947.84
7	Pisces	Luxury	7846lbs.	10	15.13	$19,235.20
8	Flash	Mid-Size	11499lbs.	10	12.74	$29,942.38
9	Tomcat	Mid-Size	10766lbs.	15	7.04	$14,342.74
10	Pisces	Subcompact	2082lbs.	10	13.38	$8,015.01

dataTable.xhtml

<?xml version="1.0"?>
// MPL License text (see http://www.mozilla.org/MPL/)

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:ace="http://www.icefaces.org/icefaces/components"
    xmlns:ice="http://www.icesoft.com/icefaces/component"
    xmlns:icecore="http://www.icefaces.org/icefaces/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    template="/resources/templates/content-template.xhtml">

    <ui:param name="title" value="#{msgs[dataTableBean.title]}"/>
    <ui:param name="description" value="#{msgs[dataTableBean.description]}"/>
    <ui:param name="subMenuTitle" value="#{msgs[dataTableBean.subMenuTitle]}"/>
    <ui:param name="subMenuLinks" value="#{dataTableBean.subMenuLinks}"/>
    <ui:param name="resourceValue" value="#{dataTableBean.exampleResource}"/>

    <ui:param name="wikiResources" value="#{dataTableResources.wikiResources}"/>
    <ui:param name="tldResources" value="#{dataTableResources.tldResources}"/>

    <ui:define name="example">
        <h:form id="form">
            <style type="text/css">
                /* Important required because row */
                .ui-datatable-odd {background-color:lightgray !important;}
            </style>
           <ace:dataTable id="carTable"
                          value="#{dataTableBean.carsData}"
                          var="car"
                          paginator="true"
                          paginatorPosition="bottom"
                          rows="10">
                <ace:column id="id" headerText="ID" sortBy="#{car.id}"
                            filterBy="#{car.id}" filterMatchMode="contains">
                    <h:outputText id="idCell" value="#{car.id}"/>
                </ace:column>
                <ace:column id="name" headerText="Name" sortBy="#{car.name}"
                            filterBy="#{car.name}" filterMatchMode="contains">
                    <h:outputText id="nameCell" value="#{car.name}"/>
                </ace:column>
                <ace:column id="chassis" headerText="Chassis" sortBy="#{car.chassis}"
                            filterBy="#{car.chassis}" filterMatchMode="contains">
                    <h:outputText id="chassisCell" value="#{car.chassis}"/>
                </ace:column>
                <ace:column id="weight" headerText="Weight" sortBy="#{car.weight}"
                            filterBy="#{car.weight}" filterMatchMode="contains">
                    <h:outputText id="weightCell" value="#{car.weight}lbs."/>
                </ace:column>
                <ace:column id="accel" headerText="Accel" sortBy="#{car.acceleration}"
                            filterBy="#{car.acceleration}" filterMatchMode="contains">
                    <h:outputText id="accelerationCell" value="#{car.acceleration}"/>
                </ace:column>
                <ace:column id="mpg" headerText="MPG" sortBy="#{car.mpg}"
                            filterBy="#{car.mpg}" filterMatchMode="contains">
                    <h:outputText id="mpgCell" value="#{car.mpg}"/>
                </ace:column>
                <ace:column id="cost" headerText="Cost" sortBy="#{car.cost}"
                            filterBy="#{car.cost}" filterMatchMode="contains">
                    <f:facet name="header">
                       Cost
                    </f:facet>
                    <h:outputText id="costCell" value="#{car.cost}">
                        <f:convertNumber type="currency"
                                         currencySymbol="$"
                                         groupingUsed="true"
                                         minFractionDigits="2"
                                         maxFractionDigits="2"/>
                    </h:outputText>
                </ace:column>
            </ace:dataTable>
        </h:form>
    </ui:define>
</ui:composition>

DataTableBean.java

/* MPL License text (see http://www.mozilla.org/MPL/) */

package org.icefaces.samples.showcase.example.ace.dataTable;

import org.icefaces.samples.showcase.dataGenerators.utilityClasses.DataTableData;
import org.icefaces.samples.showcase.example.compat.dataTable.Car;
import org.icefaces.samples.showcase.metadata.annotation.*;
import org.icefaces.samples.showcase.metadata.context.ComponentExampleImpl;

import javax.annotation.PostConstruct;
import javax.faces.bean.CustomScoped;
import javax.faces.bean.ManagedBean;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

@ComponentExample(
        title = "example.ace.dataTable.title",
        description = "example.ace.dataTable.description",
        example = "/resources/examples/ace/dataTable/dataTable.xhtml"
)
@ExampleResources(
        resources ={
            // xhtml
            @ExampleResource(type = ResourceType.xhtml,
                    title="dataTable.xhtml",
                    resource = "/resources/examples/ace/dataTable/dataTable.xhtml"),
            // Java Source
            @ExampleResource(type = ResourceType.java,
                    title="DataTableBean.java",
                    resource = "/WEB-INF/classes/org/icefaces/samples/showcase"+
                    "/example/ace/dataTable/DataTableBean.java"),
            @ExampleResource(type = ResourceType.java,
                    title="DataTableData.java",
                    resource = "/WEB-INF/classes/org/icefaces/samples/showcase"+
                    "/dataGenerators/utilityClasses/DataTableData.java"),
            @ExampleResource(type = ResourceType.java,
                    title="VehicleGenerator.java",
                    resource = "/WEB-INF/classes/org/icefaces/samples/showcase"+
                    "/dataGenerators/VehicleGenerator.java")

        }
)
//! Menu links in alphabetical order based on description in messages.proporties file
@Menu(
    title = "menu.ace.dataTable.subMenu.title",
    menuLinks = {
            @MenuLink(title = "menu.ace.dataTable.subMenu.main", isDefault = true, exampleBeanName = DataTableBean.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.columnReordering", exampleBeanName = DataTableColumnReordering.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.columnResizing", exampleBeanName = DataTableColumnResizing.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.stackable", exampleBeanName = DataTableStackable.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.filtering", exampleBeanName = DataTableFiltering.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.find", exampleBeanName = DataTableFind.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.grouping", exampleBeanName = DataTableGrouping.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.lazyLoading", exampleBeanName = DataTableLazyLoading.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.multiRowHeader", exampleBeanName = DataTableMultiRowHeader.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.paginator", exampleBeanName = DataTablePaginator.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.panelexpansion", exampleBeanName = DataTablePanelExpansion.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.pinning", exampleBeanName = DataTablePinning.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.rowexpansion", exampleBeanName = DataTableRowExpansion.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.listener", exampleBeanName = DataTableListener.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.selector", exampleBeanName = DataTableSelector.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.rowstate", exampleBeanName = DataTableRowState.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.rowEditing", exampleBeanName = DataTableRowEditing.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.scrolling", exampleBeanName = DataTableScrolling.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.sorting", exampleBeanName = DataTableSorting.BEAN_NAME),
            @MenuLink(title = "menu.ace.dataTable.subMenu.configpanel", exampleBeanName = DataTableConfigPanel.BEAN_NAME)
    }
)
@ManagedBean(name= DataTableBean.BEAN_NAME)
@CustomScoped(value = "#{window}")
public class DataTableBean extends ComponentExampleImpl<DataTableBean> implements Serializable {
    public static final String BEAN_NAME = "dataTableBean";

    private List<Car> carsData;
    /////////////---- CONSTRUCTOR BEGIN
    public DataTableBean() {
        super(DataTableBean.class);
        carsData = new ArrayList<Car>(DataTableData.getDefaultData());
    }

    @PostConstruct
    public void initMetaData() {
        super.initMetaData();
    }

    /////////////---- GETTERS & SETTERS BEGIN
    public List<Car> getCarsData() { return carsData; }
    public void setCarsData(List<Car> carsData) { this.carsData = carsData; }
}

DataTableData.java

/* MPL License text (see http://www.mozilla.org/MPL/) */

package org.icefaces.samples.showcase.dataGenerators.utilityClasses;

import org.icefaces.samples.showcase.dataGenerators.VehicleGenerator;
import org.icefaces.samples.showcase.example.compat.dataTable.Car;
import org.icefaces.samples.showcase.example.compat.selector.SelectableCar;

import java.io.Serializable;
import java.util.List;

public class DataTableData implements Serializable {

        public static final String BEAN_NAME = "tableData";

        public static final int DEFAULT_ROWS;
        public static final int DEFAULT_LIST_SIZE;
        public static final String[] CHASSIS_ALL;
        //static data initialization
        static {
            DEFAULT_ROWS = 8;
            DEFAULT_LIST_SIZE = 30;
            CHASSIS_ALL = new String[] {"Motorcycle", "Subcompact", "Mid-Size", "Luxury",
                                                        "Station Wagon", "Pickup", "Van", "Bus", "Semi-Truck"};
        }

        public DataTableData() {   }

        public static List<Car> getDefaultData() {
            VehicleGenerator generator = new VehicleGenerator();
            return generator.getRandomCars(DEFAULT_LIST_SIZE);
        }
        public static List<SelectableCar> getDefaultSelectableData() {
            VehicleGenerator generator = new VehicleGenerator();
            return generator.getRandomSelectableCars(DEFAULT_LIST_SIZE);
        }
        public String[] getChassisAll() { return CHASSIS_ALL; }
}

VehicleGenerator.java

/* MPL License text (see http://www.mozilla.org/MPL/) */

package org.icefaces.samples.showcase.dataGenerators;
import java.io.Serializable;
import java.text.NumberFormat;
import java.util.*;
import org.icefaces.samples.showcase.example.compat.dataTable.Car;
import org.icefaces.samples.showcase.example.compat.selector.SelectableCar;

public class VehicleGenerator implements Serializable
{
    private List<String> namesPool;
    private List<String> chassisPool;
    private Random randomizer = new Random(System.nanoTime());
    private NumberFormat numberFormatter;


    public VehicleGenerator()
    {
        this.namesPool = getVehicleDescriptions();
        this.chassisPool = getChassisDescriptions();
        this.randomizer = new Random(System.nanoTime());
        this.numberFormatter = makeFormatter();
    }

    public ArrayList<Car> getRandomCars(int quantity)
    {
        ArrayList<Car> listWithCars = getPredefinedCars();

        if(quantity<listWithCars.size())
            return new ArrayList<Car>(listWithCars.subList(0, quantity));

        if(quantity>listWithCars.size())
            return addCarsToList(quantity - listWithCars.size(), listWithCars);

        //if quantity == listWithCars.size()
        return listWithCars;
    }

    public ArrayList<SelectableCar> getRandomSelectableCars(int quantity)
    {
        ArrayList<Car> listWithCars = getRandomCars(quantity);
        ArrayList<SelectableCar> listWithSelectableCars = new ArrayList<SelectableCar>(listWithCars.size());

        for (Car car : listWithCars) {
            listWithSelectableCars.add(new SelectableCar(car));
        }

        return listWithSelectableCars;
    }

    public ArrayList<Car> addCarsToList(int quantityToAdd, ArrayList<Car> list)
    {
        int currentListSize = list.size();
        int position = 0;
        /*by the end of this loop we will have partial copy, full copy or more then one copy of our list,
        appended to the end of it */
        for(int i = 0; i< quantityToAdd; i++)
        {
            //add Car from the begining of the list to the end of it
            Car copyReference = list.get(position); //this pointer is mostly for code readabllity
            //new car.id =  car list size+position value+id of the 1st element in the predefined car list
            Car car = new Car(currentListSize+position+1, copyReference.getName(),
                                      copyReference.getChassis(), copyReference.getWeight(),
                                      copyReference.getAcceleration(), copyReference.getMpg(),
                                      copyReference.getCost());
            list.add(car);
            //move pointer to one position up in the list
            position ++;
            //check if we copied all elements of the original list
            if(position>=currentListSize)
            {
                //reset position pointer to the begining
                position = 0;
                //since our list doubled in size and contain full pattern of the original list we can increase currentListSize
                currentListSize = list.size();
            }
        }
        return list;
    }

    public ArrayList<Car> removeCarsFromList(int quantityToRemove, ArrayList<Car> list)
    {
        return new ArrayList<Car>(list.subList(0, list.size()-quantityToRemove-1));
    }

    private ArrayList<Car> getPredefinedCars()
    {
        ArrayList<Car> listWithCars = new ArrayList<Car>();

        listWithCars.add(new Car(1,"Enduro","Van",15383,10,17.86,6617.17));
        listWithCars.add(new Car(2,"Tomcat","Bus",7331,15,16.65,31464.24));
        listWithCars.add(new Car(3,"Doublecharge","Pickup",5333,15,17.84,10922.73));
        listWithCars.add(new Car(4,"Swordfish","Bus",10956,5,5.17,6019.83));
        listWithCars.add(new Car(5,"Iguana","Pickup",1696,10,9.43,19736.16));
        listWithCars.add(new Car(6,"Dart","Motorcycle",9261,15,12.85,37947.84));
        listWithCars.add(new Car(7,"Pisces","Luxury",7846,10,15.13,19235.2));
        listWithCars.add(new Car(8,"Flash","Mid-Size",11499,10,12.74,29942.38));

        listWithCars.add(new Car(9,"Tomcat","Mid-Size",10766,15,7.04,14342.74));
        listWithCars.add(new Car(10,"Pisces","Subcompact",2082,10,13.38,8015.01));
        listWithCars.add(new Car(11,"Superflash","Subcompact",14959,5,3.91,31941.1));
        listWithCars.add(new Car(12,"Husky","Mid-Size",14334,15,13.98,9303.69));
        listWithCars.add(new Car(13,"Gazelle","Semi-Truck",14248,5,8.64,9285.57));

        listWithCars.add(new Car(14,"Superflash","Luxury",3037,15,8.44,36154.13));
        listWithCars.add(new Car(15,"Enduro","Subcompact",4997,5,6.02,31221.48));
        listWithCars.add(new Car(16,"Tomcat","Pickup",4555,10,4.06,35895.53));
        listWithCars.add(new Car(17,"Courier","Pickup",9848,10,16.15,27343.38));
        listWithCars.add(new Car(18,"Enduro","Motorcycle",5725,5,14.17,34430.44));

        listWithCars.add(new Car(19,"Swordfish","Luxury",1466,10,11.72,19266.56));
        listWithCars.add(new Car(20,"Tomcat","Station Wagon",15576,10,15.3,16844.05));
        listWithCars.add(new Car(21,"Iguana","Van",10973,15,3.77,33369.32));
        listWithCars.add(new Car(22,"Doublecharge","Pickup",9414,10,6.37,19370.61));
        listWithCars.add(new Car(23,"Hawk","Motorcycle",8545,5,7.98,39124.1));

        listWithCars.add(new Car(24,"Hawk","Subcompact",1853,10,12.54,36068.19));
        listWithCars.add(new Car(25,"Tomcat","Subcompact",12785,10,12.97,26141.79));
        listWithCars.add(new Car(26,"Hawk","Semi-Truck",12453,10,10.4,13654.1));
        listWithCars.add(new Car(27,"Doublecharge","Van",11952,10,17.58,22599.82));
        listWithCars.add(new Car(28,"Flash","Semi-Truck",6107,5,8.48,26096.26));

        listWithCars.add(new Car(29,"Courier","Bus",8187,5,4.25,25470.63));
        listWithCars.add(new Car(30,"Dart","Motorcycle",7177,10,12.16,35394.23));

        return listWithCars;
    }

    public ArrayList<Car> getCarsForLazyLoading(int quantity)
    {
        return new ArrayList<Car>(generateRandomCars(quantity));
    }

    public List<String> getChassisPool() { return chassisPool; }
    public List<String> getNamesPool() { return namesPool; }

    ///////////////////// THIS SECTION CONTAIN METHODS FOR TRUE RANDOM CAR GENERATION////////////////////
   //////////////// IT WAS REMOVED FROM PUBLIC CLASS INTERFACE DUE TO QC TEST REQUIREMENTS////////////

    private Car getRandomCar()
    {
        Car randomCar = new Car(randomizer.nextInt(10000000), generateName(),
                                  generateChassis(), generateWeight(), generateAccelerationValue(),
                                  generateMPG(), generateCost());
        return randomCar;
    }

    private SelectableCar getRandomSelectableCar() {
        return new SelectableCar(getRandomCar());
    }

    private ArrayList<Car> generateRandomCars(int quantity)
    {
        ArrayList<Car> listWithRandomCars = new ArrayList<Car>(quantity);
        for (int i = 0; i < quantity; i++)
        {
            Car randomCar = getRandomCar();
            listWithRandomCars.add(randomCar);
        }
        return listWithRandomCars;
    }

    private ArrayList<SelectableCar> generateRandomSelectableCars(int quantity)
    {
        ArrayList<SelectableCar> listWithRandomCars = new ArrayList<SelectableCar>(quantity);
        for (int i = 0; i < quantity; i++)
        {
            SelectableCar randomCar = getRandomSelectableCar();
            listWithRandomCars.add(randomCar);
        }
        return listWithRandomCars;
    }

    private List<String> getVehicleDescriptions()
    {
        List<String> listWithNames = new ArrayList<String>();
        listWithNames.add("Spider");
        listWithNames.add("Hawk");
        listWithNames.add("Tomcat");
        listWithNames.add("Gazelle");
        listWithNames.add("Mantis");
        listWithNames.add("Flash");
        listWithNames.add("Iguana");
        listWithNames.add("Swordfish");
        listWithNames.add("Rattler");
        listWithNames.add("Courier");
        listWithNames.add("Pisces");
        listWithNames.add("Superflash");
        listWithNames.add("Doublecharge");
        listWithNames.add("Dart");
        listWithNames.add("Enduro");
        listWithNames.add("King Crab");
        listWithNames.add("Vanguard");
        listWithNames.add("Camel");
        listWithNames.add("Husky");
        return listWithNames;
    }

    private List<String> getChassisDescriptions()
    {
        List<String> listWithNames = new ArrayList<String>();
        listWithNames.add("Motorcycle");
        listWithNames.add("Subcompact");
        listWithNames.add("Mid-Size");
        listWithNames.add("Luxury");
        listWithNames.add("Station Wagon");
        listWithNames.add("Pickup");
        listWithNames.add("Van");
        listWithNames.add("Bus");
        listWithNames.add("Semi-Truck");
        return listWithNames;
    }

    private NumberFormat makeFormatter()
    {
        NumberFormat formatter = NumberFormat.getInstance();
        formatter.setGroupingUsed(false);
        formatter.setMinimumFractionDigits(2);
        formatter.setMaximumFractionDigits(2);
        return formatter;
    }

    private String generateName()
    { return namesPool.get(randomizer.nextInt(namesPool.size())); }

    private String generateChassis()
    { return chassisPool.get(randomizer.nextInt(chassisPool.size())); }

    private int generateWeight()
    { return 1000+randomizer.nextInt(15000); }

    private int generateAccelerationValue()
    { return (1+randomizer.nextInt(3)) * 5; }

    private double generateMPG()
    { return Double.parseDouble(numberFormatter.format( ((double)(3+randomizer.nextInt(15))) + randomizer.nextDouble())); }

    private double generateCost()
    { return Double.parseDouble(numberFormatter.format( ((double)(2000+randomizer.nextInt(40000))) + randomizer.nextDouble()) ); }
}

ACE Components

WIKI Documentation

TLD Documentation

dataTable.xhtml

DataTableBean.java

DataTableData.java

VehicleGenerator.java