Primefaces dataTable edit cells next to header

0
votes

I'm trying to draw an assistance table with primefaces and I'm facing some troubles with <p:dataTable>.

The scenario

The table should be as follows:

-----------------------------------------------------------------------------------------
|                         |                 Date and assistance (1)               |     |
|          Name (1)       |-------------------------------------------------------|  %  |
|                         |(4)|   |   |   |   |   |   |   |   |   |   |   |   |   |     |
-----------------------------------------------------------------------------------------
|Lastname, firstname (2)  |(3)|   |   |   |   |   |   |   |   |   |   |   |   |   | (5) |
-----------------------------------------------------------------------------------------
|...[more rows]...                                                                      |
-----------------------------------------------------------------------------------------

In (1) I have the titles (not editable of course). In (2) I have the person data which is brought from the DB and is not editable also.

In (3) I have an editable cell with a dropdown list for the possible values [P, A, L] (Present, Absent, Late).

In (4) I need to insert the date of the assistance (not necessarily the current date).

Finally, in (5) I have the current assistance percentage, which is a calculated field.

The problem

I'm not being able to to make (4) editable, e.g. with a <p:inputMask pattern="dd/MM"> tag

Failed Attempt

I tried with the grouping property of of <p:dataTable>, something like:

<!-- Assist class has the properties char value, Person person and Date date -->
<p:dataTable var="assist" value="#{assistBean.lstAssist}"
             editable="true" editMode="cell">
  <p:columnGroup type="header">
    <!-- The "headers" properly said -->
    <p:row>
      <p:column rowspan="2" headerText="Name"/>
      <p:column colspan="#{someBean.colAmount}" rowspan="1" headerText="Date and assistance"/>
    </p:row>

    <!-- The editable dates -->
    <p:row>
      <p:column>
        <p:cellEditor>
          <f:facet name="output">
            <h:outputText value="#{assist.date}">
              <f:convertDateTime pattern="dd/MM"/>
            </h:outputText>
          </f:facet>
          <f:facet name="input">
            <p:inputMask value="#{assist.date}" style="width:96%" mask="99/99"/>
          </f:facet>
        </p:cellEditor>
      </p:column>
    </p:row>
  </p:columnGroup>

  <p:column>...
    ... The rest of the table
  </p:column>
</p:dataTable>

This doesn't work because every field in the <p:columnGroup type="header"> doesn't renders the <input>.

I also tried some other combinations but I can't mix the headers with the editable cells.

Any help or guide will be appreciated, I'm also open to other options. Thanks in advance

1
jsf-2primefacesdatatable
If I understand your question correctly, you cannot do what you want. Sorry. - Kukeltje
¿is there another option for that kind of functionality? Maybe another component or mix of components, I'm all ears. Thank you - Alvaro Pedraza

1 Answers

0
votes

I don't know if you still need a solution but you can do what you need puting this on the editable header (of course p:inplace is optional you can remove it, f:facet is what you need):

<p:column>
    <f:facet name="header">
        <p:inplace>
            <p:inputText value="#{bean.yourvalue}"/>
        </p:inplace>
    </f:facet>
</p:column>