The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
See 4 more by this user. Created: 12/28/12
Last CDN Push: 02/27/13
Build Tag: gallery-2013.02.27-21-03
Project: YUI 3
License: YUI BSD
YUI Version: 3.9.0pr3
Free for use.
Plugin for DataTable that has the following purpose:
1) Makes columns resizable. Also works with scrollable DataTables.
2) Gives predictable column-widths: pixels and percentage colwidths will always retain.
3) Fixes all (hope so) UI-bugs when scrollable and/or sortable datatable are used.
4) Adds some extra methods, like datatable.itsadtcr.setColumnWidth() that work with scrollable datatables.
5) Inconsistencies between colwidths and datatable-widths are managed. When columns have width that goes beyond the datatablewidth: a x-scroller appears. When datatable has a width that cannot be reached by the colwidths: only cols with undefined width are expanded. When none are available, the last col is expanded.
6) Works (should) with all A-graded browsers.
7) No DOM-manipulation of the th-elements to show the columnresizehandlers (other than css)
The plugin can be pluged in straight ahead. No need to wait for the datatable to be rendered.
Notes:
CAUTION: 'datatable-scroll' has to be defined in your use() statement as well (see example), BEFORE the datatable gets rendered for the first time. Even if you don't use scrollbars at first glance. This plugin needs it and rendering scrollbars fails when 'datatable-scroll' is loaded afterwards.
Known issues:
With the plugin you gain predictable colwidths straight ahead.
If you want to make the columns resizable, than you just define the datatable-attribute 'colsresizable' like:
myDatatable.set('colsresizable', true);
This can be done at initialisation of the datatable, before Y.Plugin.ITSADTColumnResize is plugged in, or later on. The attribute 'colsresizable' can have three states:
true --> all columns are resizable
false --> colresizing is disabled
null/undefined --> colresizing is active where only columns(objects) that have the property 'resizable' will be resizable
<script src="http://yui.yahooapis.com/3.9.0pr3/build/yui/yui-min.js"></script>
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2013.02.27-21-03'
}).use('datatable', 'datatable-scroll', 'gallery-itsadtcolumnresize', function(Y) {
var table = new Y.DataTable({
columns: columns,
data: data,
width: '80%',
colsresizable: true
}).render('#dt');
table.plug(Y.Plugin.ITSADTColumnResize);
});
//==========================================================
// or when you just want specific columns resizable:
//==========================================================
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2013.02.27-21-03'
}).use('datatable', 'datatable-scroll', 'gallery-itsadtcolumnresize', function(Y) {
var columns = [
{key: 'col1', width: '50px'},
{key: 'col2', width: '75%', resizable: true},
{key: 'col3', width: '200px', resizable: true}
];
var table = new Y.DataTable({
columns: columns,
data: data,
width: '80%',
}).render('#dt');
table.plug(Y.Plugin.ITSADTColumnResize);
});
All code on this site is licensed under the BSD License unless stated otherwise.