Datatable edited row headertext disappears when responsive

Post Reply
Posts: 2
Joined: 18 May 2017, 21:44

22 Jul 2020, 21:55

When a datatable is editable and a row is put in edit mode and then exits edit mode the titles for that row disappear. The titles remain on the full size datatable but no longer exist when the table is in reflow (responsive) layout. It does not matter if the row was toggled in and out of edit mode when it was full size or responsive. The only way to bring the title back is to reload the page.

The html code that disappears is the following:

Code: Select all

<span class="ui-column-title">Year</span>
To reproduce this I used the project demo that came with Sapphire. Some minor changes to data.xhtml where made using the showcase code to make the first table editable.
  • Added

    Code: Select all

    editable="true" editMode="row"
    to the 'List of Cars' datatable.
  • Added the editor column like in the showcase

    Code: Select all

    <p:column style="width:35px"><p:rowEditor /> </p:column>

Posts: 4075
Joined: 29 Jun 2013, 12:38

30 Jul 2020, 14:35

Editable DataTable doesn't support the responsive feature. Please try the following css;

Code: Select all

@media (max-width: 640px) {
   .ui-datatable-reflow .ui-datatable-data tr.ui-row-editing td.ui-editable-column, 
   .ui-datatable-reflow .ui-datatable-data td.ui-cell-editing {
      padding: 0.714em 0.857em;
      display: flex;
Best Regards,

Post Reply

Return to “Sapphire - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest