febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<div class="intro component">

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <p>

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync The DataTable widget is responsible for rendering columnar data into a

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync highly customizable and fully accessible HTML table. The core

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync functionality of DataTable is to visualize structured data as a table.

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync A variety of Plugins can then be used to add features to the table such

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync as sorting and scrolling.

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync </p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</div>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync{{>getting-started}}

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<h2 id="using">Using DataTables</h2>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<h3 id="basics">DataTable basics</h3>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync A basic DataTable is comprised of columns and rows. Define the columns you

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync want to display in your DataTable with the <code>columnset</code>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync attribute. Rows are created for you based on the data you define using the

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <code>recordset</code> attribute. Under the hood, the DataTable class uses

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync a Columnset instance and a Recordset instance to manage column and row data

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync properties.

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<h3 id="columns">Working with columns</h3>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync A <code>columnset</code> can be defined with a simple array of

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <code>keys</code>. As long as these keys exist in your data, DataTable will

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync display these columns of data in the table. Note that your data may contain

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync other columns that are not displayed if they are not defined in the

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <code>columnset</code> array. A Columnset will be created containing a

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync Column instance for each item in your array, with the <code>key</code>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync values you provided.

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync// Creates a Columnset with 3 Columns. "cost" is not rendered.

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar cols = ["id","name","price"];

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync// Columns must match data parameter names

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar data = [

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync {id:"ga-3475", name:"gadget", price:"$6.99", cost:"$5.99"},

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync {id:"sp-9980", name:"sprocket", price:"$3.75", cost:"$3.25"},

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync {id:"wi-0650", name:"widget", price:"$4.25", cost:"$3.75"}

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync];

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync// Creates a DataTable with 3 columns and 3 rows

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar table = new Y.DataTable.Base({

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync columnset: cols,

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync recordset: data

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync}).render("#example");

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync```

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync<p>

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync For greater flexibility, the <code>columnset</code> array accepts

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync configuration objects as well as simple column name strings. When

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync identifying a column with a configuration object, use the <code>key</code>

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync property to reference the column name string. Below are a few other

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync available column configurations.

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync</p>

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync<p>

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync Use the <code>label</code> attribute to customize the rendered column

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync header:

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync</p>

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync```

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync// The label is the text that will be rendered in the table head

8008820b6d8d8974161e62262c4950328a13d9d7vboxsyncvar cols = [

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync { key: "id", label: "ID" },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { key: "name", label: "Name" },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { key: "price", label: "Price" }

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync];

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync Use the <code>abbr</code> attribute to set the screen-reader friendly

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync "abbr" on each TH element:

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync// The attr attribute enhances the screen-reader experience

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar cols = [

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync key: "mfr-parts-database-id",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync label: "Mfr Part ID",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync abbr: "ID"

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync key: "mfr-parts-database-name",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync label: "Mfr Part Name",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync abbr: "Name"

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync {

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync key: "mfr-parts-database-price",

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync label: "Wholesale Price",

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync abbr: "Price"

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync }

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync];

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync Use the <code>children</code> attribute to created nested column headers.

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync Parent columns are for display purposes only, not associated with any data,

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync and should not have a <code>key</code> attribute of their own.

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar nestedCols = [

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync label: "Train Schedule",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync children: [ // Use children to define nested relationships

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { key: "track" },

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync label: "Route",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync children: [

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync { key: "from" },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { key: "to" }

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync ]

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync }

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync ]

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync }

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync];

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar data = [

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { track: "1", from: "Paris", to: "Amsterdam" },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { track: "2", from: "Paris", to: "London" },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { track: "3", from: "Paris", to: "Zurich" }

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync];

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar table = new Y.DataTable.Base({

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync columnset: nestedCols,

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync recordset: data,

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync summary: "Train schedule",

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync caption: "Table with nested column headers"

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync}).render("#nested");

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<h3 id="data">Working with row data</h3>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync Pass an array of data to the <code>recordset</code> attribute, and

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync DataTable will create a <code>Recordset</code> of <code>Record</code>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync instances to populate the table. Note that you should only define columns

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync for data you want to display -- all other data is not displayed.

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync// Creates a Recordset with 3 records

8008820b6d8d8974161e62262c4950328a13d9d7vboxsyncvar data = [

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync { id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99"},

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync { id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25"},

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync { id: "wi-0650", name: "widget", price: "$4.25", cost: "$3.75"}

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync];

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync// Creates a DataTable with 3 columns and 3 rows ("cost" is not displayed)

8008820b6d8d8974161e62262c4950328a13d9d7vboxsyncvar table = new Y.DataTable.Base({

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync columnset: [ "id", "name", "price" ],

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync recordset: data

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync}).render("#example");

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync```

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync<p>

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync Data can be stored in one format but be displayed in a different format.

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync For instance, prices can be stored as numbers but be displayed as "$2.99",

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync and birthdays can be stored as date objects but be displayed as

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync "12/9/2009". Simple formatting can be defined with a string template on the

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync column definition.

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar cols = [ "id", "name", { key: "price", formatter: "\${value}" } ];

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

8008820b6d8d8974161e62262c4950328a13d9d7vboxsyncvar data = [

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync { id: "ga-3475", name: "gadget", price: 6.99 },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { id: "sp-9980", name: "sprocket", price: 3.75 },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { id: "wi-0650", name: "widget", price: 4.25 }

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync];

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar table = new Y.DataTable.Base({

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync columnset: cols,

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync recordset: data,

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync caption: "Data formatting with string template"

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync}).render("#template");

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync When a calculation is needed, define a custom function that generates

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync markup for the cell. The custom formatter function recieves an object with

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync the following properties:

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<table>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<thead>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <th>Property</th>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <th>Value</th>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync </tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</thead>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<tbody>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td><code>tbody</code></td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td>The <code>&lt;tbody&gt;</code> node containing the cell.</td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync </tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td><code>tr</code></td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td>The <code>&lt;tr&gt;</code> node containing the cell.</td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync </tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td><code>td</code></td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td>The cell <code>&lt;td&gt;</code> node.</td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync </tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td><code>value</code></td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td>Usually the value stored in the <code>Record</code> for the column. This is the default content that will be displayed.</td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync </tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td><code>record</code></td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td>The <code>Record</code> instance containing the data for all cells in the row.</td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync </tr>

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync <tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td><code>data</code></td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td>The raw data collection from the <code>Record</code> instance.</td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync </tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td><code>rowindex</code></td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td>The row number of the <code>&lt;tr&gt;</code> node containing the cell (zero based).</td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync </tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td><code>column</code></td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td>The <code>Column</code> instance for the cell's column.</td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync </tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td><code>classnames</code></td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td>The classname corresponding to the ID of the cell's column.</td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync </tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td><code>headers</code></td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <td>The Array of IDs from all <code>&lt;th&gt;</code>s corresponding to the cell (mostly relevant to nested headers).</td>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync </tr>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</tbody>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</table>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync// The custom formatter function recieves an object

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar calculate = function (o) {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync var cost = o.record.getValue("cost"),

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync price = o.record.getValue("price");

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync return "$" + (price - cost).toFixed(2);

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync};

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync// Assign the custom formatter in the column definition

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar cols = [ "id", "name", { key: "profit", formatter: calculate } ];

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

8008820b6d8d8974161e62262c4950328a13d9d7vboxsyncvar data = [

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { id: "ga-3475", name: "gadget", price: 6.99, cost: 4.99 },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { id: "sp-9980", name: "sprocket", price: 3.75, cost: 2.75 },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { id: "wi-0650", name: "widget", price: 4.25, cost: 3.25 }

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync];

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar table = new Y.DataTable.Base({

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync columnset: cols,

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync recordset: data,

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync caption: "Data formatting with custom function"

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync}).render("#function");

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync Integrate with the <a href="../datasource/">DataSource</a> data abstraction

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync utility to easily load data from remote sources and implement features such

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync as caching and polling.

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar cols = [

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync "Title",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync "Phone",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { key: "Rating.AverageRating", label: "Rating" }

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync];

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar myDataSource = new Y.DataSource.Get({

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync source: "http://query.yahooapis.com/v1/public/yql?&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync});

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncmyDataSource.plug(Y.Plugin.DataSourceJSONSchema, {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync schema: {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync resultListLocator: "query.results.Result",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync resultFields: [ "Title", "Phone", "Rating.AverageRating" ]

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync }

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync}),

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar table = new Y.DataTable.Base({

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync columnset: cols,

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync summary: "Pizza places near 98089"

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync});

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsynctable.plug(Y.Plugin.DataTableDataSource, {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync datasource: myDataSource

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync})

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsynctable.render("#pizza");

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync// Load the data into the table

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsynctable.datasource.load({

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync request: "&q=select%20*%20from%20local.search%20where%20zip%3D%2794089%27%20and%20query%3D%27pizza%27"

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync});

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync// Make another request later

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsynctable.datasource.load({

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync request: "&q=select%20*%20from%20local.search%20where%20zip%3D%2794089%27%20and%20query%3D%27chinese%27"

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync});

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync Enable DataSource caching.

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync```

8008820b6d8d8974161e62262c4950328a13d9d7vboxsyncvar cols = [

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync "Title",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync "Phone",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { key: "Rating.AverageRating", label: "Rating" }

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync];

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar myDataSource = new Y.DataSource.Get({

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync source: "http://query.yahooapis.com/v1/public/yql?format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys"

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync});

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncmyDataSource

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync .plug(Y.Plugin.DataSourceJSONSchema, {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync schema: {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync resultListLocator: "query.results.Result",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync resultFields: ["Title", "Phone", "Rating.AverageRating"]

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync }

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync })

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync .plug(Y.Plugin.DataSourceCache, {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync max: 3

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync });

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar table = new Y.DataTable.Base({

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync columnset: cols,

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync summary: "Pizza places near 98089",

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync caption: "Table with JSON data from YQL"

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync});

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync

8008820b6d8d8974161e62262c4950328a13d9d7vboxsynctable

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync .plug(Y.Plugin.DataTableDataSource, {

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync datasource: myDataSource

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync })

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync .render("#pizza");

8008820b6d8d8974161e62262c4950328a13d9d7vboxsync

8008820b6d8d8974161e62262c4950328a13d9d7vboxsynctable.datasource.load({

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync request: "&q=select%20*%20from%20local.search%20where%20zip%3D%2794089%27%20and%20query%3D%27chinese%27"

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync});

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync Enable DataSource polling.

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

9c0076729ec8138e89ce8a6af9a772b68f1f8dc7vboxsyncvar cols = ["Title", "Phone", "Rating"];

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar myDataSource = new Y.DataSource.IO({

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync source: "/path/to/service.php?"

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync});

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncmyDataSource.plug(Y.Plugin.DataSourceXMLSchema, {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync schema: {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync resultListLocator: "Result",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync resultFields: [

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { key: "Title", locator: "*[local-name() ='Title']" },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { key: "Phone", locator: "*[local-name() ='Phone']" },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { key: "Rating", locator: "*[local-name()='Rating']/*[local-name()='AverageRating']" }

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync ]

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync }

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync});

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar table = new Y.DataTable.Base({

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync columnset: cols,

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync summary: "Chinese restaurants near 98089",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync caption: "Table with XML data from same-domain script"

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync});

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsynctable

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync .plug(Y.Plugin.DataTableDataSource, {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync datasource: myDataSource,

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync initialRequest: "zip=94089&query=chinese"

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync })

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync .render("#chinese");

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncmyDataSource.setInterval(5000, {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync request: "zip=94089&query=chinese",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync callback: {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync success: Y.bind(table.datasource.onDataReturnInitializeTable, table.datasource),

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync failure: Y.bind(table.datasource.onDataReturnInitializeTable, table.datasource)

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync }

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync});

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<h3 id="sorting">Column sorting</h3>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync Column sorting functionality can be added with the DataTableSort plugin

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync (provided by the <code>datatable-sort</code> module, or in the

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <code>datatable</code> rollup module). Indicate which columns are sortable

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync by setting <code>sortable: true</code> in your column definitions.

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar cols = [

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { key: "Company", sortable: true },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { key: "Phone" },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { key: "Contact", sortable: true }

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync];

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar data = [

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { Company: "Company Bee", Phone: "415-555-1234", Contact: "Sally Spencer"},

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { Company: "Acme Company", Phone: "650-555-4444", Contact: "John Jones"},

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { Company: "Indutrial Industries", Phone: "408-555-5678", Contact: "Robin Smith"}

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync];

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar table = new Y.DataTable.Base({

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync columnset: cols,

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync recordset: data,

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync summary: "Contacts list",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync caption: "Table with simple column sorting",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync plugins: [ Y.Plugin.DataTableSort ]

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync}).render("#sort");

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<h3 id="scrolling">Scrolling</h3>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <strong>Note:</strong> Scrolling is not currently supported on the Android

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync WebKit brow

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncser.

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync Scrolling functionality can be added with the DataTableScroll plugin

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync (provided by the <code>datatable-scroll</code> module or in the

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <code>datatable</code> rollup module). Horizontal scrolling is enabled by

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync setting a <code>width</code> attribute value; fixed header vertical

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync scrolling is enabled by setting a <code>height</code> attribute value; and

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync xy-scrolling is enabled by setting both <code>width</code> and

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <code>height</code> values.

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar cols = [

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { key: "Company" },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { key: "Phone" },

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { key: "Contact" }

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync];

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar data = [

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { Company: "Company Bee", Phone: "415-555-1234", Contact: "Sally Spencer"},

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { Company: "Acme Company", Phone: "650-555-4444", Contact: "John Jones"},

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync { Company: "Indutrial Industries", Phone: "408-555-5678", Contact: "Robin Smith"}

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync];

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsyncvar table = new Y.DataTable.Base({

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync columnset: cols,

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync recordset: data,

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync});

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsynctable

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync .plug(Y.Plugin.DataTableScroll, {

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync width: "300px",

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync height: "200px"

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync })

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync .render("#scroll");

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync```

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<h2 id="knownissues">Known Issues</h2>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync<p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync <strong>Known Android issue (bug 2529761):</strong> Scrolling is not

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync currently supported on the Android WebKit browser.

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync</p>

febf3f1de573e25fb134b8453a22b0732b4c52e2vboxsync