JDeveloper 11g – Dynamic (and I mean really dynamic) Tables with ADF Faces Rich Components

You may have seen (blurry pictures of) screenshots of the dynamic table component for ADFFaces that Oracle started promising us some 11 months ago. It would have all these cool features that rich AJAX style data grids tend to have:

• Stretchable columns
• Reorderable columns (drag & drop column to a new location in the table)
• Filter column by a simple filter condition
• Stepless Data Scroller (automatic data fetch as the user scrolls through the table)
• And of course the features we had gotten used to such as sort ascending/descending and pagination

And all happens with Partial Page Refresh – only the contents of the table, or perhaps the layout of the table but nothing beyond that is refreshed, as to provide the user with a very smooth experience. It makes the table or data grid look a little more like Excel – and isn’t that what all users want to have?
Well, it turns out it was all true. In the JDeveloper 11g Technical Preview we can try it out for ourselves.  
 

And the best part of it: it is dead easy to use. Basically a simple drag and drop used to give you the ‘old’ ADF Faces table, now gives you the new one – with all these features enabled. If you want them.

Note: the column ordering is more advanced than it used to be; now you can select whether to order ascending or descending directly, instead of first ordering (getting ascending) and then ordering that column again (to get descending).
 
Also note that the pagination – step through the records, showing a page full at a time (showing 10-19/29281) – is no longer required. The table has stepless data scroller capabilities that will fetch additional records when the client requires them. This means that the user can scroll through a table as if all records were loaded upfront while in fact they are loaded as needed.
 
Creating a filthy rich table is a matter of dragging & dropping either a collection from a data control as table or the table component itself. Let’s create a table for the EmpView collection in my HRM Data Control:

I create a new JSF page, accepting all defaults.
Next I drag the EmpView Collection to the page, dropping it as an ADF Table:
 
I set Filtering (new) and Sorting to true and remove a few columns.

 
The table is displayed in the WYSIWYG editor.
 
I can do some additional configuration, such as setting the width (which in my installation seems to default in the browser to a little under 300 px).
Also note there is quite a bit of Behavior we can set. For example to enable or disable column stretching, to set the fetchsize for the data scroller and to disable column reordering. Also note how dragging the ADF collection took care of setting the FilterModel and QueryListener. Especially the last one, used with the Filter option that allows us to filter the data in the table by setting conditions on columns, is pretty powerful.

 
Let’s run the page – in about 40 seconds of development and deployment time, we have this:

 
We can reposition columns, resize columns, scroll through the data, re-order the data and filter the data by applying column filters.
Here you see me dragging the Dname column to the second spot in the table:

 
Some stretching and filtering later:

 
Also notice the new Date Selector: no longer a full blown popup window, but an elegant inline div: