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.

Simple Datatable (gallery-simple-datatable) on cdn

Last Updated: 10/16/12

+ 3 -

Anthony Pipkin

YUI Developer

See 28 more by this user.

Created: 06/29/10
Last CDN Push: 03/11/11
Build Tag: gallery-2011.03.11-23-49
Project: YUI 3
License: YUI BSD
YUI Version: 3.7.3
Free for use.

 

 Moving to 'gallery-xarno-datatable' and Y.Xarno.Datatable

Version 1.5.0
A very simple implementation of a datatable. Does not provide the ability to sort columns and select rows or any other advanced features. These are attached to the datatable as plugins.

Prefixing a data key with __ (two underscores) will add that to the row as an attribute and will be by passed from adding to the grid. For example __fileId:9 will create <tr fileId="9">. If you would like the file ID to also be added to the grid, that will require fileId:9 and __fileId:9.

Also, any data passed where the key doesn't exist in the header will also be by passed. This occurs after the attribute addition so you do not need to include __fileId in the headers object.

Method

syncUI() - Use when updating rows and header data to rebuild the table
setHeaders(headerObj) - Loops through the header object and builds cells
setRows(arrayOfRows) - Loops through rows array and builds rows
clearHeaders(purge = false) - Removes all header content from table. @param purge Removes all header data from widget when set to true
clearRows(purge = false) - Removes all rows from table. @param purge Removes all row data from widget when set to true

Configuration

headers - Object of headers to be displayed. {key:'Display'} pattern. Key is used to match values to be displayed for row data
row - Array of objects with a similar pattern to the headers with one exception, keys prefixed with __ (two underscores) are used as row (<tr>) attributes and not used as row cell data.
linerTemplate - Template for the content of the cell. This gives the ability for advanced skinning.

In this sample we create a two column grid with headers Id and Title.

The first row (Banana) has a custom attribute added called fileId and contains the value of 9.

Code Sample

<script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.03.11-23-49'
}).use('gallery-simple-datatable', function(Y) {
 
    var grid = new Y.SimpleDatatable({caption: 'Basket of Fruit'});
    grid.set('headers',{id:'Id', title:'Title'});
    grid.set('rows',[
        {id:1,title:'Banana',__fileId:9}, 
        {id:2,title:'Orange'},
        {id:3,title:'Cherry'},
        {id:4,title:'Grape Fruit'},
        {id:5,title:'Watermelon'}
    ])
    grid.render();
 
});

Forum Posts

Subject	Author	Date
Trying to experiment with this and can't get it to work	Huey Brantley	07/13/10
Re: Trying to experiment with this and can't get it to work	Huey Brantley	07/14/10
Example's style sheet missing	Huey Brantley	07/14/10
Modified Variant of simple-datatable	Huey Brantley	07/16/10
Re: Modified Variant of simple-datatable	Anthony Pipkin	07/16/10
Re: Modified Variant of simple-datatable	Huey Brantley	07/16/10
Re: Modified Variant of simple-datatable	Anthony Pipkin	07/16/10
Purpose of _defSelectedFn method?	Huey Brantley	07/23/10
Re: Purpose of _defSelectedFn method?	Anthony Pipkin	07/25/10
Version 1.2.0	Anthony Pipkin	08/11/10