Over a million developers have joined DZone.
Platinum Partner

Creating Fixed-Column Tables in Pivot

· Java Zone

The Java Zone is brought to you in partnership with AppDynamics. Discover how AppDynamics steps in to upgrade your performance game and prevent your enterprise from these top 10 Java performance problems.

I came across this Flex demo the other day that demonstrates the use of fixed columns in a Flex data grid:

I wanted to see how this might work in Pivot. Here's what I came up with:

This is the WTKX source I used to create the table. One TableView and TableViewHeader set is placed in the scroll pane's row header and corner to create the fixed column, and another set is placed in the view and column header to create the scrollable columns. The same data is used to drive both tables:

<Border styles="{padding:0, borderColor:'#cccac2'}"
xmlns:wtkx="http://pivot.dev.java.net/wtkx/2008" xmlns="pivot.wtk">
<ScrollPane horizontalScrollBarPolicy="fillToCapacity">
<TableView wtkx:id="primaryTableView" selectMode="single"
styles="{selectionColor:'#ffffff', inactiveSelectionColor:'#ffffff',
selectionBackgroundColor:'#14538B', inactiveSelectionBackgroundColor:'#14538B',
<TableView.Column name="colA" headerData="Column A"/>
<TableView.Column name="colB" headerData="Column B"/>
<TableView.Column name="colC" headerData="Column C"/>
<tableData wtkx:id="tableData">
<row name="User 1" colA="1.A" colB="1.B" colC="1.C" />
<row name="User 2" colA="2.A" colB="2.B" colC="2.C" />
<row name="User 3" colA="3.A" colB="3.B" colC="3.C" />
<row name="User 4" colA="4.A" colB="4.B" colC="4.C" />
<row name="User 5" colA="5.A" colB="5.B" colC="5.C" />
<row name="User 6" colA="6.A" colB="6.B" colC="6.C" />
<row name="User 7" colA="7.A" colB="7.B" colC="7.C" />
<row name="User 8" colA="8.A" colB="8.B" colC="8.C" />
<TableViewHeader wtkx:id="primaryTableViewHeader" tableView="$primaryTableView"/>
<TableView wtkx:id="fixedTableView" tableData="$tableData" selectMode="single"
styles="{selectionColor:'#ffffff', inactiveSelectionColor:'#ffffff',
selectionBackgroundColor:'#14538B', inactiveSelectionBackgroundColor:'#14538B',
showHighlight:false, includeTrailingVerticalGridLine:true}">
<TableView.Column name="name" headerData="Name"/>
<TableViewHeader wtkx:id="fixedTableViewHeader" tableView="$fixedTableView"

The Pivot version does require a little more code than the Flex version, primarily to keep the selection state of the two tables in sync - the Java source for the demo is here. The gradients used to create the look and feel of the Flex version also look a little nicer. However, scrolling and column resizing in the Pivot table is much smoother. Additionally, the Pivot version addresses some issues raised by readers of the original article:

"Is there a way to not have the scrollbar under the first column so the scrollbar component does not span the whole datagrid but just the columns that can scroll? This would be better for the user."

"Is there a way to remove that black vertical grid line. Tried a number of ways, sounds impossible."

So, it wasn't especially tough to implement, and it compares pretty favorably overall to the Flex version.

From http://weblogs.java.net/blog/gkbrown

The Java Zone is brought to you in partnership with AppDynamics. AppDynamics helps you gain the fundamentals behind application performance, and implement best practices so you can proactively analyze and act on performance problems as they arise, and more specifically with your Java applications. Start a Free Trial.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}