PrimeFaces : Datatable et en-têtes des colonnes

Bonjour,

J'utilise le composant Datatable du framework Primefaces, et je souhaite modifier l'apparence des en-têtes des colonnes.
J'ai essayé de modifier en CSS les skinning : .ui-datatable et .ui-datatable-header etc, mais sans succès.

Exemple :
Code:

1 2 3 4 .ui-datatable .ui-datatable-header { color: white; background-color: #14A4FF; }
Avez-vous une idée ?
Merci.

Bonjour,
es tu sûr que ton selecteur CSS est bon ? Car si je regarde le showcase de Primesfaces, le thead n'a pas de classe .ui-datatable-header.
Quoiqu'il en soit, si tu veux être sûr d'accéder aux colonnes de ton header du tableau tu peux les sélectionner ainsi :
Code:

1 2 3 4 .ui-datatable thead th { color: white; background-color: #14A4FF; }

Bonjour,
Ça fonctionne bien pour le texte en blanc, mais pas le background-color !
En fait je voudrais changer le background-color lorsque l'en-tête de colonne est survolée (sélecteur avec :hover) ou sélectionnée.
J'ai essayé plein de chose mais qui ne fonctionnent pas.
As-tu une idée ?
Merci.

Est ce que tu pourrais poster le code html généré de ton tableau ?
Parce qu'effectivement le selecteur .ui-datatable thead th:hover devrait te permettre de changer le background sur un survol.

Merci pour ton aide.

Le code généré :

Code:

<th tabindex="0" class="ui-state-default ui-sortable-column ui-resizable-column tableauContour ui-frozen-column" id="form:idColPlanCompteM61:j_idt17" role="columnheader" style="width: 210px;" aria-label="Libellé article: activate to sort column ascending" scope="col"><span class="ui-column-resizer ui-draggable ui-draggable-handle">&nbsp;</span><span class="ui-column-title">Libellé article</span><span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span></th>

Le code avec les styles :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.ui-datatable tbody td {
	border-color: inherit;
}
.ui-datatable thead th, .ui-datatable tbody td, .ui-datatable tfoot td, .ui-datatable tfoot th {
	padding: 4px 10px;
	overflow: hidden;
	border-width: 1px;
	border-style: solid;
}
.ui-datatable-resizable thead th, .ui-datatable-resizable tbody td, .ui-datatable-resizable tfoot td {
	white-space: nowrap;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	border: 1px solid #a8a8a8;
	background: #c4c4c4 url("/WebJOD/javax.faces.resource/images/ui-bg_highlight-hard_80_c4c4c4_1x100.png.xhtml?ln=primefaces-aristo") 50% 50% repeat-x;
	background: #c4c4c4 linear-gradient(top,rgba(255,255,255,0.8),rgba(255,255,255,0));
	background: #c4c4c4 -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.8)),to(rgba(255,255,255,0)));
	background: #c4c4c4 -moz-linear-gradient(top,rgba(255,255,255,0.8),rgba(255,255,255,0));
	font-weight: bold;
	color: #4f4f4f;
	text-shadow: 0px 1px 0px rgba(255,255,255,0.7);
}
.ui-state-default {
	-moz-box-shadow: inset 0 1px 0 #fff;
	-webkit-box-shadow: inset 0 1px 0 #fff;
	box-shadow: inset 0px 1px 0px #fff;
}
.tableauContour {
	border-color: lightgrey !important;
}
.ui-datatable thead th, .ui-datatable tfoot td {
	text-align: center;
}
.ui-datatable .ui-sortable-column {
	cursor: pointer;
}
.ui-datatable-resizable th.ui-resizable-column {
	background-clip: padding-box;
	position: relative;
}
.ui-datatable th.ui-state-default {
	En-têtes de colonne en gris par défaut 
    color: #666666: ;
}
.ui-datatable table {
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}
.ui-datatable-scrollable table, .ui-datatable-sticky table {
	table-layout: fixed;
}
.ui-datatable-resizable table {
	table-layout: fixed;
}
.ui-widget-header {
	border: 1px solid #a8a8a8;
	background: #c4c4c4 url("/WebJOD/javax.faces.resource/images/ui-bg_highlight-soft_100_c4c4c4_1x100.png.xhtml?ln=primefaces-aristo") 50% 50% repeat-x;
	background: #c4c4c4 linear-gradient(top,rgba(255,255,255,0.8),rgba(255,255,255,0));
	background: #c4c4c4 -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.8)),to(rgba(255,255,255,0)));
	background: #c4c4c4 -moz-linear-gradient(top,rgba(255,255,255,0.8),rgba(255,255,255,0));
	color: #333;
	font-weight: bold;
	text-shadow: 0px 1px 0px rgba(255,255,255,0.7);
}
.ui-datatable-scrollable-header, .ui-datatable-scrollable-footer {
	overflow: hidden;
	border: 0 none;
}
.ui-datatable-scrollable .ui-datatable-scrollable-header, .ui-datatable-scrollable .ui-datatable-scrollable-footer {
	position: relative;
}
.ui-datatable .ui-datatable-frozen-container {
	margin-right: -1px;
}
.ui-datatable .ui-datatable-frozenlayout-left, .ui-datatable .ui-datatable-frozenlayout-right {
	padding: 0;
	border: 0 none;
	vertical-align: top;
}
.ui-datatable table.ui-datatable-fs {
	width: auto;
}
.ui-widget {
	font-family: Arial,sans-serif;
	font-size: 1.1em;
}
.ui-datatable-resizable {
	padding-bottom: 1px;
	overflow: auto;
}
.tableauStyle {
	background-color: lightgrey;
	border: 2px solid lightgrey;
	border-radius: 3px;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.tableau {
	margin-top: 60px;
}
.effetFade {
	animation: fade 1.5s;
	opacity: 1;
}
form {
	font-family: Calibri;
	font-size: 10px;
}
.ui-datatable .ui-column-resizer {
	position: absolute;
	top: 0px;
	right: 0px;
	margin: 0;
	width: 8px;
	height: 100%;
	padding: 0;
	cursor: col-resize;
	background-image: url("/WebJOD/javax.faces.resource/spacer/dot_clear.gif.xhtml?ln=primefaces&v=6.1.2");
	border: 1px solid transparent;
	box-sizing: border-box;
}
.ui-icon {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.ui-icon {
	width: 16px;
	height: 16px;
	background-image: url("/WebJOD/javax.faces.resource/images/ui-icons_616161_256x240.png.xhtml?ln=primefaces-aristo");
}
.ui-icon-carat-2-n-s {
	background-position: -128px 0;
}
.ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}
.ui-widget-header .ui-icon {
	background-image: url("/WebJOD/javax.faces.resource/images/ui-icons_898989_256x240.png.xhtml?ln=primefaces-aristo");
}
.ui-state-default .ui-icon {
	background-image: url("/WebJOD/javax.faces.resource/images/ui-icons_38667f_256x240.png.xhtml?ln=primefaces-aristo");
}
.ui-datatable .ui-sortable-column-icon {
	display: inline-block;
	margin: -3px 0 -3px 2px;
}
</style>
</head>
<body><form name="form" id="form" action="/WebJOD/pageTableauPlanCompteM61.xhtml" enctype="application/x-www-form-urlencoded" method="post"><div class="ui-outputpanel ui-widget" id="form:idPage" style="left: 0px; top: 0px; width: 100%; height: 100%; position: absolute;"><div align="center" class="tableau effetFade"><div class="ui-datatable ui-widget ui-datatable-scrollable tableauStyle ui-datatable-resizable ui-datatable-frozencolumn" id="form:idColPlanCompteM61"><table class="ui-datatable-fs"><tbody><tr><td class="ui-datatable-frozenlayout-left"><div class="ui-datatable-frozen-container"><div class="ui-widget-header ui-datatable-scrollable-header"><div class="ui-datatable-scrollable-header-box"><table role="grid"><thead id="form:idColPlanCompteM61_frozenThead"><tr role="row"><th tabindex="0" class="ui-state-default ui-sortable-column ui-resizable-column tableauContour ui-frozen-column" id="form:idColPlanCompteM61:j_idt17" role="columnheader" style="width: 210px;" aria-label="Libellé article: activate to sort column ascending" scope="col"><span class="ui-column-resizer ui-draggable ui-draggable-handle">&nbsp;</span><span class="ui-column-title">Libellé article</span><span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span></th></tr></thead></table></div></div></div></td></tr></tbody></table></div></div></div></form></body>
</html>

OK comme ça cela devrait être bon :
Code:

1 2 3 4 .ui-datatable thead th.ui-state-default { color: white; background-color: #14A4FF; }
Primefaces utilise directement la classe ui-state-default, du coup cela était prioritaire sur le sélecteur donné précédemment, en l'ajoutant à ton selecteur initial tu reprends la priorité.

J'ai essayé avec :
Code:

1 2 3 .ui-datatable thead th.ui-state-default .ui-datatable thead th.ui-state-hover
color fonctionne mais pas background-color.

Avec :

Code:

.ui-datatable thead th.ui-state-highlight

rien ne focntionne !

Le plus simple est de rajouter !important derrière ta redéfinition. Le problème vient de l'ordre de chargement des css, celui de primefaces prime sur les autres.
Dans ton cas, ceci fonctionnera
Code:

1 2 3 4 5 .ui-datatable th{ color:white !important; background-color:#14A4FF !important; }

Hum, hum... le !important est globalement à proscrire, il déstructure complètement les priorités des feuilles de style, cela reste une mauvaise pratique.

S'il s'agit d'un ordre de chargement des feuilles de style, il faut alors placer ta feuille de style à l'intérieur de ton <h:body> :
Code:

1 2 3 4 5 <h:body> <f:facet name="last"> <h:outputStylesheet library="default" name="css/mafeuilledestyle.css" /> </f:facet>
Ou autre solution, si le design que tu veux customiser ne concerne qu'un tableau, tu ajoutes une classe à celui-ci et tu ajoutes cette classe à ton sélecteur pour reprendre la priorité sur le style par défaut.

Aucune de ces solutions ne fonctionnent. C'est toujours le background-color qui pose problème!

Finalement, c'est la propriété background et non background-color qu'il faut utiliser dans mon cas.

Merci pour vos réponses.