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>
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
}
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>
I am unsing:
primefaces 6.2
jsf spring boot starter 3.2
on local tomcat.
Thanks,
Logi