Search code examples
cssjsfdatatable

How to assign custom CSS class to arbitrary arbitrary rows of h:dataTable?


I'm trying to assign a specific CSS class to specific rows of my <h:dataTable>. Is there some way to access and cutomize the resulting table rows?


Solution

  • Bind the rowClasses attribute to a bean property which returns the desired string of CSS classes.

    <h:dataTable value="#{bean.list}" rowClasses="#{bean.rowClasses}">
    

    with e.g.

    public String getRowClasses() {
        StringBuilder rowClasses = new StringBuilder();
        for (Item item : list) {
            if (rowClasses.length() > 0) rowClasses.append(",");
            rowClasses.append(item.getRowClass());
        }
        return rowClasses.toString();
    }
    

    Update to clarify, this way you have full programmatic control over the rowClasses string. Note that the above is just a kickoff example, it doesn't necessarily need to be obtained by Item#getRowClass() or so. You can even do it in a simple for loop with a counter.

    E.g.

    public String getRowClasses() {
        StringBuilder rowClasses = new StringBuilder();
        for (int i = 0; i < list.size(); i++) {
            if (rowClasses.length() > 0) rowClasses.append(",");
            rowClasses.append(selected.contains(i) ? "selected" : "none");
        }
        return rowClasses.toString();
    }
    

    where selected is a List<Integer>. If it contains 1, 2 and 5, then the returned string will look like as follows for a list of 10 items:

    none,selected,selected,none,none,selected,none,none,none,none