How to merge cells in a primefaces datatable row?

Question

Is this possible with datatable tags or CSS ? Any solution is helpful. If possible, search fileds for date can be in a same column.

Primefaces datatable:

datatable

Code for datatable:

<p:dataTable>
        <p:column filterBy="#{log.mbr}" sortBy="#{log.mbr}" headerText="mbr">
            <h:outputText value="#{log.mbr}" />
        </p:column>
        <p:column id="dateFrom" headerText="datum od"
            filterBy="#{log.datumOd}" sortBy="#{log.datumUpisa}">
            <f:facet name="filter">
                <p:calendar onkeypress="PF('loggerTable').filter()"
                    onchange="PF('loggerTable').filter()" id="from"
                    styleClass="customCalendar" pattern="dd/MM/yyyy"
                    widgetVar="dateFrom">
                    <p:ajax event="dateSelect" oncomplete="PF('loggerTable').filter()"
                        update="logsTable" />
                </p:calendar>
            </f:facet>
            <h:outputText id="datumOdZaBrisanje" value="#{log.datumUpisa}" />
        </p:column>
        <p:column id="dateTo" headerText="datum do" filterBy="#{log.datumDo}">
            <f:facet name="filter">
                <p:calendar onchange="PF('loggerTable').filter()" id="to"
                    styleClass="customCalendar" pattern="dd/MM/yyyy"
                    widgetVar="calendarFrom">
                    <p:ajax event="dateSelect" oncomplete="PF('loggerTable').filter()"
                        update="logsTable" />
                </p:calendar>
            </f:facet>
        </p:column>
        <p:column style="width:40px;text-align: center" headerText="prikaz">
            <p:commandButton update=":form:logDetail"
                oncomplete="PF('logDialog').initPosition();PF('logDialog').show()"
                icon="fa fa-search">
                <f:setPropertyActionListener value="#{log}"
                    target="#{logger.selectedLog}" />
            </p:commandButton>
        </p:column>
</p:dataTable>

Possible duplicate of [cell merge in datatable at primefaces](https://stackoverflow.com/questions/31109438/cell-merge-in-datatable-at-primefaces) — Raphael_S, Jul 22 '19 at 10:13
You want to filter the date from date od - to?? Or `Date od` and `Date to` are two different dates? — tsotzolas, Jul 22 '19 at 16:25
Only one date.. if dateOd (dateFrom) is selected date must be after, if dateDo (dateTo) is selected date must be before, if both selected date is between — Rattus, Jul 22 '19 at 16:43
I think you must change the description. You want date filtering between 2 days — tsotzolas, Jul 22 '19 at 16:59

score 1 · Accepted Answer · answered Jul 22 '19 at 17:19

This code do something like that.

The xhtml

  <p:dataTable id="MissionTable"
                             value="#{MissionsBean.missionsList}"
                             var="record"
                             widgetVar="MissionTable"
                             selection="#{MissionsBean.mission}"
                             rowKey="#{record}"
                             filterDelay="600"
                             >
 .............
                    <p:column headerText="Date Start" sortBy="#{record.missionDateStart}"
                              filterBy="#{record.missionDateStart}"
                              filterFunction="#{MissionsBean.filterByDateStart}"
                              filterMatchMode="contains" style="width: 180px!important; text-align: center;">

                        <f:facet name="filter">
                            <h:inputHidden id="filter"/>
                        </f:facet>
                        <f:facet name="header">
                            <p:link value="Date Start" style="color: white;"
                                    onclick="$(PrimeFaces.escapeClientId('#{p:component('filter')}'))[0].value = ''"
                            />
                            <br/>
                            <p:calendar id="sfrom" pattern="dd/MM/yy" size="4" navigator="true">
                                <p:ajax event="dateSelect"
                                        onstart="$(PrimeFaces.escapeClientId('#{p:component('filter')}'))[0].value = $(PrimeFaces.escapeClientId('#{p:component('sfrom')}_input'))[0].value + '>' + $(PrimeFaces.escapeClientId('#{p:component('sto')}_input'))[0].value"
                                        oncomplete="PF('MissionTable').filter()"/>
                            </p:calendar>
                            <h:outputText class="fa fa-arrows-h fa-2x" style="vertical-align: middle;"/>

                            <p:calendar id="sto" pattern="dd/MM/yy" size="4" navigator="true">
                                <p:ajax event="dateSelect"
                                        onstart="$(PrimeFaces.escapeClientId('#{p:component('filter')}'))[0].value = $(PrimeFaces.escapeClientId('#{p:component('sfrom')}_input'))[0].value + '>' + $(PrimeFaces.escapeClientId('#{p:component('sto')}_input'))[0].value"
                                        oncomplete="PF('MissionTable').filter()"/>
                            </p:calendar>
                        </f:facet>
                             <h:outputText value="#{record.missionDateStart}">
                                 <f:convertDateTime pattern="dd MMM yyyy HH:mm"></f:convertDateTime>
                             </h:outputText>

                    </p:column>
......................
       </p:dataTable>

And the Custom filter is

 public boolean filterByDate(Object value, Object filter, Locale locale) {
    String filterText = (filter == null) ? null : filter.toString().trim();
    if (filterText == null || filterText.isEmpty()) {
        return true;
    }
    if (value == null) {
        return false;
    }

    DateTimeFormatter sdf = DateTimeFormatter.ofPattern("dd/MM/yy");
    Instant instant = ((Date) value).toInstant(); //Zone : UTC+0

    LocalDate dateValue = instant.atZone(ZoneId.of("Europe/Athens")).toLocalDate();
    LocalDate dateFrom;
    LocalDate dateTo;
    try {
        String fromPart = filterText.substring(0, filterText.indexOf(">"));
        String toPart = filterText.substring(filterText.indexOf(">") + 1);
        dateFrom = fromPart.isEmpty() ? null : LocalDate.parse(fromPart, sdf);
        dateTo = toPart.isEmpty() ? null : LocalDate.parse(toPart, sdf);
    } catch (Exception e) {
        log.error("unable to parse date: " + filterText, e);
        return false;
    }

    return (dateFrom == null || dateValue.isAfter(dateFrom) || dateValue.isEqual(dateFrom))
            && (dateTo == null || dateValue.isBefore(dateTo) || dateValue.isEqual(dateTo));
}

As good as I remember I wrote my code according to this answer

Be careful the date pattern. In my example is different from yours.

Sorry but I couldn't adjust my code to yours. I hope this code will help you.

If you use Primefaces 7 you can try to use datePicker Range Selection:

How to merge cells in a primefaces datatable row?

1 Answers1