cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<style scoped>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* custom styles for this example */
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith.example .yui3-datatable {
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith margin-bottom: 1em;
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* css to counter global site css */
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith.example table {
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith width: auto;
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith.example caption {
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith display: table-caption;
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith.example td {
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith text-transform: none;
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith border: 0 none;
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<div class="intro">
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith The DataTable widget displays data in a tabular format. Use plugins and
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith extensions to add features and functionality to the `Y.DataTable` class.
819e90d415ed17d59af3a247b2ad9d6feb0c21b5Luke Smith<div class="example yui3-skin-sam">
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {{>datatable-basic-source}}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h2>Simple DataTable Use Cases</h2>
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith<div class="example yui3-skin-sam">
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith <div id="simple"></div>
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith <div id="labels"></div>
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith A basic table can be rendered into a given container by passing in a simple
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith array of columns and an array of data objects into the constructor. As long
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith as the columns map directly to the keys of the data objects, the table will
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith be generated automatically from the data provided.
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke SmithYUI().use("datatable", function (Y) {
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith // A table from data with keys that work fine as column names
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith var simple = new Y.DataTable({
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith columns: ["id", "name", "price"],
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith { id: "ga_3475", name: "gadget", price: "$6.99" },
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith { id: "sp_9980", name: "sprocket", price: "$3.75" },
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith { id: "wi_0650", name: "widget", price: "$4.25" }
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly summary: "Price sheet for inventory parts",
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly caption: "Example table with simple columns"
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith Your column definitions may also be objects if additional column
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith configuration is needed. For example, the following column definitions
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith include header labels and set the `<th>`'s `abbr` attribute. Use the `key`
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith property to relate a column to its corresponding data field.
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke SmithYUI().use("datatable", function(Y) {
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith // Data with less user friendly field names
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith var data = [
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith mfr_parts_database_id : "ga_3475",
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith mfr_parts_database_name : "gadget",
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith mfr_parts_database_price: "$6.99"
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith mfr_parts_database_id : "sp_9980",
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith mfr_parts_database_name : "sprocket",
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith mfr_parts_database_price: "$3.75"
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith mfr_parts_database_id : "wi_0650",
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith mfr_parts_database_name : "widget",
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith mfr_parts_database_price: "$4.25"
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith // Column definitions that use configured header labels, abbrs.
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith // Use "key" to identify which data field has its content.
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith var columnDef = [
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith key : "mfr_parts_database_id",
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith label: "Mfr Part ID",
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith key : "mfr_parts_database_name",
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith label: "Mfr Part Name",
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith abbr : "Name"
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith key : "mfr_parts_database_price",
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith label: "Wholesale Price",
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith abbr : "Price"
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith var withColumnLabels = new Y.DataTable({
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith columns: columnDef,
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith data : data,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly summary: "Price sheet for inventory parts",
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly caption: "These columns have labels and abbrs"
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith }).render('#labels');
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith<h3>Lighten the module payload</h3>
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith The `datatable` module includes a number of features not used in this
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith example. For a smaller module payload, use the `datatable-base` module.
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith// datatable-base includes only basic table rendering, but in this case,
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith// that's enough.
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke SmithYUI().use("datatable-base", function (Y) {
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith // A table from data with keys that work fine as column names
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith var simple = new Y.DataTable({
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith columns: ["id", "name", "price"],
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith data : [ ... ]
79e56fc7818221d16e6e06fe8193f4dd34ee0d5bLuke Smith }).render("#simple");