Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

gallery-user-patch-2530294 (gallery-user-patch-2530294)

Last Updated: 07/6/11

+ 0 -

Eamon Brosnan

YUI Contributor

See 6 more by this user.

Created: 07/6/11
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.

Combining DataTableSort and DataTableScroll can cause a column width mismatch
because sort only recognises one part of the scrollable table. (the header table)

This is fixed by adding a CSS rule to match the data section with the header section padding rule
of 4 20 4 10px.

_syncWidths also needs to be patched because it does not take into account padding when computing
the difference between column widths.

Additionally, sorting records causes the DataTable to re-render the body section, causing specific
td adjustments to be lost (and automatic layout takes over),
so we need to re-run _syncWidths after those items have been rendered.

For the patch to work you need both the patched _syncWidths and the stylesheet rule, otherwise the column widths will still appear mismatched. Both the code and the stylesheet are included with the source.

Tags:
eamonb

Download
Docs
Homepage
Bugs
Source
Example
Forum
History

You don't need to change any of your code, just include the module in your YUI().use statement.

Code Sample

YUI().use('gallery-user-patch-2530294', function(Y) {
 
var mockresponse = {
    response: {
        results: [
            { "id" : "1", "name" : "Joe" },
            { "id" : "2", "name" : "Andrew" }
        ]
    }
};
 
var dt = new Y.DataTable.Base({
    columnset : [ 
        { key:"id", sortable: true }, 
        { key:"name", sortable: true }
    ],
    summary : "User patched DataTable Instance",
    recordset : mockresponse.response.results
});
 
dt.render('#example');
 
});