YUI Library Examples: DataTable Control (beta): Adding and Deleting Rows

Sample Code for this Example

Data:

CSS:

Markup:

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.DynamicData = new function() {
        var data = {one:"one",two:"two",three:"three"};
        
        var myColumnDefs = [
            {key:"row",resizeable:true,sortable:true},
            {key:"one",resizeable:true},
            {key:"two",resizeable:true},
            {key:"three",resizeable:true}   
        ];

this.myDataSource = new YAHOO.util.DataSource([]);
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        this.myDataSource.responseSchema = {
            fields: ["one","two","three"]
        };

this.myDataTable = new YAHOO.widget.DataTable("basic",
                myColumnDefs, this.myDataSource, {});
                
        var i=1;
        
        YAHOO.util.Event.addListener("addrow","click",function() {
            var record = YAHOO.widget.DataTable._cloneObject(data);
            record.row = i++;
            this.myDataTable.addRow(record);
        },this,true);

YAHOO.util.Event.addListener("deleterow","click",function() {
            if(this.myDataTable.getRecordSet().getLength() > 0) {
                this.myDataTable.deleteRow(0);
            }
        },this,true);
        
 
        YAHOO.util.Event.addListener("addrows","click",function(e) {
            var myArray = [];
            for(var l=i;i<=l+19;i++) {
                var record = YAHOO.widget.DataTable._cloneObject(data);
                record.row = i;
                myArray.push(record);
            }
            this.myDataTable.addRows(myArray); 
        },this,true);

YAHOO.util.Event.addListener("deleterows","click",function() {
            var length = this.myDataTable.getRecordSet().getLength();
            if(length > 0) {
                var count = (length > 19) ? 20 : length;
                this.myDataTable.deleteRows(0,count);
            }
        },this,true);

new YAHOO.widget.Button("addrow");
        new YAHOO.widget.Button("addrows");
        new YAHOO.widget.Button("deleterow");
        new YAHOO.widget.Button("deleterows");
    };
});

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

YUI Library Examples: DataTable Control (beta): Adding and Deleting Rows

Sample Code for this Example

YUI Logger Output:

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: