How to apply style to a PrimeFaces dataTable?

Question

Initially, I've a JSF datatable 2.0 as follows:

<h:dataTable value="#{bean.items}" var="item" styleClass="table table-hover">

Which looks like this:

Before use PrimeFaces DataTable (I need discover what's the selected row

I wanted to use row selection, so I switched to PrimeFaces 4.0 datatable:

<p:dataTable value="#{bean.items}" var="item" styleClass="table table-hover"
    rowKey="#{item.id}" selection="#{bean.selectedItem}" selectionMode="single">

Which looks like this:

After use Primefaces (but can't discover the selected row yet :(

However, my style classes table and table-hover aren't being applied. How is this caused and how can I solve it?

Go through http://stackoverflow.com/questions/11988415/what-is-the-jsf-resource-library-for-and-how-should-it-be-used and check whether it answers your question — Johny T Koshy, Nov 01 '13 at 02:15

score 13 · Accepted Answer · edited May 25 '15 at 20:41

13

Get the Primefaces User Guide of the version of your Primefaces here.
In that document you'll find how to override the styles of each component under Skinning heading.
For Example:
Following is the skinning for p:outputLabel

enter image description here

If you want to change color I'd use my css as which will apply for all p:outputLabels.

.ui-outputlabel{
color:blue;
}

If you want to change style for only one particular p:outputLabel you can use like this

<div class="myLabel">
   <p:outputLabel value="This is Demo" />
</div>

then the CSS would be like:

.myLabel .ui-outputlabel{
    color:blue;
}

edited May 25 '15 at 20:41

ForguesR

3,558
1
17
39

answered Nov 01 '13 at 02:48

Kishor Prakash

8,011
12
61
92

1

Thanks, but I'm using Bootstrap, don't have a faster way? – Paladini Nov 01 '13 at 22:58
This does not answer the question. Also, the link is invalid. – arni May 29 '21 at 12:45

score 5 · Answer 2 · edited Aug 14 '17 at 14:41

5

Hm... Isn't it the tableStyleClass- attribute, which must be table table-striped?

You used only styleClass

edited Aug 14 '17 at 14:41

Guruprasad J Rao

29,410
14
101
200

answered Mar 17 '14 at 13:17

Rokko_11

837
2
10
24

score 2 · Answer 3 · edited Aug 14 '17 at 14:52

In primefaces basic style is controller by jquery. You can change the dataTable style changing the theme css style for dataTable. If you want to change style on the fly using jquery themeroller check this links- http://www.datatables.net/styling/themes

Below are the responsible css segment for dataTable- change according to your need and add to your css file

.ui-datatable table{
 border-collapse:collapse;width:100%;
}
.ui-datatable .ui-datatable-header,.ui-datatable .ui-datatable-footer{
 text-align:center;padding:4px 10px;
}
.ui-datatable .ui-datatable-header{
 border-bottom:0px none;
}
.ui-datatable .ui-datatable-footer{
 border-top:0px none;
}
.ui-datatable thead th, .ui-datatable tfoot td{
 text-align:center;
}
.ui-datatable thead th,.ui-datatable tbody td,.ui-datatable tfoot td{
 padding:4px 10px;
 overflow:hidden;
 white-space:nowrap;
 border-width:1px;
 border-style:solid;
}
.ui-datatable tbody td{
 border-color:inherit;
}
.ui-datatable .ui-sortable-column{
 cursor:pointer;
}
.ui-datatable div.ui-dt-c{
 position:relative;
}
.ui-datatable .ui-sortable-column-icon{
 display:inline-block;
 margin:-3px 0px -3px 2px;
}
.ui-datatable .ui-column-filter{
 display:block;
 width:100px;
 margin:auto;
}
.ui-datatable .ui-expanded-row{
 border-bottom:0px none;
}
.ui-datatable .ui-expanded-row-content{
 border-top:0px none;
}
.ui-datatable .ui-row-toggler{
 cursor:pointer;
}
.ui-datatable tr.ui-state-highlight{
 cursor:pointer;
}
.ui-datatable .ui-selection-column .ui-chkbox-all{
 display:block;
 margin:0px auto;
 width:16px;
 height:16px;
}
.ui-datatable-scrollable table{
 table-layout:fixed;
}
.ui-datatable-scrollable-body{
 overflow:auto;
}
.ui-datatable-scrollable-header,.ui-datatable-scrollable-footer{
 overflow:hidden;
 border:0px none;
}
.ui-datatable-scrollable .ui-datatable-scrollable-header,.ui-datatable-scrollable .ui-datatable-scrollable-footer{
 position:relative;
}
 .ui-datatable-scrollable .ui-datatable-scrollable-header td{
 font-weight:normal;
}
.ui-datatable-scrollable-body::-webkit-scrollbar{
 -webkit-appearance:none;
 width:15px;
 background-color:transparent;
}
.ui-datatable-scrollable-body::-webkit-scrollbar-thumb{
 border-radius:8px;
 border:1px solid white;
 background-color:rgba(194,194,194,.5);
}
.ui-datatable .ui-datatable-data tr.ui-state-hover{
 border-color:inherit;
 font-weight:inherit;
 cursor:pointer;
}
.ui-datatable .ui-paginator,.ui-datatable .ui-paginator{
 padding:2px;
}
.ui-column-dnd-top, ui-column-dnd-bottom{
 display:none;
 position:absolute;
}
.ui-column-dnd-top .ui-icon, ui-column-dnd-bottom .ui-icon{
 position:absolute;
 top:-4px;
}
/* InCell Editing */.ui-datatable .ui-cell-editor-input{
 display:none;
}
.ui-datatable .ui-row-editing .ui-cell-editor .ui-cell-editor-output{
 display:none;
}
.ui-datatable .ui-row-editing .ui-cell-editor .ui-cell-editor-input{
 display:block;
}
.ui-datatable .ui-row-editor span{
 cursor:pointer;
 display:inline-block;
}
.ui-datatable .ui-row-editor .ui-icon-pencil{
 display:inline-block;
}
.ui-datatable .ui-row-editing .ui-row-editor .ui-icon-pencil{
 display:none;
}
.ui-datatable .ui-row-editor .ui-icon-check,.ui-datatable .ui-row-editor .ui-icon-close{
 display:none;
}
.ui-datatable .ui-row-editing .ui-row-editor .ui-icon-check,.ui-datatable .ui-row-editing .ui-row-editor .ui-icon-close{
 display:inline-block;
}
.ui-datatable .ui-datatable-data tr.ui-row-editing td.ui-editable-column,.ui-datatable .ui-datatable-data td.ui-cell-editing{
 padding:0;margin:0;
}
/*resizer */.ui-datatable .ui-column-resizer{
 width:8px;height:20px;
 padding:0px;cursor:col-resize;
 background-image:url("/ScraperOnWeb/javax.faces.resource/spacer/dot_clear.gif.jsf?ln=primefaces");
 margin:-4px -10px -4px 0px;
 float:right;
}
.ui-datatable .ui-filter-column .ui-column-resizer{
 height:45px;
}
.ui-datatable .ui-column-resizer-helper{
 width:1px;
 position:absolute;
 z-index:10;
 display:none;
}
.ui-datatable-resizable{
 padding-bottom:1px;/*fix for webkit overlow*/overflow:auto;
}
.ui-datatable-resizable table{
 table-layout:fixed;
}
.ui-datatable-rtl{
 direction:rtl;
}
.ui-datatable-rtl.ui-datatable thead th, .ui-datatable-rtl.ui-datatable tfoot td{
 text-align:right;
}

@FernandoPaladini - Customize your bootstrap table layout css from here and integrate in your code. http://getbootstrap.com/customize/#variables-tables — Pradip, Nov 04 '13 at 05:22

score 1 · Answer 4 · answered Jun 14 '18 at 22:21

You can change styles according to the primefaces user's guide according to the prime faces version you're using. For example for the datatable, next picture tells you the class and which component applies to. you can check the user guide for the last versio 6.2 here

https://www.primefaces.org/docs/guide/primefaces_user_guide_6_2.pdf

I'm posting an example to illustrate how I modified the css for the datatable showcase from https://www.primefaces.org/showcase/ui/data/datatable/basic.xhtml and it worked great.

body {
background-color: #221F4B;
}

.ui-datatable {
    margin: 5% 8% 0 8%;
    text-align: center;
}

.ui-datatable thead th {
    color: #221F4B;
}

.ui-datatable tbody tr {
    height: 5rem;
}

.ui-datatable-even {
    background-color: #DFDFDF;
    color: #221F4B;
}

.ui-datatable-odd {
    background-color: #302C6C;
    color: #A09FB2;
}

@media screen and (min-width: 769px) {
    .ui-datatable {
        margin: 5% 20% 0 20%;
    }
}

I hope it helps somebody. Kind regards!

score 1 · Answer 5 · answered Dec 20 '18 at 04:53

I am using primefaces 6.0

there is option tableStyle in dataTable you can use everything you use in style eg:

tableStyle="font-family: sans-serif; border:none;font-size:  small;padding:1px; background-color: #EAF7FC; background:#EAF7FC"

So the dataTable will look like this

 <p:dataTable id="tbl" var="fmlist" value="#{testmb.fontList}"
                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Exporters}"
                     paginator="true" rows="25" style="margin-bottom:20px" scrollable="true"  draggableRows="false"  cellSeparator="true"  scrollHeight="330" 
                     tableStyle="font-family: sans-serif; border:none;font-size:  small;padding:1px; background-color: #EAF7FC; background:#EAF7FC" >

How to apply style to a PrimeFaces dataTable?

5 Answers5