r52088: initial commit: moved as much as possible of the styling required for the pinned columns functionality to dynamic stylesheets, instead of adding styling directly to the style attribute of each cell

To test this and to see that the pinned styling survives row-level updates, you can modify the pinned columns demo in the showcase dataTablePinning.xhtml and add a checkbox outside the table, like this:

                <ace:checkboxButton id="checkBox" value="#{checkboxButton.selected}">
                    <ace:ajax />
                </ace:checkboxButton>

And then add #{checkboxButton.selected} by itself inside a column (not as the value of a component or inside another component, just as it is). Then try pinning and unpinning this column on the browser while checking and unchecking the checkbox to cause row-level updates.

r52089: fix for alignment issues when pinning the same column again

r52096: fix for restoring pinned columns to their original position when unpinned, by having a separate dynamic stylesheet that only handles the table's left margin

When working on this issue and other column pinning issues, I found out that the column pinning feature has never worked before in conjunction with other data table features, like with row selection and when using the 'binding' attribute on the <ace:dataTable component, not to mention other cases that we already knew about like when using multiple row column headers and with row expansion.

Also, column pinning doesn't work either if the table is not scrollable. The wiki doesn't say anything about this, but some CSS classes related to the scrollable table functionality are used in the column pinning code, which implies that column pinning has to be used with the scrollable table functionality. All of our column pinning demos and test pages use the scrollable table functionality as well.

r52119: added clarification in TLD documentation that column pinning requires the scrollable table functionality to work.

Added note to the wiki page as well.

r52122: modified code to avoid using the 'pinned' CSS class for a cleaner approach that preserves pinned columns styling after row-level updates

r52124: fix to make row selection work with column pinning

r52129: cleaned up code, removed temporary comments and commented out code

Summary of features that work and don't work in conjunction with column pinning.

Working

• selection
• sorting
• filtering (the whole table is slightly shifted to the right after filtering a pinned column, no more shifting on subsequent filtering actions)
• panel expansion
• row expansion
• row listener

Not Working

• paginator (misalignments after paginating when at least one column is pinned, it seems like applying resizeScrolling() afterwards fixes them)
• column reordering (misalignments when reordering a column when at least one column is pinned)
• column resizing (column resizing functionality not possible at all on scrollable tables, not directly related to column pinning)
• grouping, column group (as expected)
• live scrolling (misalignments occur after the first live scrollling dynamic update)
• cell editor (pinned columns are moved to the left edge of the page when activating the cell editor)

• table config panel (changes to table structure or table order won't work, but sorting and name changes will work)

r48601: added another advanced test for column pinning to test various features working in conjunction

The test page is http://localhost:8080/dataTable/views/columnPinningAdvanced2.jsf

The test shows how column pinning works with sorting, filtering and selection. It also shows how the pinning order is saved after reloading the page, and it shows how the pinning styling and structure is preserved after dynamically updating all the rows (i.e. all <tr> elements and their children).

Re-opened.

1. I can't find any Wiki docs that mention pinning. We should be documenting what works and what doesn't with it.
2. Should we consider adding the advanced test functionality to the pinning demo (filtering, sorting, etc.)?

A few issues:

• It would be better if the pinning icon as always on it's own row, below the column headings to ensure a consistent layout/presentation.
• On my mac at least, if you scroll the showcase demo table all the way to the right the columns mis-align. See pinTableIssue.png attached.

r52456: fix to always render pinning controls below the column name; fix to invoke resizeScrolling() when pinning and when unpinning a column, in order to keep columns aligned

Added information to the DataTable wiki page regarding the features that work and don't work with column pinning.

As for including sorting and filtering in the demo, while all those features can work in conjunction, there's still, unfortunately, an issue with the whole table slightly shifting to the right on a first filtering request per column and on a first sorting request per column, when such column is pinned.