DataTable Enhancements

PrimeFaces 3.4 brings major refactor and enhancements on DataTable. We’ve been adding features with each release to datatable and at some point it became harder to maintain. For 3.4, we’ve taken our time to improve the internals and thanks to the new clear design, it was easy for us to add various popular requests from the community.

Refer to Datatable from Children

Long time PrimeFaces users would be familiar with this, datatable can’t be updated or processed from it’s children. Common case is deleting a row from table and updating it. This is due to a fact of a mojarra issue actually, myfaces works fine but we’ve overriden some behavior to make it independent from the implementation. So following wasn’t }working;

<p:dataTable id="table">
   ...
   <p:column>
      <p:commandButton value="Delete" update="table" />
   </p:column>
</p:dataTable>

Common workaround was adding an output panel as a wrapper and updating it instead. But it also requires access to naming containers.

<p:outputPanel id="wrapper">
 <p:dataTable id="table">
    ...
    <p:column>
       <p:commandButton value="Delete" update=":form:wrapper" />
    </p:column>
 </p:dataTable>
</p:outputPanel>

As of 3.4, first sample is supported so you don’t need a wrapper anymore. This is also backward compatible for sure.

Column to Process DataGrid-DataList Action
Core UIData, requires a column as a wrapper for it’s children, otherwise it doesn’t process the children and does not provide unique ids to content. This makes sense for dataTable for dataGrid-dataList, there are no columns in layout. So following wasn’t working;

<p:dataGrid or p:dataList var="item" value="#{bean.items}">
   <p:commandButton value="Select" actionListener="#{bean.select(item)}" />
</p:dataTable>

Workound was adding a column to process the button or input action;

<p:dataGrid or p:dataList var="item" value="#{bean.items}">
   <p:column>
       <p:commandButton value="Select" actionListener="#{bean.select(item)}" />
   </p:column>
</p:dataTable>

As of 3.4, first sample will work as data component will process children without requiring a column.

First Class p:columns Support
We’ve spent a lot of time on p:columns to fix it’s limitations;

  • Input and Action Source components are now supported.
  • Static and Dynamic columns can be used together in dragdrop reordering
  • LazyDataModel support for sorting and filtering with dynamic columns

Filtering Improvements

Performance of datatable has been improved by introducing filterValue option, we were keeping filtered data in view state before and tried not keeping it anywhere, just do filtering everytime, way before other features like row selection to restore state but realized these two solutions are not perfect. Filtering changes the model so it should be where your model is, the backing bean. FilterValue attribute is a reference to a list in your bean and datatable populates-clears it during filtering. To be backward compatible, fallback is to use viewstate but a log message is provided to migrate. Also filtering now has a short delay just like autocomplete to avoid many ajax requests to the server.

All this is just the visible part of the iceberg, there are tons of other things improved, all will be available next monday.

This entry was posted in PrimeFaces. Bookmark the permalink.

17 thoughts on “DataTable Enhancements

  1. This is great news! I think DataTable is one of the most used and complex components. 3.4 looks like a major release!

  2. Great, great news! I’m pretty sure almost everyone uses datatables, and these enhancements are great!

    Are we going to be able change the filter delay? That would be absolutely amazing.

  3. Sound very cool Çagatay..!!

    Please update us on multi column sorting also..! we are waiting for it. If this will not part of Primefaces 3.4 then let us know so that we can rearrage our priorities accordingly.

    Thanks.

  4. Awesome Prime Rock !!!
    “Column to Process DataGrid-DataList Action” applies to mobile as well?

  5. Great… Compliments… Maybe I’ll start looking into treetable/tabletree integration with datatable. I’ve seen a concept/aproach in openfaces that might make it fairly easy.

    Cudos

  6. Since a lot of web based enterprise applications rely on tables, improvements like these make PF really cool. Plugin a new jar and your app suddenly runs better, how cool is that!

  7. I tried your primefaces 3.3.1 dataTable in liferay portlet
    It has no of problems there.

    1. dataTable is not covering the width and height with 100% and not resizing within liferay portlet and its fixed and not working like in your sample.

    2. If I resize the dataTable column in liferay portlet then that column goes out on the right side out of the dataTable border.

    Is that fixed in primefaces 3.4

  8. Great News From PF Team!!!

    Major improvements over frequently used component(data table) in the enterprise web application is really a good news. Is there any plan to update data table children from other data table component(filter….) or some other components just like updating table from it’s children.

    I want to update summary row of data table by filtering,updating from other components…At present, output panel created separately from out of the data table for summary row.

  9. Thats really good news, Primefaces rocks.
    BTW I added some comment to issue 3634 after it got closed. Don’t know if this was the right way to do so.
    Anyway, I’d be happy if this could get into the code before 3.4 gets released.

  10. First of all compliments for your great job!!

    I’m trying the filter option, but there’s something I wrong.
    In this simple table, I type the ID to search but nothing happened to table: I see always the complete data.
    Where I go wrong ?

    Thanks

  11. Please, fix the issue when a panelGrid is contained in datatable. borders are drawn even though you try to force them at 0…