All geek questions in one place

How to apply style to DataTable PrimeFaces?

I initially have JSF datatable 2.0 as follows:

<h:dataTable value="#{bean.items}" var="item" styleClass="table table-hover">

Which looks like this:

Before use PrimeFaces DataTable (I need discover what's the selected row

I wanted to use row select, 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:

After use Primefaces (but can't discover the selected row yet :(

However, my table and table-hover style classes do not apply. How is this caused and how can I solve it?

+6
source share
5 answers

Get the manual for using the Primefaces version here . In this document, you will find how to override the styles of each component under the Skinning heading.
For instance:
Below is the skinning for p:outputLabel

enter image description here

If you want to change the color, I would use my css, which will apply to all p:outputLabel s.

 .ui-outputlabel{ color:blue; }

If you want to change the style for only one specific p:outputLabel , you can use this as

 <div class="myLabel"> <p:outputLabel value="This is Demo" /> </div>

then the CSS will look like this:

 .myLabel .ui-outputlabel{ color:blue; }
+12
source

Hm ... Isn't that the tableStyleClass attribute that should be table table-striped ?

You used only styleClass

+4
source

In the basic styles of the basic style is the jquery controller. You can change the dataTable style by changing the css theme style for dataTable. If you want to change the style on the fly using jquery themeroller check out these links - http://www.datatables.net/styling/themes

Below is the responsible css segment for dataTable - change according to your needs and add css to your 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; }
+2
source

You can change the styles according to the Primefaces user guide according to the version you are using. For example, for a data table, the following figure shows which class and which component belongs. You can check the user manual for the latest version 6.2 here

https://www.primefaces.org/docs/guide/primefaces_user_guide_6_2.pdf

enter image description here

enter image description here

I am posting an example to illustrate how I changed the CSS for a date 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%; } }

Hope this helps someone. Yours faithfully!

+1
source

I am using Primefaces 6.0

There is a tableStyle option in dataTable that you can use in style, for example:

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

Source: https://habr.com/ru/post/957159/

More articles:


All Articles