#

# Example: Basic DataTable

The DataTable widget displays data in a tabular format. Use plugins and extensions to add features and functionality to the `Y.DataTable` class.

## Simple DataTable Use Cases

Note: be sure to add the `yui3-skin-sam` classname to the page's `<body>` element or to a parent element of the widget in order to apply the default CSS skin. See Understanding Skinning.

    <div class="example yui3-skin-sam"> <!-- You need this skin class -->
        <div id="simple"></div>

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

A basic table can be rendered into a given container by passing in a simple array of columns and an array of data objects into the constructor. As long as the columns map directly to the keys of the data objects, the table will be generated automatically from the data provided.

    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");

    });

Your column definitions may also be objects if additional column configuration is needed. For example, the following column definitions include header labels and set the `<th>`'s `abbr` attribute. Use the `key` property to relate a column to its corresponding data field.

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

        // 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"
            }
        ];

        // Column definitions that use configured header labels, abbrs.
        // Use "key" to identify which data field has its content.
        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');

    });

### Lighten the module payload

The `datatable` module includes a number of features not used in this example. For a smaller module payload, use the `datatable-base` module.

    // datatable-base includes only basic table rendering, but in this case,
    // that's enough.
    YUI().use("datatable-base", function (Y) {

        // A table from data with keys that work fine as column names
        var simple = new Y.DataTable({
            columns: ["id", "name", "price"],
            data   : [ ... ]
        }).render("#simple");

    });