DataTable - Column Resize
Columns can be resized in two ways, with a helper or live.
Documentation
<h:form id="form">
<p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" />
<h3 style="margin-top:0">Basic Resize</h3>
<p:dataTable id="cars1" var="car" value="#{dtResizableColumnsView.cars1}" resizableColumns="true" style="margin-bottom:20px">
<f:facet name="header">
Basic Resize
</f:facet>
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
<h3>Live Resize with Callback</h3>
<p:dataTable id="cars2" var="car" value="#{dtResizableColumnsView.cars2}" resizableColumns="true" liveResize="true" style="margin-bottom:20px">
<p:ajax event="colResize" update=":form:msgs" listener="#{dtResizableColumnsView.onResize}" />
<f:facet name="header">
</f:facet>
<p:column headerText="Id" id="id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year" id="year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand" id="brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color" id="color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
<h3>Expand Mode with Grouping</h3>
<p:dataTable var="sale" value="#{dtGroupView.sales}" resizableColumns="true" resizeMode="expand">
<f:facet name="header">
</f:facet>
<p:columnGroup type="header">
<p:row>
<p:column rowspan="3" headerText="Manufacturer" />
<p:column colspan="4" headerText="Sale Rate" />
</p:row>
<p:row>
<p:column colspan="2" headerText="Sales" />
<p:column colspan="2" headerText="Profit" />
</p:row>
<p:row>
<p:column headerText="Last Year" />
<p:column headerText="This Year" />
<p:column headerText="Last Year" />
<p:column headerText="This Year" />
</p:row>
</p:columnGroup>
<p:column>
<h:outputText value="#{sale.manufacturer}" />
</p:column>
<p:column>
<h:outputText value="#{sale.lastYearProfit}%" />
</p:column>
<p:column>
<h:outputText value="#{sale.thisYearProfit}%" />
</p:column>
<p:column>
<h:outputText value="#{sale.lastYearSale}">
<f:convertNumber type="currency" currencySymbol="$" />
</h:outputText>
</p:column>
<p:column>
<h:outputText value="#{sale.thisYearSale}">
<f:convertNumber type="currency" currencySymbol="$" />
</h:outputText>
</p:column>
<p:columnGroup type="footer">
<p:row>
<p:column colspan="3" style="text-align:right" footerText="Totals:" />
<p:column footerText="\$#{dtGroupView.lastYearTotal}" />
<p:column footerText="\$#{dtGroupView.thisYearTotal}" />
</p:row>
</p:columnGroup>
</p:dataTable>
</h:form>
@Named("dtResizableColumnsView")
@RequestScoped
public class ResizableColumnsView implements Serializable {
private List<Car> cars1;
private List<Car> cars2;
@Inject
private CarService service;
@PostConstruct
public void init() {
cars1 = service.createCars(10);
cars2 = service.createCars(10);
}
public void onResize(ColumnResizeEvent event) {
FacesMessage msg = new FacesMessage("Column " + event.getColumn().getClientId() + " resized", "W:" + event.getWidth() + ", H:" + event.getHeight());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public List<Car> getCars1() {
return cars1;
}
public List<Car> getCars2() {
return cars2;
}
public void setService(CarService service) {
this.service = service;
}
}
@Named
@ApplicationScoped
public class CarService {
private final static String[] colors;
private final static String[] brands;
static {
colors = new String[10];
colors[0] = "Black";
colors[1] = "White";
colors[2] = "Green";
colors[3] = "Red";
colors[4] = "Blue";
colors[5] = "Orange";
colors[6] = "Silver";
colors[7] = "Yellow";
colors[8] = "Brown";
colors[9] = "Maroon";
brands = new String[10];
brands[0] = "BMW";
brands[1] = "Mercedes";
brands[2] = "Volvo";
brands[3] = "Audi";
brands[4] = "Renault";
brands[5] = "Fiat";
brands[6] = "Volkswagen";
brands[7] = "Honda";
brands[8] = "Jaguar";
brands[9] = "Ford";
}
public List<Car> createCars(int size) {
List<Car> list = new ArrayList<Car>();
for(int i = 0 ; i < size ; i++) {
list.add(new Car(getRandomId(), getRandomBrand(), getRandomYear(), getRandomColor(), getRandomPrice(), getRandomSoldState()));
}
return list;
}
private String getRandomId() {
return UUID.randomUUID().toString().substring(0, 8);
}
private int getRandomYear() {
return (int) (Math.random() * 50 + 1960);
}
private String getRandomColor() {
return colors[(int) (Math.random() * 10)];
}
private String getRandomBrand() {
return brands[(int) (Math.random() * 10)];
}
private int getRandomPrice() {
return (int) (Math.random() * 100000);
}
private boolean getRandomSoldState() {
return (Math.random() > 0.5) ? true: false;
}
public List<String> getColors() {
return Arrays.asList(colors);
}
public List<String> getBrands() {
return Arrays.asList(brands);
}
}
@Named("dtGroupView")
@ViewScoped
public class GroupView implements Serializable {
private final static String[] manufacturers;
private List<Sale> sales;
private final static String[] playerNames;
private List<Integer> years;
private List<Player> players;
static {
manufacturers = new String[10];
manufacturers[0] = "Apple";
manufacturers[1] = "Samsung";
manufacturers[2] = "Microsoft";
manufacturers[3] = "Philips";
manufacturers[4] = "Sony";
manufacturers[5] = "LG";
manufacturers[6] = "Sharp";
manufacturers[7] = "Panasonic";
manufacturers[8] = "HTC";
manufacturers[9] = "Nokia";
}
static {
playerNames = new String[10];
playerNames[0] = "Lionel Messi";
playerNames[1] = "Cristiano Ronaldo";
playerNames[2] = "Arjen Robben";
playerNames[3] = "Franck Ribery";
playerNames[4] = "Ronaldinho";
playerNames[5] = "Luis Suarez";
playerNames[6] = "Sergio Aguero";
playerNames[7] = "Zlatan Ibrahimovic";
playerNames[8] = "Neymar Jr";
playerNames[9] = "Andres Iniesta";
}
@PostConstruct
public void init() {
sales = new ArrayList<Sale>();
for(int i = 0; i < 10; i++) {
sales.add(new Sale(manufacturers[i], getRandomAmount(), getRandomAmount(), getRandomPercentage(), getRandomPercentage()));
}
years = new ArrayList<Integer>();
years.add(2010);
years.add(2011);
years.add(2012);
years.add(2013);
years.add(2014);
players = new ArrayList<Player>();
for(int i = 0; i < 10; i++) {
players.add(new Player(playerNames[i], generateRandomGoalStatsData()));
}
}
public List<Sale> getSales() {
return sales;
}
private int getRandomAmount() {
return (int) (Math.random() * 100000);
}
private int getRandomPercentage() {
return (int) (Math.random() * 100);
}
public String getLastYearTotal() {
int total = 0;
for(Sale sale : getSales()) {
total += sale.getLastYearSale();
}
return new DecimalFormat("###,###.###").format(total);
}
public String getThisYearTotal() {
int total = 0;
for(Sale sale : getSales()) {
total += sale.getThisYearSale();
}
return new DecimalFormat("###,###.###").format(total);
}
public List<Integer> getYears() {
return years;
}
public int getYearCount() {
return years.size();
}
public List<Player> getPlayers() {
return players;
}
private Map<Integer,Integer> generateRandomGoalStatsData() {
Map<Integer,Integer> stats = new LinkedHashMap<Integer, Integer>();
for (int i = 0; i < 5; i++) {
stats.put(years.get(i), getRandomGoals());
}
return stats;
}
private int getRandomGoals() {
return (int) (Math.random() * 50);
}
}