I have a data table in my application. One column have heavy data which increasing the width of table.
I want to split the data to two or more lines in that column.
I have tried by setting width for that column but data did't split and doesn't show total data.
<p:column headerText="#{msgs['exception.label.exceptionMsg']}" width="200">
<h:outputText value="#{exception.exceptionMsg}"/>
</p:column>
How can i split the data?
The .ui-datatable tbody td has a default style of white-space: nowrap, meaning that long texts won't wrap. You want to override this style by setting it back to white-space: normal.
E.g.
<p:column width="200" styleClass="wrap">
with this CSS
.ui-datatable tbody td.wrap {
white-space: normal;
}
See also:
How do I override default PrimeFaces CSS with custom styles?
This is my solution. It's very simple.
<p:column style="white-space : normal ; width: 315px">
<h:outputText value="T h i s i s a v e r y L a r g e T e x t">
</h:outputText>
</p:column>
I used the following solution after going through an answer by BalusC to some other related question.
I use this in CSS:
.ui-datatable tbody td.wrap {
white-space: normal;
word-wrap: break-word;
}
And this with my columns:
<p:column style="text-align: left" width="38" styleClass="wrap">
This handles data with space and without spaces -both.
Related
<p:dataTable id="test" value="#{test.attLogList}"
var="item"
selection="#{test.searchedAttLogList}"
rowStyleClass="#{item.name eq 'abb' ? 'Closed' : null}"
rowKey="#{item.employeeNumber}">
<p:column sortBy="#{item.employeeNumber}"
headerText="#{o:translate('Employee')}">
<h:outputText value="#{item.employeeNumber} " />
</p:column>
css tag is
<style type="text/css">
.Closed {
background-color: #FF0000 !important;
color: #000000 !important;
}
</style>
I want to change row color in data table depend upon condition.Below code is working but only for First row it is not applying for remaining rows.The condition is applying for first row of datatable. kindly help me.
closed is a css tag
This worked for me
.yellowRaw {
background: yellow !important;
}
<p:dataTable rowStyleClass="#{not empty position.replacedBy?'yellowRaw':''}" ...>
I am developing a dynamic Datatable with Primefaces 5. I have set the table width to auto. This is really nice. My Column uses only the needed width, which is perfect. But I also use paginator and a Table header. So my table looks like this:
<p:dataTable var="row"
editingRow="#{row.status == CommonConstant.ROWSTATUS_EDIT}"
tableStyle="width:auto"
value="#{componentBean.componentData[componentId].lazyModel}"
id="#{componentId}"
editable="true" scrollable="false" scrollHeight="100%"
resizableColumns="true"
paginator="true"
paginatorPosition="top"
rowsPerPageTemplate="10 25 50 100"
lazy="true">
<f:facet name="header">
<p:outputPanel style="text-align:right">
<h:commandLink rendered="#{fn:indexOf(componentBean.componentData[componentId].loadedData.actions, CommonConstant.ACTIONTYPE_EXCEL) >= 0}" >
<img border="0" src="img/excel.png" width="24"/>
<p:dataExporter type="xls" target="#{componentId}" fileName="#{appDialogId}" />
</h:commandLink>
<h:commandLink rendered="#{fn:indexOf(componentBean.componentData[componentId].loadedData.actions, CommonConstant.ACTIONTYPE_PDF) >= 0}">
<img border="0" src="img/pdf.png" width="24"/>
<p:dataExporter type="pdf" target="#{componentId}" fileName="#{appDialogId}"/>
</h:commandLink>
</p:outputPanel>
<p:outputPanel>
<h:outputText value="#{componentBean.componentData[componentId].loadedData.appdialogid}" />
</p:outputPanel>
</f:facet>
...
</p:dataTable>
How can I force the Header and the paginator to have the same width than the table?
For plain data table try this:
.ui-datatable {
display: table;
}
.ui-datatable table {
table-layout: auto !important;
}
I haven't tried resizable or anything else yet.
I am assuming you are setting the auto width on the datatable as I can recreate your problem.
Try this:
set the style to min-width: $px on the div with the ui-datatable class to a value that makes your table happy
remove the auto width from the table and add table-layout: auto ! important to the table element so the colums still auto size somewhat but relative to the header.
Note: The width on the table element needs to remain as 100%, its default, so it fills the header.
The below is not really relevant but still 'good to know'.
All datatables in Primefaces 5 use table-layout: fixed. You can override to match the older Primefaces model using css.
.ui-datatable table, .ui-datatable-resizable table {
table-layout: auto !important;
}
.ui-datatable-scrollable table {
table-layout: fixed !important;
}
Scrollable data-tables need to remain as fixed.
It may help if you remove the outputPanels and use the data exporter facet for the links. If you prefer the links in the header put them in a span.
Priemfaces example
<f:facet name="{Exporters}">
<h:commandLink> ...
</h:commandLink> ...
</f:facet>
Enclose your datatable in a panelGrid
<p:panelGrid id="forautowidth" columns="1">
--- Data Table Here ---
</p:panelGrid>
This has a somewhat annoying box around the table, but that is a good deal better then the overshooting paginator. Plus it works well as the browser page size changes
I have a code for aligning components inside the panelgrid which I have given below
<h:panelGrid columns="2" styleClass="table width100P"
columnClasses="width50P, width50P">
<h:panelGrid columns="3"
columnClasses="leftColb, rightColb,rightColb"
styleClass="infoTable">
// FIRST set of items which will be displayed in the first row since the panel grid column is "3".
<h:outputLabel value="PAT # :" />
<h:outputLabel value="PAT # :" />
//THE BELOW IS AN DUMMY LABEL TO FULFILL THE PANEL GRID
<h:outputLabel value="PAT # :" />
// SECOND set of items which will be displayed in the SECONDE row since the panel grid column is "3".
<h:outputLabel value="PAT # :" />
<h:outputLabel value="PAT # :" />
//THE BELOW IS AN DUMMY LABEL TO FULFILL THE PANEL GRID
<h:outputLabel value="PAT # :" />
//THIRD SET OF items which will be displayed in the THIRD row since the panel grid column is "3".
<h:outputLabel value="PAT # :" />
//FOURTH SET OF items which will be displayed in the FouRHT row since the panel grid column is "3".
<h:outputLabel value="PAT # :" />
</h:panelGrid>
</h:panelGrid>
CSS For the leftColb, rightColb,rightColb,width100P given below
.infoTable TD {
padding: 1px 2px;
border-width: 1px 0px 1px 0px;
border-color: #ddd;
border-style: solid;
vertical-align: top;
}
.leftColb {
text-align: right;
font-weight: bold;
width: 50%;
}
.rightColb {
text-align: left;
font-weight: normal;
width: 50%;
}
.width50P {
width: 50%;
}
.width100P {
width: 100%;
}
My problem is since the third set and the fourth set are having only one <h:outputLabel>, the first item in the fourth set jumps to the 3rd row to fullfill the panelgrid since its expecting three components in a row and the fifth item jumps to the 3rd row for tallying the row.
What i tried was to insert an "DUMMY" in the third row to fulfill the panel grid when that row contains only two components, but there are another set of rows has 2 or 3 ,4 components which are rendered dynamically which made more difficulty in alignment.
Since the panel grid allows three items in a row. I am trying to balance the components in each row.Though the rest of the rows components are dynamically generated.
PFA of the screen shot which I have given below.
How can I resolve this issue ?
Your columns are being laid out by the default behavior of p:panelGrid (or in the example above h:panelGrid) with a set of numbered columns. Each component contained within the grid will be laid out from left to right, top to bottom.
If you want more control over what goes where use p:row and p:column to help define the structure of your grid. A good reference on how this is accomplish is in the PrimeFaces Showcase under PanelGrid.
I have a data table in my application, I fix the columns width as 200. If i print small line in datatable column means it prints correct format. If i print lengthy line in the datatable column means, it cant wrap it out. how can i wrap the text in data table column.
Problem Description
You can control word wrapping by CSS word-wrap property. Inside tables, this only requires the table-layout property to be set to fixed, so that columns with a fixed width don't auto-expand when their content is larger.
E.g.
.fixed-size {
table-layout: fixed;
word-wrap: break-word;
}
and
<p:dataTable ... styleClass="fixed-size">
The below worked for me in Chrome not in IE
.preformatted {
white-space: pre-wrap;
word-break: break-all;
}
<p:column>
<h:outputText value="#{bean.txt}" styleClass="preformatted" />
</p:column>
My sollution is to apply word-break style to column. Just like:
<p:column id="accountsMaskColumn"
headerText="#{msg['mr.settings.headers.accountMask']}"
filterBy="#{item.accountMask}"
sortBy="#{item.accountMask}"
style="word-break: break-word">
<h:outputText value="#{item.accountMask}"/>
</p:column>
Hope someone find this useful
I am rendering a table with p:dataTable (PrimeFaces) and what I want to do is color the background of cells depending on the value of their content. This is different from coloring a row or a column -- it is the individual cell.
First a CSS problem. If I do this:
<p:column headerText="xyzzy">
<div style="background-color: green">
<h:outputText value="#{rowVar.anumber}" >
<f:convertNumber groupingUsed="true" />
</h:outputText>
</div>
</p:column>
the background color just of the content gets set, not the whole cell. In other words the padding is still the default.
Second, I want to make the style string a variable expression. I can add a function to the backing bean, but how do I access the table content in the method? Will this work?
<div style="#{bean.computeCSS(rowVar.number}">
EDIT:
I figured out a way to do the conditional part, but I still need help with the CSS part. My solution looks like:
<p:column headerText="xyzzy">
<div class="#{rowVar.anumber gt 0 ? 'colored' : ''}">
<h:outputText value="#{rowVar.anumber}">
<f:convertNumber groupingUsed="true" />
</h:outputText>
</div>
</p:column>
Although I dislike getting to fancy in EL, this has the advantage of not needed a backing bean method.
However I still only get the background color set, not the whole cell.
You can add a css class to the row and to the column too, that identifies a cell.
Use the dataTable's rowStyleClass attribute (example).
If you want to color multiple rows:
<p:dataTable value="#{bean.rows}" var="rowVar"
rowStyleClass="#{rowVar.firstCol gt 0 ? 'firstColColored' : ''}
#{rowVar.secondCol gt 0 ? 'secondColColored' : ''}">
<p:column styleClass="firstCol">...
<p:column styleClass="secondCol">
css:
.firstColColored .firstCol {
background: pink;
}
how about adding padding to your class , with px or percents...
something like this
.colored{
background-color:yellow;
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}