DataTable StyleClass for f:facet Header

UI Components for JSF
Post Reply
Aniken17
Posts: 2
Joined: 08 Jun 2018, 12:36

08 Jun 2018, 13:15

Hi,
I am just working on Application where I have to create some DataTables with a predefined style.
I have to create tables without a header for each column, but with one header for all and the tables should be in different colors .

I already reached this for one table by simply overwriting the .ui-datatable-header class. Problem is that I have to make multiple of them with different colors and I am not able to add a specific styleClass to the facet.

The way it works :
.xhtml

Code: Select all

<p:dataTable id="pinkTable" var="task" value="#{tasksView.tasksBMP10}"
			style="width:300px" scrollable="false"
			styleClass=" ui-datatable-pink tree-table-no-header ">

			<f:facet name="header">   
			 	DMP 10
				<p:commandButton id="add" value="+" update=":myForm:add-panel"
						oncomplete="PF('addDialog').show()" />
			</f:facet>

			<p:column style="width:5%">
				<h:outputText value="#{task.kw}" style="color:#db15ba" />
			</p:column>

			<p:column style="width:35%">
				<h:outputText style="color: white" value="#{task.bezeichnung}" />
			</p:column>

			<p:column style="width:25%">
				<h:outputText value="#{task.taskNummer}" style="color:#db15ba" />
			</p:column>
			<p:column style="width:7%">
				<h:outputText value="#{task.stkZahl}x" style="color: white" />
			</p:column>
			<p:column style="width:7%">
				<h:commandLink value="x" action="#{tasksView.deleteAction(task)}" />
			</p:column>

	</p:dataTable>
.css:

Code: Select all

.ui-datatable-pink table {
	border-collapse: collapse;
	border-style: solid;
	width: 100%;
	table-layout: fixed;
	font-size: 10px;
	border-color: #db15ba;
	border-bottom: 3mm solid #db15ba;
}
.tree-table-no-header thead {
	display: none
}

.ui-datatable-header{
	border: 1px #db15ba solid;
	background: #db15ba;
	height: 35px;
	text-shadow: none;
	color: white
}
So the problem is that when i change .ui-datatable-header to .ui-datatable-header-pink i don´t know where I can use it as a styleClass.


I allready managed it, by using columngroup for the first line and add the styleClass at the column, but when I do so am not able to set the width of my columns manualy.

Code: Select all

<p:dataTable id="pinkTable" var="task" value="#{tasksView.tasksBMP10}"
			style="width:300px" scrollable="false"
			styleClass=" ui-datatable-pink ">
			<p:columnGroup type="header"  >
			<p:row >
 				<p:column style="width:100%" colspan="5" styleClass="ui-datatable-header-pink">
					<f:facet name="header" >   
	
			 DMP 10
			
			<p:commandButton id="add" value="+" update=":myForm:greeting-panel"
							oncomplete="PF('greetingDialog').show()" />
					</f:facet>
				</p:column>
			</p:row>

			</p:columnGroup>
			<p:column style="width:5%">
				<h:outputText value="#{task.kw}" style="color:#db15ba" />
			</p:column>

			<p:column style="width:35%">
				<h:outputText style="color: white" value="#{task.bezeichnung}" />
			</p:column>

			<p:column style="width:25%">
				<h:outputText value="#{task.taskNummer}" style="color:#db15ba" />
			</p:column>
			<p:column style="width:7%">
				<h:outputText value="#{task.stkZahl}x" style="color: white" />
			</p:column>
			<p:column style="width:7%">
				<h:commandLink value="x" action="#{tasksView.deleteAction(task)}" />
			</p:column>

		</p:dataTable>

Does anyone have an idea how to add a styleClass to a facet header?

I am unsing:
primefaces 6.2
jsf spring boot starter 3.2
on local tomcat.


Thanks,
Logi

kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

09 Jun 2018, 20:46

Read https://stackoverflow.com/questions/876 ... tom-styles and learn about css selectors in general. You just have to look up what the actual class is of the header and use that too in a selector.

Aniken17
Posts: 2
Joined: 08 Jun 2018, 12:36

18 Jun 2018, 13:00

Hi, so i tried now for a long time and I know which is the style Class for the header.
My problem is that when generate my table like this:

Code: Select all


<p:dataTable id="pinkTable" var="task" value="#{tasksView.tasksBMP10}"
			style="width:300px" scrollable="false"
			styleClass=" ui-datatable-pink, ui-datatable-header-pink ">
<f:facet name="header"  >   MY HEADER
.....
	

The .ui-datatable-header of the facet header is not overloaded.
This is the source from my browser:

Code: Select all

Tabel:
<div id="myForm:pinkTable" class="ui-datatable ui-widget  ui-datatable-pink, tree-table-no-header,ui-datatable-header-pink " style="width:300px"><div class="ui-datatable-header ui-widget-header ui-corner-top">   
	
Facet(Header):
<div class="ui-datatable-header ui-widget-header ui-corner-top">   
	
So I think the class is loaded for the "normal" headers (which i don´t have), but not for the f:facet.
So is there a possibility to load the styleclass to a facet?
Something like:

Code: Select all

<f:facet name="header" styleClass=" ui-datatable-header-pink">   
	
 	MY HEADER
			
	<p:commandButton id="add" value="+" update=":myForm:add_to_table"
					oncomplete="PF('addDialog').show()" />
</f:facet>


Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 18 guests