Skip to main content

Creating Fixed-Column Tables in Pivot

Posted by gkbrown on August 27, 2008 at 7:10 AM PDT

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.

Comments

Ooops :P will do. Sorry about that Greg!

Hi Simon, Thanks for the advice, but I wasn't actually asking that question myself - that was a quote from a comment on the original article (http://blog.flexexamples.com/2007/08/15/locking-columns-in-a-horizontall...). You may want to post your suggestion there. Greg

Hi Greg, RE: "Is there a way to remove that black vertical grid line. Tried a number of ways, sounds impossible." Create a class as below: package { import mx.skins.halo.DataGridHeaderSeparator; public class DataGridHeaderSeparator extends mx.skins.halo.DataGridHeaderSeparator { override public function get measuredWidth():Number { return 0; } override public function setActualSize(newWidth:Number, newHeight:Number):void { graphics.clear(); } } } Then in your DataGrid params use: verticalLockedSeparatorSkin="DataGridHeaderSeparator" That should do the trick :) Cheers, Simon newtriks dot com