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

Tags: css,jsf,datatable

Problem :

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(",");
    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.


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:


    CSS Howto..

    How to display an image from a dropdown menu selection?

    How to set content to -webkit-slider-thumb

    How to make JS & CSS inline work for eBay template?

    How to override active admin CSS?

    How do I use li:hover to change the WHOLE li color?

    How To Have Margin For Background Image?

    How do I make these buttons stay activated after clicking on them?

    How can I push to the top an element using slideUp?

    how to make my HTML 'font' edge color match with background on css?

    How to float 3 LI's to the left and 3 to the right and maintain original sequence?

    How to have video faded when paused - HTML

    How to get 60 fps in css element width animation?

    How to add font to a web page

    How to make one list-item in menu higher than the others with CSS?

    How to strech vertically the container of inline-blocks?

    Element width based on how many siblings are present

    CSS and Javascript too tightly coupled (CSS is not just presentation but is used by UI and JS), how to improve this?

    How to inherit css from grandparent tag? [duplicate]

    How to make css a:active work after the click?

    How float divs inside a td

    How to add modal window parameters for this code?

    How to create overlaying papers (pile) - CSS / HTML

    HTML – Show menu on hover

    How can I split this image into pieces so when I write a long text, it doesn't go outside of the div?

    How to manage length of dashes

    Avoid the height change of a container + how to position a list item at end

    How I add a CSS class to first element of an array in PHP?

    How to dynamically resize HTML element according to it's sibling size using CSS only?

    How to position an absolute div next to an element in a scrollable section, but outside the section

    How to have div horizontally scroll when resized.