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:

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:

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

Answer 1

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

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;
}

Answer 2

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

You used only styleClass

Answer 3

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;
}

Answer 4

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!

Answer 5

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" >