X

Geertjan's Blog

  • August 5, 2006

How to Sort Columns in a TreeTableView

Geertjan Wielenga
Product Manager
TreeTableViews (TTVs) have properties that are very easy to set. Click here to see a handy table with settable properties. Mostly they're about ordering columns in tables. When you specify that a column is sortable, a small arrow icon appears (and the column header text turns bold) when you click on the column header. For example, here the "Title" column is sortable and I've clicked it to indicate that I want it sorted and, lo and behold, the items in the column are instantaneously sorted numerically/alphabetically:

There are two steps to make this possible. First, set which ever column you want to be sortable to "ComparableColumnTTV", with the initially sorted column as "SortingColumnTTV", as shown here:

Node[] nodes = categoryNode.getChildren().getNodes();
Node.Property[] props = nodes[0].getPropertySets()[0].getProperties();
//First property column is sortable, but also sorted initially, so
//initially this one will have the arrow icon:
props[0].setValue("ComparableColumnTTV", Boolean.TRUE); //NOI18N
props[0].setValue("SortingColumnTTV", Boolean.TRUE);
//Second property column is sortable, but not initially sorted,
//so initially will have no arrow icon:
props[1].setValue("ComparableColumnTTV", Boolean.TRUE); //NOI18N
//Third property column is sortable, but not initially sorted,
//so initially will have no arrow icon:
props[2].setValue("ComparableColumnTTV", Boolean.TRUE); //NOI18N

Next, make sure that you add the properties to the TTV (as well as, but that is unrelated to this point, the NodeTableModel):

view.setProperties(props);

So, to see everything in context, here's now my setRootNode() method, which is based on code from Tom Wheeler's Todo List Manager:

public void setRootNode(CategoryNode categoryNode) {
this.removeAll();
if (categoryNode != null) {
manager.setRootContext(categoryNode);
nodeTableModel = new NodeTableModel();
nodeTableModel.setNodes(categoryNode.getChildren().getNodes());
Node[] nodes = categoryNode.getChildren().getNodes();
Node.Property[] props = nodes[0].getPropertySets()[0].getProperties();//First property column is sortable, but also sorted initially, so
//initially this one will have the arrow icon:

props[0].setValue("ComparableColumnTTV", Boolean.TRUE); //NOI18N
props[0].setValue("SortingColumnTTV", Boolean.TRUE);//Second property column is sortable, but not initially sorted,
//so initially will have no arrow icon:

props[1].setValue("ComparableColumnTTV", Boolean.TRUE); //NOI18N//Third property column is sortable, but not initially sorted,
//so initially will have no arrow icon:

props[2].setValue("ComparableColumnTTV", Boolean.TRUE); //NOI18N//Create the node table model and the TTV:
nodeTableModel.setProperties(props);
view = new TreeTableView(nodeTableModel);
view.setPopupAllowed(true);//Important: Add the properties to the TTV:
view.setProperties(props);//Here we add the TTV to the topcomponent:
add(view, BorderLayout.CENTER);
} else {
add(new JLabel("Invalid Todo List Item Data"), BorderLayout.CENTER);
}
}

There are a few other properties that you can set on a TTV, but these ones shown here just serve as an example to show how it is done. If you do a bit of googling, you'll find other places where TTV ordering is done in this way, such as here.

Join the discussion

Comments ( 2 )
  • Bill Monday, September 11, 2006
    This is really cool. Is it possible to have an icon view that is sortable?
  • David Monday, December 21, 2009

    Geertjan, thanx for all the execellent tutorials I really liked the screencasts.

    One question regarding this NodeTableModel class: How do you add rows to your table? I can only see there exist a setNodes method but that requires me to set all rows in one go. If I have many rows say 100's it seems a bit expensive?

    Thank you

    David


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.