index.mustache revision 5992781dfab2b64f79fee03abd15d9a91e2f5b77
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<div class="intro component">
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith The DataTable widget is responsible for rendering columnar data into a
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith highly customizable and fully accessible HTML table. The core
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith functionality of DataTable is to visualize structured data as a table.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith A variety of Plugins can then be used to add features to the table such
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith as sorting and scrolling.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith{{>getting-started}}
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h2 id="using">Using DataTables</h2>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h3 id="basics">DataTable basics</h3>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith A basic DataTable is comprised of columns and rows. Define the columns you
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith want to display in your DataTable with the <code>columnset</code>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith attribute. Rows are created for you based on the data you define using the
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>recordset</code> attribute. Under the hood, the DataTable class uses
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith a Columnset instance and a Recordset instance to manage column and row data
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h3 id="columns">Working with columns</h3>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith A <code>columnset</code> can be defined with a simple array of
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>keys</code>. As long as these keys exist in your data, DataTable will
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith display these columns of data in the table. Note that your data may contain
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith other columns that are not displayed if they are not defined in the
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>columnset</code> array. A Columnset will be created containing a
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Column instance for each item in your array, with the <code>key</code>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith values you provided.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// Creates a Columnset with 3 Columns. "cost" is not rendered.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar cols = ["id","name","price"];
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// Columns must match data parameter names
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith {id:"ga-3475", name:"gadget", price:"$6.99", cost:"$5.99"},
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith {id:"sp-9980", name:"sprocket", price:"$3.75", cost:"$3.25"},
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith {id:"wi-0650", name:"widget", price:"$4.25", cost:"$3.75"}
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// Creates a DataTable with 3 columns and 3 rows
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar table = new Y.DataTable.Base({
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith columnset: cols,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith recordset: data
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith}).render("#example");
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith For greater flexibility, the <code>columnset</code> array accepts
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith configuration objects as well as simple column name strings. When
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith identifying a column with a configuration object, use the <code>key</code>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith property to reference the column name string. Below are a few other
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith available column configurations.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Use the <code>label</code> attribute to customize the rendered column
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// The label is the text that will be rendered in the table head
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "id", label: "ID" },
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "name", label: "Name" },
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "price", label: "Price" }
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Use the <code>abbr</code> attribute to set the screen-reader friendly
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith "abbr" on each TH element:
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// The attr attribute enhances the screen-reader experience
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith key: "mfr-parts-database-id",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith label: "Mfr Part ID",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith key: "mfr-parts-database-name",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith label: "Mfr Part Name",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith abbr: "Name"
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith key: "mfr-parts-database-price",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith label: "Wholesale Price",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith abbr: "Price"
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Use the <code>children</code> attribute to created nested column headers.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Parent columns are for display purposes only, not associated with any data,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith and should not have a <code>key</code> attribute of their own.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar nestedCols = [
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith label: "Train Schedule",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith children: [ // Use children to define nested relationships
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "track" },
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith label: "Route",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "from" },
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "to" }
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { track: "1", from: "Paris", to: "Amsterdam" },
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { track: "2", from: "Paris", to: "London" },
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { track: "3", from: "Paris", to: "Zurich" }
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar table = new Y.DataTable.Base({
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith columnset: nestedCols,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith recordset: data,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith summary: "Train schedule",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith caption: "Table with nested column headers"
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith}).render("#nested");
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h3 id="data">Working with row data</h3>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Pass an array of data to the <code>recordset</code> attribute, and
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith DataTable will create a <code>Recordset</code> of <code>Record</code>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith instances to populate the table. Note that you should only define columns
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith for data you want to display -- all other data is not displayed.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// Creates a Recordset with 3 records
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99"},
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25"},
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { id: "wi-0650", name: "widget", price: "$4.25", cost: "$3.75"}
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// Creates a DataTable with 3 columns and 3 rows ("cost" is not displayed)
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar table = new Y.DataTable.Base({
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith columnset: [ "id", "name", "price" ],
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith recordset: data
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith}).render("#example");
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Data can be stored in one format but be displayed in a different format.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith For instance, prices can be stored as numbers but be displayed as "$2.99",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith and birthdays can be stored as date objects but be displayed as
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith "12/9/2009". Simple formatting can be defined with a string template on the
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith column definition.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar cols = [ "id", "name", { key: "price", formatter: "\${value}" } ];
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { id: "ga-3475", name: "gadget", price: 6.99 },
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { id: "sp-9980", name: "sprocket", price: 3.75 },
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { id: "wi-0650", name: "widget", price: 4.25 }
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar table = new Y.DataTable.Base({
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith columnset: cols,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith recordset: data,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith caption: "Data formatting with string template"
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith}).render("#template");
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith When a calculation is needed, define a custom function that generates
9884e2fc45428bab51f805c6c3e03002728c1467Luke Smith markup for the cell. The custom formatter function receives an object with
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith the following properties:
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <th>Property</th>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <th>Value</th>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td><code>tbody</code></td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td>The <code><tbody></code> node containing the cell.</td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td><code>tr</code></td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td>The <code><tr></code> node containing the cell.</td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td><code>td</code></td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td>The cell <code><td></code> node.</td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td><code>value</code></td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td>Usually the value stored in the <code>Record</code> for the column. This is the default content that will be displayed.</td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td><code>record</code></td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td>The <code>Record</code> instance containing the data for all cells in the row.</td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td><code>data</code></td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td>The raw data collection from the <code>Record</code> instance.</td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td><code>rowindex</code></td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td>The row number of the <code><tr></code> node containing the cell (zero based).</td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td><code>column</code></td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td>The <code>Column</code> instance for the cell's column.</td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td><code>classnames</code></td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td>The classname corresponding to the ID of the cell's column.</td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td><code>headers</code></td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <td>The Array of IDs from all <code><th></code>s corresponding to the cell (mostly relevant to nested headers).</td>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// The custom formatter function recieves an object
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar calculate = function (o) {
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith var cost = o.record.getValue("cost"),
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith price = o.record.getValue("price");
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith return "$" + (price - cost).toFixed(2);
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// Assign the custom formatter in the column definition
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar cols = [ "id", "name", { key: "profit", formatter: calculate } ];
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { id: "ga-3475", name: "gadget", price: 6.99, cost: 4.99 },
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { id: "sp-9980", name: "sprocket", price: 3.75, cost: 2.75 },
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { id: "wi-0650", name: "widget", price: 4.25, cost: 3.25 }
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar table = new Y.DataTable.Base({
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith columnset: cols,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith recordset: data,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith caption: "Data formatting with custom function"
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith}).render("#function");
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Integrate with the <a href="../datasource/">DataSource</a> data abstraction
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith utility to easily load data from remote sources and implement features such
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith as caching and polling.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "Rating.AverageRating", label: "Rating" }
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar myDataSource = new Y.DataSource.Get({
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith source: "http://query.yahooapis.com/v1/public/yql?&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke SmithmyDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith resultListLocator: "query.results.Result",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith resultFields: [ "Title", "Phone", "Rating.AverageRating" ]
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar table = new Y.DataTable.Base({
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith columnset: cols,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith summary: "Pizza places near 98089"
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith datasource: myDataSource
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// Load the data into the table
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith request: "&q=select%20*%20from%20local.search%20where%20zip%3D%2794089%27%20and%20query%3D%27pizza%27"
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith// Make another request later
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith request: "&q=select%20*%20from%20local.search%20where%20zip%3D%2794089%27%20and%20query%3D%27chinese%27"
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Enable DataSource caching.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "Rating.AverageRating", label: "Rating" }
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar myDataSource = new Y.DataSource.Get({
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith source: "http://query.yahooapis.com/v1/public/yql?format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith resultListLocator: "query.results.Result",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith resultFields: ["Title", "Phone", "Rating.AverageRating"]
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar table = new Y.DataTable.Base({
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith columnset: cols,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith summary: "Pizza places near 98089",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith caption: "Table with JSON data from YQL"
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith datasource: myDataSource
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith .render("#pizza");
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith request: "&q=select%20*%20from%20local.search%20where%20zip%3D%2794089%27%20and%20query%3D%27chinese%27"
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Enable DataSource polling.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar cols = ["Title", "Phone", "Rating"];
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar myDataSource = new Y.DataSource.IO({
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith resultListLocator: "Result",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith resultFields: [
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "Title", locator: "*[local-name() ='Title']" },
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "Phone", locator: "*[local-name() ='Phone']" },
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "Rating", locator: "*[local-name()='Rating']/*[local-name()='AverageRating']" }
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar table = new Y.DataTable.Base({
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith columnset: cols,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith summary: "Chinese restaurants near 98089",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith caption: "Table with XML data from same-domain script"
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith datasource: myDataSource,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith initialRequest: "zip=94089&query=chinese"
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith .render("#chinese");
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith request: "zip=94089&query=chinese",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith success: Y.bind(table.datasource.onDataReturnInitializeTable, table.datasource),
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith failure: Y.bind(table.datasource.onDataReturnInitializeTable, table.datasource)
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h3 id="sorting">Column sorting</h3>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Column sorting functionality can be added with the DataTableSort plugin
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith (provided by the <code>datatable-sort</code> module, or in the
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>datatable</code> rollup module). Indicate which columns are sortable
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith by setting <code>sortable: true</code> in your column definitions.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "Company", sortable: true },
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "Phone" },
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "Contact", sortable: true }
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { Company: "Company Bee", Phone: "415-555-1234", Contact: "Sally Spencer"},
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { Company: "Acme Company", Phone: "650-555-4444", Contact: "John Jones"},
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { Company: "Indutrial Industries", Phone: "408-555-5678", Contact: "Robin Smith"}
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar table = new Y.DataTable.Base({
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith columnset: cols,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith recordset: data,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith summary: "Contacts list",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith caption: "Table with simple column sorting",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith}).render("#sort");
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h3 id="scrolling">Scrolling</h3>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <strong>Note:</strong> Scrolling is not currently supported on the Android
5992781dfab2b64f79fee03abd15d9a91e2f5b77Luke Smith WebKit browser.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith Scrolling functionality can be added with the DataTableScroll plugin
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith (provided by the <code>datatable-scroll</code> module or in the
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>datatable</code> rollup module). Horizontal scrolling is enabled by
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith setting a <code>width</code> attribute value; fixed header vertical
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith scrolling is enabled by setting a <code>height</code> attribute value; and
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith xy-scrolling is enabled by setting both <code>width</code> and
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <code>height</code> values.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "Company" },
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "Phone" },
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { key: "Contact" }
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { Company: "Company Bee", Phone: "415-555-1234", Contact: "Sally Spencer"},
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { Company: "Acme Company", Phone: "650-555-4444", Contact: "John Jones"},
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith { Company: "Indutrial Industries", Phone: "408-555-5678", Contact: "Robin Smith"}
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar table = new Y.DataTable.Base({
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith columnset: cols,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith recordset: data,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith width: "300px",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith height: "200px"
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith .render("#scroll");
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h2 id="knownissues">Known Issues</h2>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith <strong>Known Android issue (bug 2529761):</strong> Scrolling is not
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith currently supported on the Android WebKit browser.