How to render a simple data table using yui 3

In this tutorial I am gonna show you how to display a basic data table using yui 3.


1. Create a html file with basic information like just html tags
   

   

2. Insert the following line in between the header tags. This will point us to the YUI-3 CDN

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

3. Now, we need to define any div tag or the just whole body with the yui3 skin class and another div tag to     hold the example datatable
 

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

   
        // Complete html content goes between these two tags
   

 
 

4. Now use YUI datatable widget with the method .use() , like below in between the script tags
       

5. Defining datasources and rendering table

  
     YUI().use("datatable", function (Y) {

    // Define datasource in key value pairs
    var dataSource = [
                                { id: "ga_3475", name: "gadget",   price: "$6.99" },
                                {id: "sp_9980", name: "sprocket", price: "$3.75" },
                                { id: "wi_0650", name: "widget",   price: "$4.25" }
                               ];
  
    // create a new instance for datatable
    var dataTable= new Y.DataTable({

        // Table header names can be labelled like this
        // columns: [{key:"id", label:"ID"}, {key:"name",label:"NAME"}, {key:"price", label:"PRICE"}],     
        columns: ["id", "name", "price"],
        data   : dataSource,
        summary: "Price sheet for inventory parts",
        caption: "Jhtml Basic DataTable YUI 3"
    });
  
// Mentioning where exactly to render the datatable
    dataTable.render("#dataTableHolder");

});

 6. Now putting all together, your html should look like below

 







Here is the fiddle for that http://jsfiddle.net/BLKLH/