Is it possible to have multiple rows with jsf h:datatable

Question

Hi all,

With h:datatable we can display data as follows

1. Jems
2. tom
3. chirs
4. harry

but can I display the same as shown below:

1. Jems 2. tom
2. chris 4. harry

Ragards, Abhi

Answer 1

You can manage this in the model.

For example, split a list into pairs:

public class PairedList<T> extends AbstractList<Pair<T>> {
  private final List<? extends T> data;
  private final T defaultVal;

  public PairedList(List<? extends T> data, T defaultVal) {
    this.data = data;
    this.defaultVal = defaultVal;
  }

  @Override public int size() {
    return (data.size() / 2) + (data.size() % 2);
  }

  @Override public Pair<T> get(int index) {
    int left = index * 2;
    int right = left + 1;
    return new Pair<T>(data.get(left), right >= data.size() ? defaultVal : data
        .get(right));
  }

  @Override public boolean addAll(Collection<? extends Pair<T>> c) {
    throw new UnsupportedOperationException();
  }
}

The pair class:

public class Pair<T> {

  private final T left;
  private final T right;

  public Pair(T left, T right) {
    this.left = left;
    this.right = right;
  }

  public T getRight() { return right; }
  public T getLeft() { return left; }
}

The managed bean that exposes the list:

public class TwoPerRowBean implements Serializable {
  private final List<String> data = Arrays.asList("Jems", "tom", "chirs",
      "harry", "Barry");

  public List<Pair<String>> getPairedData() {
    return new PairedList<String>(data, "-");
  }
}

The table configuration:

<h:dataTable value="#{twoPerRowBean.pairedData}" var="pair">
  <h:column> <h:outputText value="#{pair.left}" /> </h:column>
  <h:column> <h:outputText value="#{pair.right}" /> </h:column>
</h:dataTable>

Answer 2

You can use t:dataTable component that support "newspaperColumns" and "newspaperOrientation" attributes. newspaperColumns determine the number of columns the table will be divided over and newspaperOrientation the orientation of the newspaper columns in the newspaper table.

In your example, the bean:

public class Bean {
    public List<String> getPeople() {
        List<String> people = new ArrayList<String>();
        people.add("Jems");
        people.add("tom");
        people.add("chirs");
        people.add("harry");
        return people;
    }
}

And JSF:

<t:dataTable var="person" value="#{bean.people}" rowIndexVar="index"
             newspaperOrientation="horizontal" newspaperColumns="2">
    <h:column>
        <h:outputText value="#{index + 1}"/>
    </h:column>
    <h:column>
        <h:outputText value="#{person}"/>
    </h:column>
</t:dataTable>

Render as:

<table>
  <tbody id="_id13:tbody_element">
    <tr><td>1</td><td>Jems</td><td>2</td><td>tom</td></tr>
    <tr><td>3</td><td>chirs</td><td>4</td><td>harry</td></tr>
  </tbody>
</table>