DataTable Rows color

UI Components for JSF
Post Reply
User avatar
Optimmus
Posts: 10
Joined: 12 May 2011, 23:51

19 May 2011, 20:11

Hello,

How to change the color of the rows in the datatable ?

Thanks ahead


User avatar
Optimmus
Posts: 10
Joined: 12 May 2011, 23:51

20 May 2011, 09:42

i want to color my datatable like this :
row 1 :white
row 2 :blue
row 3 :white
row 4 :blue
...

i already try that website and the user guide but nothing works :/

anatolse
Posts: 19
Joined: 14 Apr 2011, 11:09
Location: Russia, Moscow
Contact:

20 May 2011, 11:10

This code works:

Code: Select all

<style>
.first-row {
     background-color: #ffffff !important;
     background-image: none !important;
     color: #000000 !important;
}
                
.second-row {
    background-color: #0000ff !important;
    background-image: none !important;
    color: #000000 !important;
}
</style>
...
<p:dataTable
   ...
   rowIndexVar="rowIndex"
   rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'first-row' : 'second-row'}">

mesken
Posts: 68
Joined: 27 Mar 2011, 02:53

21 May 2011, 12:15

I have not tried this code, it surely works but looks a bit longer.
You can find a better answer in the user guide page 143 (DataTable skinning). There are two CSS properties .ui-datatable-even and .ui-datatable-odd which you can use and set the background color of whether your odd or even rows .

here is how it looks like (for even rows) :

Code: Select all

<style type="text/css">
    .ui-datatable, .ui-datatable-even {
            background: #3a8104;
     }
</style>
Hope this will help
Eclipse Helios 3.6 | Glassfish 3.1 | PrimeFaces 2.2.1

DcdacD
Posts: 28
Joined: 21 Nov 2014, 10:14
Location: Spain

04 Dec 2015, 10:51

Thanks for it, it works fine!
anatolse wrote:This code works:

Code: Select all

<style>
.first-row {
     background-color: #ffffff !important;
     background-image: none !important;
     color: #000000 !important;
}
                
.second-row {
    background-color: #0000ff !important;
    background-image: none !important;
    color: #000000 !important;
}
</style>
...
<p:dataTable
   ...
   rowIndexVar="rowIndex"
   rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'first-row' : 'second-row'}">
Glassifish 4.1
JSF 2.2
Primefaces 6.1

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 16 guests