Platinum Partner
java,frameworks,client-side,flex & air

Creating Fixed-Column Tables in Pivot

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">
<view>
<TableView wtkx:id="primaryTableView" selectMode="single"
styles="{selectionColor:'#ffffff', inactiveSelectionColor:'#ffffff',
selectionBackgroundColor:'#14538B', inactiveSelectionBackgroundColor:'#14538B',
showHighlight:false}">
<columns>
<TableView.Column name="colA" headerData="Column A"/>
<TableView.Column name="colB" headerData="Column B"/>
<TableView.Column name="colC" headerData="Column C"/>
</columns>
<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" />
</tableData>
</TableView>
</view>
<columnHeader>
<TableViewHeader wtkx:id="primaryTableViewHeader" tableView="$primaryTableView"/>
</columnHeader>
<rowHeader>
<TableView wtkx:id="fixedTableView" tableData="$tableData" selectMode="single"
styles="{selectionColor:'#ffffff', inactiveSelectionColor:'#ffffff',
selectionBackgroundColor:'#14538B', inactiveSelectionBackgroundColor:'#14538B',
showHighlight:false, includeTrailingVerticalGridLine:true}">
<columns>
<TableView.Column name="name" headerData="Name"/>
</columns>
</TableView>
</rowHeader>
<corner>
<TableViewHeader wtkx:id="fixedTableViewHeader" tableView="$fixedTableView"
styles="{includeTrailingVerticalGridLine:true}"/>
</corner>
</ScrollPane>
</Border>

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

{{ tag }}, {{tag}},

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

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}