<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Basic DataTable</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<h1>Example: Basic DataTable</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><style scoped>
/* custom styles for this example */
.example .yui3-datatable {
margin-bottom: 1em;
}
/* css to counter global site css */
.example table {
width: auto;
}
.example caption {
display: table-caption;
}
.example th,
.example td {
text-transform: none;
border: 0 none;
}
</style>
<div class="intro">
<p>
The DataTable widget displays data in a tabular format. Use plugins and
extensions to add features and functionality to the <code>Y.DataTable</code> class.
</p>
</div>
<div class="example yui3-skin-sam">
<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>
</div>
<h2>Simple DataTable Use Cases</h2>
<p>
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the
page's <code><body></code> element or to a parent element of the widget in order to apply
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>.
</p>
<pre class="code prettyprint"><div class="example yui3-skin-sam"> <!-- You need this skin class -->
<div id="simple"></div>
<div id="labels"></div>
</div></pre>
<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>
<pre class="code prettyprint">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");
});</pre>
<p>
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 <code><th></code>'s <code>abbr</code> attribute. Use the <code>key</code>
property to relate a column to its corresponding data field.
</p>
<pre class="code prettyprint">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');
});</pre>
<h3>Lighten the module payload</h3>
<p>
The <code>datatable</code> module includes a number of features not used in this
example. For a smaller module payload, use the <code>datatable-base</code> module.
</p>
<pre class="code prettyprint">// 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");
});</pre>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="This example illustrates simple DataTable use cases.">
<a href="datatable-basic.html">Basic DataTable</a>
</li>
<li data-description="DataTable loaded with JSON data from a remote webservice via DataSource.Get">
<a href="datatable-dsget.html">DataTable + DataSource.Get + JSON Data</a>
</li>
<li data-description="DataTable loaded with XML data from a remote webservice via DataSource.IO.">
<a href="datatable-dsio.html">DataTable + DataSource.IO + XML Data</a>
</li>
<li data-description="Custom format data for display.">
<a href="datatable-formatting.html">Formatting Row Data for Display</a>
</li>
<li data-description="DataTable with nested column headers.">
<a href="datatable-nestedcols.html">Nested Column Headers</a>
</li>
<li data-description="DataTable with column sorting.">
<a href="datatable-sort.html">Column Sorting</a>
</li>
<li data-description="DataTable with vertical and/or horizontal scrolling rows.">
<a href="datatable-scroll.html">Scrolling DataTable</a>
</li>
<li data-description="Using DataTable's recordType attribute to create calculated, sortable columns.">
<a href="datatable-recordtype.html">Sortable generated columns</a>
</li>
<li data-description="Populating one DataTable from details in the data of another.">
<a href="datatable-masterdetail.html">Master and detail tables</a>
</li>
<li data-description="Checkbox column that retains checked state when sorting.">
<a href="datatable-chkboxselect.html">Checkbox select column</a>
</li>
</ul>
</div>
</div>
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples That Use This Component</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable.">
<a href="../panel/panel-form.html">Creating a Modal Form</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/datatable',
name: 'datatable-basic',
title: 'Basic DataTable',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('datatable-basic');
YUI.Env.Tests.examples.push('datatable-dsget');
YUI.Env.Tests.examples.push('datatable-dsio');
YUI.Env.Tests.examples.push('datatable-formatting');
YUI.Env.Tests.examples.push('datatable-nestedcols');
YUI.Env.Tests.examples.push('datatable-sort');
YUI.Env.Tests.examples.push('datatable-scroll');
YUI.Env.Tests.examples.push('datatable-recordtype');
YUI.Env.Tests.examples.push('datatable-masterdetail');
YUI.Env.Tests.examples.push('datatable-chkboxselect');
YUI.Env.Tests.examples.push('panel-form');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>