We have a datatable layout issue when tableStyle="table-layout: auto;" and there is a "paginatorTopRight" facet to add a refresh button. It works well when there is at least one record. However if there is no record found in the table, layout is broken.
Please see the below images.
Thank you for any help.
https://drive.google.com/open?id=1eIsAA ... ruMQnk0ZID
https://drive.google.com/open?id=1seCmw ... y_KsZ4KoKu
Code: Select all
<p:dataTable
var="projectTask"
lazy="true"
value="#{projectTaskModel}"
reflow="true"
paginator="true"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,20"
rows="5"
selectionMode="single"
selection="#{controller.selectedTask}"
sortOrder="descending"
sortField="id"
tableStyle="table-layout: auto;"
emptyMessage="#{commonMsg.noRecordFound}"
>
<p:column headerText="#{commonMsg.id}" sortBy="#{projectTask.id}">
<h:outputText value="#{projectTask.id}"/>
</p:column>
<p:column headerText="#{commonMsg.project}" rendered="#{showProject}" sortBy="#{projectTask.projectName}">
<h:outputText value="#{projectTask.project.name}"/>
</p:column>
<p:column headerText="#{commonMsg.assignee}" sortBy="#{projectTask.assigneeUserName}"
rendered="#{showAssignee}">
<h:outputText value="#{projectTask.assigneeUserName}"/>
</p:column>
<p:column headerText="#{projectMsg.taskType}" style="text-align: center"
sortBy="#{projectTask.projectTaskTypeName}">
<i class="fa fa-fw #{projectTask.taskType.icon}"/>
<h:outputText value=" #{projectTask.taskType.name}"/>
</p:column>
<p:column headerText="#{projectMsg.title}" sortBy="#{projectTask.title}">
<h:outputText value="#{projectTask.title}"/>
</p:column>
<p:column headerText="#{commonMsg.status}" sortBy="#{projectTask.projectTaskStatusName}">
<i class="fa fa-fw #{projectTask.status.icon}"/>
<h:outputText value=" #{projectTask.status.name}"/>
</p:column>
<p:column headerText="#{commonMsg.startDate}" sortBy="#{projectTask.startDate}">
<h:outputText value="#{projectTask.startDate}">
<f:convertDateTime pattern="#{configuration.getParameterValue('dateFormatPattern')}"/>
</h:outputText>
</p:column>
<p:column headerText="#{msg.plannedEndDate}" sortBy="#{projectTask.plannedEndDate}">
<h:outputText value="#{projectTask.plannedEndDate}">
<f:convertDateTime pattern="#{configuration.getParameterValue('dateFormatPattern')}"/>
</h:outputText>
</p:column>
<p:column headerText="#{commonMsg.endDate}" sortBy="#{projectTask.endDate}">
<h:outputText value="#{projectTask.endDate}">
<f:convertDateTime pattern="#{configuration.getParameterValue('dateFormatPattern')}"/>
</h:outputText>
</p:column>
<f:facet name="paginatorTopRight">
<p:commandButton
icon="fa fa-refresh"
styleClass="secondary"
style="position: relative; bottom: 5px"
process="@this"
update="#{dataPanel}"/>
</f:facet>