How to make a responsive datatable?

[cguerrero1205]

Hi,

I am trying to make a datatable, where each column has if specific width and it looks perfect, like this:

(Please don't pay attention to the logo).

I have reflow = true, for the responsive view, but when viewing the page on a mobile device, the table looks like this:

(Please don't pay attention to the logo).

My idea is that when switching to responsive view, the width of each column goes to “auto” and the text alignment to “left”. I tried with some “Media Query”, but nothing works. I searched in the showcase, but all the examples, in any case, do not specify width and alignment for each column, so by default they are already set to “auto” and “left”.

This is the code of the page.

<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="jakarta.faces.html"
    xmlns:f="jakarta.faces.core"
    xmlns:ui="jakarta.faces.facelets"
    xmlns:p="primefaces"
    template="/WEB-INF/layout/template.xhtml">

    <ui:define name="title">
        #{controladorBean.tituloAplicacion}
    </ui:define>

    <ui:define name="head">

    </ui:define>

    <ui:define name="content">
        <h:form id="f">
            <p:growl id="mensajes" showDetail="true" life="15000" escape="false"/>

            <div class="card">
                <p:dataTable id="tblCicloAR"
                             widgetVar="tblCicloAR"
                             value="#{cicloARBean.listaCiclo}"
                             var="datos"
                             paginator="true"
                             paginatorPosition="bottom"
                             emptyMessage="No se encontraron datos"
                             rows="15"
                             paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                             currentPageReportTemplate="{startRecord}-{endRecord} de {totalRecords} registros"
                             rowsPerPageTemplate="15,20,25,30"
                             size="small"
                             reflow="true">
                    <f:facet name="header">                         
                        <p:commandButton id="btnNuevo"
                                         value="Nuevo"
                                         action="#{cicloARBean.nuevoCiclo()}"
                                         rendered="#{cicloARBean.permisoCrear}"
                                         update="f:dlgCiclo f:mensajes"
                                         icon="pi pi-external-link">
                        </p:commandButton>
                    </f:facet>
                    <p:column id="idCiclo"
                              headerText="Id"
                              filterBy="#{datos.id}"
                              filterMatchMode="contains"
                              filterStyle="width: 80%; height: 15px"
                              style="text-align: center; width: 5%">
                        <h:outputText value="#{datos.id}"/>
                    </p:column>
                    <p:column id="idFechaCiclo"
                              headerText="Fecha hora registro"
                              filterBy="#{datos.fechaHoraRegistro}"
                              filterMatchMode="contains"
                              filterStyle="width: 80%; height: 15px"
                              style="text-align: center; width: 15%">
                        <h:outputText value="#{datos.fechaHoraRegistro}"/>
                    </p:column>
                    <p:column id="idResponsableNombre"
                              headerText="Responsable"
                              filterBy="#{datos.nombreResponsable}"
                              filterMatchMode="contains"
                              filterStyle="width: 80%; height: 15px"
                              style="text-align: center; width: 60%">
                        <h:outputText value="#{datos.nombreResponsable}"/>
                    </p:column>
                    <p:column id="idIniciar"
                              rendered="#{cicloARBean.permisoIniciar}"
                              headerText="Iniciar"
                              style="text-align: center; width: 5%">
                        <p:commandButton value=""
                                         action="#{cicloARBean.abrirDlgCodBar(datos,1)}"
                                         update="f:dlgLeerCodigoUsuario"
                                         process=""
                                         styleClass="GreenButton White Fs12"
                                         icon="fa fa-play"
                                         rendered="#{datos.fechaHoraInicio.length() == 0}">
                        </p:commandButton>
                    </p:column>
                    <p:column id="idFinalizar"
                              rendered="#{cicloARBean.permisoFinalizar}"
                              headerText="Finalizar"
                              style="text-align: center; width: 5%">
                        <p:commandButton value=""
                                         action="#{cicloARBean.abrirDlgCodBar(datos,0)}"
                                         update="f:dlgLeerCodigoUsuario"
                                         styleClass="ui-button-danger ui-fluid"
                                         icon="fa fa-stop-circle-o"
                                         rendered="#{datos.fechaHoraInicio.length() > 0 and datos.fechaHoraFinal.length() == 0}">
                        </p:commandButton>
                    </p:column>
                    <p:column id="idVer"
                              headerText="Ver"
                              style="text-align: center; width: 5%">
                        <p:commandButton value=""
                                         action="#{cicloARBean.ver(datos)}"
                                         update="f:dlgCiclo"
                                         styleClass="ui-button-warning ui-fluid"
                                         icon="fa fa-eye">
                        </p:commandButton>
                    </p:column>
                    <p:column id="idEditar"
                              headerText="Editar"
                              rendered="#{cicloARBean.permisoEditar}"
                              style="text-align: center; width: 5%">
                        <p:commandButton value=""
                                         action="#{cicloARBean.editar(datos)}"
                                         update="f:dlgCiclo"
                                         icon="fa fa-pencil"
                                         rendered="#{datos.fechaHoraInicio.length() == 0}">
                        </p:commandButton>
                    </p:column>
                </p:dataTable>
            </div>

            <p:confirmPopup global="true" showEffect="fade" hideEffect="fade">
                <p:commandButton value="No" styleClass="ui-confirm-popup-no ui-button-flat"/>
                <p:commandButton value="Si" styleClass="ui-confirm-popup-yes" />
            </p:confirmPopup>
        </h:form>
    </ui:define>

</ui:composition>

I appreciate any help.

[melloware]

I definitely see what you want to do but this is a tricky one as you need to detect the reflow and then act on it with some Jquery to fix your column styles.

you can MonkeyPatch the datatable reflow method to basically inject your code to handle your styles. here is a MonkeyPatch you can tweak on your own.

if (PrimeFaces.widget.DataTable) {
  PrimeFaces.widget.DataTable.prototype.initReflow = function() {
    var headerColumns = this.thead.find('> tr > th');

    for (var i = 0; i < headerColumns.length; i++) {
      var headerColumn = headerColumns.eq(i),
        reflowHeaderText = headerColumn.find('.ui-reflow-headertext:first').text(),
        colTitleEl = headerColumn.children('.ui-column-title'),
        title = (reflowHeaderText && reflowHeaderText.length) ? reflowHeaderText : colTitleEl.text();

      var column = this.tbody.find('> tr:not(.ui-datatable-empty-message,.ui-datatable-summaryrow) > td:nth-child(' + (i + 1) + ')')
      column.find(".ui-column-title").remove(); // #11078
      column.prepend('<span class="ui-column-title">' + PrimeFaces.escapeHTML(title) + '</span>');
    }
  }
};

[melloware]

Glad you got it resolved!

i would think at best an onReflow="" JavaScript method could be added to hook into this but seeing your fixes its just too custom per user what "may" want to be done in reflow mode.

[cguerrero1205]

Hi, @melloware .

I was doing better tests, I realized that as I shared the previous code, the style of the table in non-reflow view was affected, always aligned to the left, but in this view I want it to be aligned to the center, so I removed the 'text-align: left' from the CSS, since by default, when reflow is done, the text of the table data is aligned to the left, but the text of the titles is aligned to the center, so in the 'style' of these, I put the 'text-align: left'.

The code looks like this:

if (PrimeFaces.widget.DataTable) {
    PrimeFaces.widget.DataTable.prototype.initReflow = function() {
        var headerColumns = this.thead.find('> tr > th');

        for (var i = 0; i < headerColumns.length; i++) {
            var headerColumn = headerColumns.eq(i),
                reflowHeaderText = headerColumn.find('.ui-reflow-headertext:first').text(),
                colTitleEl = headerColumn.children('.ui-column-title'),
                title = (reflowHeaderText && reflowHeaderText.length) ? reflowHeaderText : colTitleEl.text();

            var column = this.tbody.find('> tr:not(.ui-datatable-empty-message,.ui-datatable-summaryrow) > td:nth-child(' + (i + 1) + ')')
            column.find(".ui-column-title").remove(); // #11078
            column.prepend('<span class="ui-column-title" style="width: 100px; font-weight: bold; text-align: left">' + PrimeFaces.escapeHTML(title) + '</span>');

            // Apply styles dynamically
            column.css({
                'width': 'auto'
            });
        }
    };
};

Now both views are seen correctly.

I have a doubt: this script should be executed only when “reflow=true”.

I suppose that the use of the 'width: 100px' is understood, in the same way I will explain it in case someone does not do it: the idea is that the distance of all the titles and their respective data, is the same, so that in this way the table looks better distributed and not that the content of a data begins directly where it finishes that of its title.

Another doubt that I have, is: how do I do so that the content or data, if it is very long, is not located below the title, but that it stays within its block, I believe that it is better understood with an image:

Regarding the 'onReflow' and thinking about it, I think that PrimeFaces could apply these styles automatically when 'reflow = true' is done.

[melloware]

So i think from your changes all you added was this?

// Apply styles dynamically
            column.css({
                'width': 'auto'
            });

Did you add anything else? Its hard to tell without a diff. If so I think you are right this could be added to PF. Let me know.

[cguerrero1205]

Hi, @melloware

Thanks to your recommendation, I found the solution to my problem. I modified the Script you shared with me, I added a CSS for what I wanted, additionally I modified the so that the titles are in bold and have a fixed size, so the table looks a little more organized.

At the end the script looked like this:

if (PrimeFaces.widget.DataTable) {
    PrimeFaces.widget.DataTable.prototype.initReflow = function() {
        var headerColumns = this.thead.find('> tr > th');

        for (var i = 0; i < headerColumns.length; i++) {
            var headerColumn = headerColumns.eq(i),
                reflowHeaderText = headerColumn.find('.ui-reflow-headertext:first').text(),
                colTitleEl = headerColumn.children('.ui-column-title'),
                title = (reflowHeaderText && reflowHeaderText.length) ? reflowHeaderText : colTitleEl.text();

            var column = this.tbody.find('> tr:not(.ui-datatable-empty-message,.ui-datatable-summaryrow) > td:nth-child(' + (i + 1) + ')')
            column.find(".ui-column-title").remove(); // #11078
            column.prepend('<span class="ui-column-title" style="width: 135px; font-weight: bold">' + PrimeFaces.escapeHTML(title) + '</span>');

            // Apply styles dynamically
            column.css({
                'width': 'auto',
                'text-align': 'left'
            });
        }
    };
};

And the page looks like this:

Thank you very much!

Personal opinion: it would be crazy to think that something like this could be added in Primefaces? in other words, not only to say “reflow = true”, but also to allow this type of modifications directly in the <p:datatable>.

Yes, I only made 2 changes to the script you shared with me:

I changed this:

column.prepend('<span class="ui-column-title">' + PrimeFaces.escapeHTML(title) + '</span>');

To this:

column.prepend('<span class="ui-column-title" style="width: 100px; font-weight: bold; text-align: left">' + PrimeFaces.escapeHTML(title) + '</span>');

And I added this:

column.css({
    'width': 'auto'
});

[melloware]

OK awesome can you do me a favor and open a ticket with all this info so we can get it updated: https://github.com/primefaces/primefaces/issues

i think your changes are good ones.

[cguerrero1205]

Ok, it's done.

Thanks for all your help.