Gallery

<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();
});