Search code examples
primefacesdatatableexporter

Primefaces: Right align Exporters on table header


I delacred the paginatorTemplate of p:dataTable as this:

<p:dataTable id="lazyDataTable" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {Exporters}">

With declaration of "Exporters":

<f:facet name="{Exporters}">
    <h:commandLink>
        <p:graphicImage libray ="images" name="excel.png"/>
        <p:dataExporter type = "xls" target="lazyDataTable" fileName="report" />
    </h:commandLink>
    <h:commandLink>
        <p:graphicImage library="images" name="pdf.png"/>
        <p:dataExporter type = "pdf" target="lazyDataTable" fileName="report" />
    </h:commandLink>
</f:facet>

I want the Exporters will be right aligned of the table header, but it appeared at the middle of the header like this: enter image description here

How can I align it to the right of the header, thanks!


Solution

  • The data exporter in the table header is wrapped into a <a />-tag, thus you are able to align the position of the exporter via CSS like this:

    /*  data-exporter symbol shown in the upper right
        corner of the datatable */
    
    .ui-paginator a, .exporter .ui-datatable-header a {
        float: right;
        margin-right: 5px;
    }