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 19 more by this user. Created: 12/14/11
Last CDN Push: 03/23/12
Build Tag: gallery-2012.03.23-18-00
Project: YUI 3
License: YUI BSD
YUI Version: 3.5.0
Free for use.
This module is no longer supported since 3.5.0 has been released.
For ongoing development preview of DataTable features, look at gallery-datatable-dev-preview.
This module does not include a skin. Until 3.5.0 GA, you can static <link> to http://lsmith.github.com/yui3-gallery/build/gallery-datatable-350-preview/assets/skins/sam/gallery-datatable-350-preview.css.
Renders a table with nested headers. Data is from a local array. One column is generated entirely from a formatter, another uses a nodeFormatter to gain access to the cell's Node instance (avoid this for better performance).
Other configurations are included, commented out.
If you're using this against 3.5.0pr1...
the patch for Plugin.DataTableDataSource is at https://gist.github.com/1599086 and
the patch for scrollability is at https://gist.github.com/1650683
<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js"></script>
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2012.03.23-18-00'
}).use('gallery-datatable-350-preview', 'datatable-datasource', 'datatable-jsonschema', function(Y) {
var columns = [
{
label: 'Employment', // columns with nested headers should NOT have a key
children: [ // use children to indicate nested headers
'start', // string column names are acceptable
{
key: 'termination',
label: 'end',
emptyCellValue: '(none)' // If o.value or the return value of the formatter is undefined or '', use this
}
]
},
{
label: 'Name',
formatter: function (o) {
// Available keys are o.record, o.rowindex, o.column, o.value, o.data, and o.classnames
// return or update o.value cell content (HTML)
return o.data.lastName + ', ' + o.data.firstName;
},
width: '250px' // set a column min-width
},
{
key: 'manager',
nodeFormatter: function (o) {
// Available keys for nodeFormatters are o.record, o.rowindex, o.column, o.data, o.value, o.td, o.cell
// o.cell will be the <div> liner or the <td> if there is no liner (use o.cell for content)
o.td.setAttribute('data-manager', o.value);
// cell content must be added through the Node interface. o.value and the return value are NOT used
// to populate the cell automatically.
o.cell.set('text', o.value);
// Return false to clear the Node from the Node cache for better memory management
return false
}
}
];
var data = [
{ firstName: 'Sally', lastName: 'DeSilva', start: new Date(2001, 1, 5), manager: 'Vivek Aboula' },
{ firstName: 'Arun', lastName: 'Shankar', start: new Date(1976, 5, 15), termination: new Date(2001, 7, 31), manager: 'Yeung Feng Chou' },
{ firstName: 'Rocket', lastName: 'Chicken', start: new Date(2012, 11, 21), manager: 'Roland Emmerich' }
];
// notice the class is Y.DataTable, NOT Y.DataTable.Base
var table = new Y.DataTable({
columns: columns,
data: data,
sortable: true
//height: '450px'
//scrollable: true (since height is declared, makes the table scrollable IFF the amount of data needs it)
});
table.render('#to-here');
// Also see addRows, removeRow, etc in DataTable.Mutable
//table.addRow({ firstName: 'Jo', lastName: 'Ebi', start: new Date(2010, 11, 15), manager: 'Vivek Aboula' });
// From DataTable.ColumnWidths
//table.setColumnWidth('manager', '350px');
// Remote Data load with patched Plugin.DataTableDataSource (see desc for patch)
table.plug(Y.PluginDataTableDataSource, {
datatasource: new Y.DataSource.IO({
source: 'some.remote-data.com/api?fetchy-fetchy'
}).plug(Y.Plugin.DataSourceJSONSchema, {
schema: {
resultListLocator: 'results',
resultFields: [{ key: 'firstName' }, { key: 'lastName' }, { key: 'start' }, { key: 'termination' }, { key: 'manager' }]
}
})
});
table.load();
});
Subject | Author | Date |
---|---|---|
Performance timings for 3.5.0 versus prior versions | Todd Smith | 01/5/12 |
Re: Performance timings for 3.5.0 versus prior versions | Thomas Methus | 09/19/12 |
All code on this site is licensed under the BSD License unless stated otherwise.