Fork me on GitHub

Example: Basic datatable creation

How to create a datatable.

Add modify and delete functionalities

inputEx DataTable plug in controller :

HTML

<div id="field-container"></div>

JavaScript

Implementation

YUI().use('datatype','inputex-datatable','inputex-uneditable','inputex-datepicker','inputex-integer','inputex-number','inputex-select', 'inputex-color', function(Y) { 


    // normal YUI config for DataTable
    var cols = [
        { key: "id", sortable: true },
        { key: "date", sortable: true, formatter: function(o){ return Y.DataType.Date.format(o.data.date,{format: "%m/%d/%Y"});} },
        { key: "quantity", sortable: true },
        { key: "price", sortable: true },
        { key: "title", sortable: true },
        { key: "category", sortable: true },
        { key: "color", sortable: false, allowHTML : true, formatter : '<div style="width:15px;height:15px;background-color:{value};"></div>'}
    ];

    var data = [
        {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, price:4, title:"A Book About Nothing", category: "SF", color: '#ffff00'},
        {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, price:12.12345, title:"The Meaning of Life", category: "Novel", color: '#ffff00'},
        {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, price:1.25, title:"This Book Was Meant to Be Read Aloud", category: "SF", color: '#ffff00'},
        {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, price:3.5, title:"Read Me Twice", category: "Philosophy", color: '#ffff00'}
    ];

    // inputEx config
    var inputExConfig = {
        type: "group",
        fields: [
            {type: 'uneditable', label: 'Id', name: 'id' },
            {type: 'datepicker', label: 'Date', name: 'date' },
            {type: 'integer', label: 'Quantity', name: 'quantity' },
            {type: 'number', label: 'Amount', name: 'price'},
            {type: 'string', label: 'Title', name: 'title', required: true, showMsg: true },
            {type: 'select', label: 'Category', name: 'category', choices: ['SF','Novel','Philosophy'] },
            {type: 'color', label: 'Color', name: 'color' }
        ]
    }


    var table = new Y.DataTable({
        columns: cols,
        data: data
    });
    table.render("#container2");

    var pluginConfig = {
        inputEx : inputExConfig,
        inplaceedit: true,
        deleteMethod: function(record, cb) {
            if (window.console) { console.log("delete", record.getAttrs()); }
            setTimeout(function() {
                cb(true);
            }, 800);
        },
        updateMethod: function(id, newValues, cb) {
            if (window.console) { console.log("updateMethod", id, newValues); }
            setTimeout(function() {
                cb(true);
            }, 800);
            
        }
    };
    table.plug(Y.inputEx.Plugin.InputExDataTable, pluginConfig);




    // plugin control - useless - here only for the demo

    var plugButton = Y.Node.create("<button>plug</button>");
    Y.one("#container3").append(plugButton);
    plugButton.on("click",function(e){
      table.plug(Y.inputEx.Plugin.InputExDataTable,pluginConfig);
      plugButton.hide();
      unplugButton.show();
    });


    var unplugButton = Y.Node.create("<button>unplug</button>");
    Y.one("#container3").append(unplugButton);
    unplugButton.on("click",function(e){
      table.unplug(Y.inputEx.Plugin.InputExDataTable);
      unplugButton.hide();
      plugButton.show();
    });
    plugButton.hide();
    

});