<div id="simple"></div>

<div id="labels"></div>

<script>
YUI().use("datatable", function (Y) {

    // A table from data with keys that work fine as column names
    var simple = new Y.DataTable({
        columns: ["id", "name", "price"],
        data   : [
            { id: "ga_3475", name: "gadget",   price: "$6.99" },
            { id: "sp_9980", name: "sprocket", price: "$3.75" },
            { id: "wi_0650", name: "widget",   price: "$4.25" }
        ],
        summary: "Price sheet for inventory parts",
        caption: "Example table with simple columns"
    });

    simple.render("#simple");

    // Data with less user friendly field names
    var data = [
        {
            mfr_parts_database_id   : "ga_3475",
            mfr_parts_database_name : "gadget",
            mfr_parts_database_price: "$6.99"
        },
        {
            mfr_parts_database_id   : "sp_9980",
            mfr_parts_database_name : "sprocket",
            mfr_parts_database_price: "$3.75"
        },
        {
            mfr_parts_database_id   : "wi_0650",
            mfr_parts_database_name : "widget",
            mfr_parts_database_price: "$4.25"
        }
    ];

    var columnDef = [
        {
            key  : "mfr_parts_database_id",
            label: "Mfr Part ID",
            abbr : "ID"
        },
        {
            key  : "mfr_parts_database_name",
            label: "Mfr Part Name",
            abbr : "Name"
        },
        {
            key  : "mfr_parts_database_price",
            label: "Wholesale Price",
            abbr : "Price"
        }
    ];

    var withColumnLabels = new Y.DataTable({
        columns: columnDef,
        data   : data,
        summary: "Price sheet for inventory parts",
        caption: "These columns have labels and abbrs"
    }).render('#labels');

});
</script>
