Tree(Data)table: Where do you start? Tree or Datatable

Edit: online demo added. See link near the end

Up to now, there was no real need for me to use a treetable in my apps. Therefore there has been little interest from me in the PrimeFaces treetable that provides this functionality. So when the need arose, I had a look and it honestly provided way to little functionality for what I need: The treetable is much closer to a tree than the datatable. The fact that more people would like to have a treetable that more closly resembles a datatable is reflected by the issues reported…

	ID ▼	Stars ▼	Type ▼	Status ▼	Priority ▼	Target ▼	Summary + Labels ▼
	1288	23	NewFeature	Accepted	Medium	FUTURE	DataExporter to export TreeTable
	2055	32	NewFeature	Accepted	Medium	FUTURE	support p:treeTable with dynamic p:columns
	3786	8	NewFeature	Accepted	Medium	FUTURE	TreeTable resizable columns
	3929	17	NewFeature	Review	Medium	FUTURE	Tree doesn’t handle editable (and command?) components inside nodes (except root)
	4416	3	NewFeature	Review	Medium	FUTURE	Emptymessage attribute for treeTable component
	4604	4	NewFeature	Review	Medium	FUTURE	New Feature: Conditional Coloring on TreeTable (rowStyleClass attribute)
	4889	2	NewFeature	Review	Medium	FUTURE	[New Feature] Double Click Selection on TreeTable

Personally, I even have some more requests: sorting, paging, filtering, so the list will become quite extensive if I would report them all.

When you have look at the usage of both components, you already see a big difference. The most common and flexible use of a datatable is in combination with a LazyDataTableModel. This kind of usage of a model is quite different than the TreeNode construction that is required in the treetable (and tree). Then it struck me, if you take a look from the other side, I would have to report only one feature request:

Have the datatable support tree like functionality

Unfortunataly, I needed it kind of quickly, so reporting it and waiting for it to be implemented is… well…  not realy an option and since the use is for a personal project, so going PrimeFaces PRO isn’t realy an option either. Fortunately, the source is open, so I had a look if it could explain the huge difference between a treetable and a datatable. The ‘outside’ usage is ofcourse a reflection of how the components internally work and the treetable is in that way very close to the tree. Luckily we are in the ‘holiday season’ so there was some free time available to start investigating how PrimeFaces components currently are created, work etc… And the be honest, the internals are clearly written, very logical and easy to understand (if you know some basics about jsf components, ajax, events, jquery etc). Since I already made a patch once (against a previous version without the new WidgetBuilder) to give the scrollable datatable an auto height (#3608) So it was then that I decided to try to implement the tree functionality myself…

And after some interesting hours, I was pleased to see it working… I call the result ‘TreeDataTable’. It shares about 98% of the current datatable (maybe more). In fact, it is backwards compatible!!!

Autoheight and tree functionality

This is the treeDataTable in a full page layout where the header is in the ‘north’ layout-section and the treeDataTable occupies 100% of the width AND height of the center section. You can even see the ‘background’ of the datatable filled with empty non-selectable rows if the number of records is lower than the avaliable visible row space. And yes there still needs to be some work done on the odd-even row coloring when collapsing rows (fully expanded it is ok). (fixed, just not updated the image)

And here you see the tree functionality at work and a scrollbar appearing AND the colum headers fitting perfectly.

Expanded some rows, so scrollbar appears…

Expanding is currently done client-side, has no event and the implementation still requires to have the full tree for this page available. But this is not different than with the current TreeTable and  for me this is sufficient.

The empty message works to…

An empty message after severside filtering

Showing it is not ‘optimal’ imo and I probably want to display it in the middle of the datatable as an overlay, but that would mean using less of the existing datatable, but maybe some jquery might come to the rescue here.

Filtering works in the way it is done in the current datatable.

Filtering at the ‘top level’

In this example you only see that only top level records that match the filter are shown, but if you want this to be different, just implement it differently in your load method in the TreeTableDataModel (This extends the LazyDataTableModel with one method to get to the children of a node). You could e.g. choose to show matched records and it’s children, or even go ‘up the tree’ to find the ancestor of a matched record that is a top level record. It is totally up to you.

Ofcourse sorting works as well (even multi sorting)

Sorting

In addition to all of the above, it also does (personally tested)

• Draggable columns
• Resizable columns
• Dynamic columns
• Conditional coloring
• Row editing
• Single/multiple selection (row and/or checkbox/radiobutton based)
• Headers, footers
• Context Menu

What is not tested yet (simply because I do not need it) is:

• Grouping
• SubTable
• Summary Row
• Expandable Rows
• Cell Editing
• Lazy Loading

So where can you get this? Well, nowhere yet. It still needs some tuning and testing and making it into a jar that can be used in a JSF application etc… That will probably happen in the first week of next year, so stay tuned (Yes Mr DJ, you’ll get an ‘internal’ release

But an online demo is available…

And believe me, I have next to no knowledge about all the phases in JSF. So even then it is doable for someone with basic java, html, css and some jquery knowledge (most of which I learned doing this and found things on google) to enhance a fairly complex component.