datatable-basic.mustache revision cf6c1ae1ed15095f8dc269bb9d7a373a1b87990e
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<style scoped>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* custom styles for this example */
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly.dt-example {margin:1em;}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly/* css to counter global site css */
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly.dt-example th {text-transform:none;}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly.dt-example table {width:auto;}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly.dt-example caption {display:table-caption;}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<div class="intro">
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly <p>The DataTable widget displays data in a tabular format. Use plugins and extensions to add features and functionality to the `Y.DataTable.Base` class.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<div class="example">
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {{>datatable-basic-source}}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<h2>Simple DataTable Use Cases</h2>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<div id="example" class="yui3-skin-sam"></div>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>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.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny DonnellyYUI().use("datatable-base", function(Y) {
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly var cols = ["id","name","price"],
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {id:"ga-3475", name:"gadget", price:"$6.99"},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {id:"sp-9980", name:"sprocket", price:"$3.75"},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly {id:"wi-0650", name:"widget", price:"$4.25"}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly columnset: cols,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly recordset: data,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly summary: "Price sheet for inventory parts",
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly caption: "Example table with simple columns"
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly }).render("#example");
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly<p>Your column definitions may be an array of object literals in order to support any number of configurations that are supported by the `Y.Column` class. For instance, you may wish to define a `label` that will be displayed in each column header. Use the `key` property to define where data for the column will be coming from.</p>
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny DonnellyYUI().use("datatable-base", function(Y) {
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly { key: "mfr_parts_database_id", label: "Mfr Part ID", abbr: "ID"},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly { key: "mfr_parts_database_name", label: "Mfr Part Name", abbr: "Name"},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly { key: "mfr_parts_database_price", label: "Wholesale Price", abbr: "Price"}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly { mfr_parts_database_id: "ga_3475", mfr_parts_database_name: "gadget", mfr_parts_database_price: "$6.99"},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly { mfr_parts_database_id: "sp_9980", mfr_parts_database_name: "sprocket", mfr_parts_database_price: "$3.75"},
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly { mfr_parts_database_id: "wi_0650", mfr_parts_database_name: "widget", mfr_parts_database_price: "$4.25"}
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly columnset: cols,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly recordset: data,
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly summary: "Price sheet for inventory parts",
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly caption: "These columns have labels and abbrs"
cf6c1ae1ed15095f8dc269bb9d7a373a1b87990eJenny Donnelly }).render("#example");