datatable-basic.mustache revision cf6c1ae1ed15095f8dc269bb9d7a373a1b87990e
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar<style scoped>
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar/* custom styles for this example */
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar.dt-example {margin:1em;}
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar/* css to counter global site css */
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar.dt-example th {text-transform:none;}
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar.dt-example table {width:auto;}
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar.dt-example caption {display:table-caption;}
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar<div class="intro">
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar <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>
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar<div class="example">
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar {{>datatable-basic-source}}
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar<h2>Simple DataTable Use Cases</h2>
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar<div id="example" class="yui3-skin-sam"></div>
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar<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>
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza SabdarYUI().use("datatable-base", function(Y) {
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar var cols = ["id","name","price"],
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar {id:"ga-3475", name:"gadget", price:"$6.99"},
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar {id:"sp-9980", name:"sprocket", price:"$3.75"},
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar {id:"wi-0650", name:"widget", price:"$4.25"}
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar columnset: cols,
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar recordset: data,
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar summary: "Price sheet for inventory parts",
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar caption: "Example table with simple columns"
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar }).render("#example");
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar<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>
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza SabdarYUI().use("datatable-base", function(Y) {
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar var cols = [
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar { key: "mfr_parts_database_id", label: "Mfr Part ID", abbr: "ID"},
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar { key: "mfr_parts_database_name", label: "Mfr Part Name", abbr: "Name"},
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar { key: "mfr_parts_database_price", label: "Wholesale Price", abbr: "Price"}
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar { mfr_parts_database_id: "ga_3475", mfr_parts_database_name: "gadget", mfr_parts_database_price: "$6.99"},
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar { mfr_parts_database_id: "sp_9980", mfr_parts_database_name: "sprocket", mfr_parts_database_price: "$3.75"},
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar { mfr_parts_database_id: "wi_0650", mfr_parts_database_name: "widget", mfr_parts_database_price: "$4.25"}
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar columnset: cols,
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar recordset: data,
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar summary: "Price sheet for inventory parts",
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar caption: "These columns have labels and abbrs"
2654012f83cec5dc15b61dfe3e4a4915f186e7a6Reza Sabdar }).render("#example");