PrimeFaces : Datatable et en-têtes des colonnes

**denisduval75** · 09/08/2018, 17h25

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Avez-vous une idée ?
Merci.

**VirgApps** · 24/08/2018, 09h22

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**denisduval75** · 24/08/2018, 15h17

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.

**VirgApps** · 24/08/2018, 17h11

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.

**denisduval75** · 24/08/2018, 18h40

Merci pour ton aide.

Le code généré :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**VirgApps** · 27/08/2018, 13h33

OK comme ça cela devrait être bon :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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é.

PrimeFaces : Datatable et en-têtes des colonnes

JSF Java

Vue hybride

Discussions similaires

Partager

Partager