How do I make rich:dataGrid responsive?

Question

I'm looking for a way to make a dataGrid provided by richfaces responsive. Meaning, the grid scales based on the size of the device screen.

I've taken a look at Richfaces Bootstrap : http://planet.jboss.org/post/richfaces_bootstrap but they recommend not to use it in any production code since it is still under development. Tags and attributes are subject to change at anytime.

Answer 1

You'll need to overwrite the default CSS. Here is the list of classes that make up a dataGrid.

The responsivness is achieved by queries like this:

@media(min-width:768px) and (max-width:979px) {
    /* styles for the given width range */
}

You shouldn't use the Bootstrap components but you can use the CSS. However the dataGrid is a table and those don't scale very well.