6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik<div class="intro component">

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik <p>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik The DataTable widget is responsible for rendering columnar data into a

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik highly customizable and fully accessible HTML table. The core

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik functionality of DataTable is to visualize structured data as a table.

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik A variety of Plugins can then be used to add features to the table such

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik as sorting and scrolling.

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik </p>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik</div>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik{{>getting-started}}

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik<h2 id="using">Using DataTables</h2>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik<h3 id="basics">DataTable basics</h3>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik<p>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik A basic DataTable is comprised of columns and rows. Define the columns you

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik want to display in your DataTable with the <code>columnset</code>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik attribute. Rows are created for you based on the data you define using the

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <code>recordset</code> attribute. Under the hood, the DataTable class uses

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik a Columnset instance and a Recordset instance to manage column and row data

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik properties.

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik</p>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger<h3 id="columns">Working with columns</h3>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik<p>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik A <code>columnset</code> can be defined with a simple array of

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

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik display these columns of data in the table. Note that your data may contain

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik other columns that are not displayed if they are not defined in the

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <code>columnset</code> array. A Columnset will be created containing a

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

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik values you provided.

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik</p>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik```

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik// Creates a Columnset with 3 Columns. "cost" is not rendered.

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvikvar cols = ["id","name","price"];

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik// Columns must match data parameter names

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvikvar data = [

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

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

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

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik];

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik// Creates a DataTable with 3 columns and 3 rows

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvikvar table = new Y.DataTable.Base({

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik columnset: cols,

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik recordset: data

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik}).render("#example");

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik```

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik<p>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik For greater flexibility, the <code>columnset</code> array accepts

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik configuration objects as well as simple column name strings. When

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik identifying a column with a configuration object, use the <code>key</code>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik property to reference the column name string. Below are a few other

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik available column configurations.

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik</p>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik<p>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik Use the <code>label</code> attribute to customize the rendered column

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik header:

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik</p>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik```

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik// The label is the text that will be rendered in the table head

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvikvar cols = [

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik { key: "id", label: "ID" },

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik { key: "name", label: "Name" },

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik { key: "price", label: "Price" }

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik];

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik```

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik<p>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik Use the <code>abbr</code> attribute to set the screen-reader friendly

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik "abbr" on each TH element:

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik</p>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik```

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik// The attr attribute enhances the screen-reader experience

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvikvar cols = [

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik {

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik key: "mfr-parts-database-id",

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik label: "Mfr Part ID",

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik abbr: "ID"

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik },

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik {

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik key: "mfr-parts-database-name",

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik label: "Mfr Part Name",

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik abbr: "Name"

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik },

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik {

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik key: "mfr-parts-database-price",

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik label: "Wholesale Price",

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik abbr: "Price"

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik }

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik];

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik```

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik<p>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik Use the <code>children</code> attribute to created nested column headers.

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik Parent columns are for display purposes only, not associated with any data,

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik and should not have a <code>key</code> attribute of their own.

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik</p>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik```

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvikvar nestedCols = [

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik {

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik label: "Train Schedule",

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik children: [ // Use children to define nested relationships

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik { key: "track" },

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik {

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik label: "Route",

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik children: [

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik { key: "from" },

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik { key: "to" }

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik ]

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik }

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik ]

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik }

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik];

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvikvar data = [

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik { track: "1", from: "Paris", to: "Amsterdam" },

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik { track: "2", from: "Paris", to: "London" },

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik { track: "3", from: "Paris", to: "Zurich" }

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik];

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvikvar table = new Y.DataTable.Base({

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik columnset: nestedCols,

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik recordset: data,

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik summary: "Train schedule",

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik caption: "Table with nested column headers"

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik}).render("#nested");

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik```

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik<h3 id="data">Working with row data</h3>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik<p>

57065c0b4d57ca1e0182adda16962b22987a5b95Knut Anders Hatlen Pass an array of data to the <code>recordset</code> attribute, and

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik DataTable will create a <code>Recordset</code> of <code>Record</code>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik instances to populate the table. Note that you should only define columns

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik for data you want to display -- all other data is not displayed.

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik</p>

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik

57065c0b4d57ca1e0182adda16962b22987a5b95Knut Anders Hatlen```

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik// Creates a Recordset with 3 records

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvikvar data = [

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

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

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

57065c0b4d57ca1e0182adda16962b22987a5b95Knut Anders Hatlen];

57065c0b4d57ca1e0182adda16962b22987a5b95Knut Anders Hatlen

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik// Creates a DataTable with 3 columns and 3 rows ("cost" is not displayed)

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvikvar table = new Y.DataTable.Base({

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik columnset: [ "id", "name", "price" ],

6b33d05722eb4875697a301457983e92d2d313f8Jorgen Austvik recordset: data

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger}).render("#example");

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger```

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger<p>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger Data can be stored in one format but be displayed in a different format.

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger For instance, prices can be stored as numbers but be displayed as "$2.99",

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger and birthdays can be stored as date objects but be displayed as

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger "12/9/2009". Simple formatting can be defined with a string template on the

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger column definition.

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger</p>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger```

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulingervar cols = [ "id", "name", { key: "price", formatter: "\${value}" } ];

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulingervar data = [

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger { id: "ga-3475", name: "gadget", price: 6.99 },

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger { id: "sp-9980", name: "sprocket", price: 3.75 },

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger { id: "wi-0650", name: "widget", price: 4.25 }

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger];

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulingervar table = new Y.DataTable.Base({

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger columnset: cols,

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger recordset: data,

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger caption: "Data formatting with string template"

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger}).render("#template");

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger```

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger<p>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger When a calculation is needed, define a custom function that generates

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger markup for the cell. The custom formatter function receives an object with

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger the following properties:

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger</p>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger<table>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger<thead>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <tr>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <th>Property</th>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <th>Value</th>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger </tr>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger</thead>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger<tbody>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <tr>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <td><code>tbody</code></td>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <td>The <code>&lt;tbody&gt;</code> node containing the cell.</td>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger </tr>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <tr>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <td><code>tr</code></td>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <td>The <code>&lt;tr&gt;</code> node containing the cell.</td>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger </tr>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <tr>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <td><code>td</code></td>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <td>The cell <code>&lt;td&gt;</code> node.</td>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger </tr>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <tr>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <td><code>value</code></td>

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

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger </tr>

ded3903ab1e55f8a983d4e7741ef55504c487d69Kryštof Tulinger <tr>

54ba62a2c6e74332ffc742cb23faf21615b5d39fLubos Kosco <td><code>record</code></td>

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

</tr>

<tr>

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

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

</tr>

<tr>

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

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

</tr>

<tr>

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

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

</tr>

<tr>

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

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

</tr>

<tr>

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

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

</tr>

</tbody>

</table>

```

// The custom formatter function recieves an object

var calculate = function (o) {

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

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

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

};

// Assign the custom formatter in the column definition

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

var data = [

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

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

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

];

var table = new Y.DataTable.Base({

columnset: cols,

recordset: data,

caption: "Data formatting with custom function"

}).render("#function");

```

<p>

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

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

as caching and polling.

</p>

```

var cols = [

"Title",

"Phone",

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

];

var myDataSource = new Y.DataSource.Get({

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

});

myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {

schema: {

resultListLocator: "query.results.Result",

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

}

}),

var table = new Y.DataTable.Base({

columnset: cols,

summary: "Pizza places near 98089"

});

table.plug(Y.Plugin.DataTableDataSource, {

datasource: myDataSource

})

table.render("#pizza");

// Load the data into the table

table.datasource.load({

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

});

// Make another request later

table.datasource.load({

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

});

```

<p>

Enable DataSource caching.

</p>

```

var cols = [

"Title",

"Phone",

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

];

var myDataSource = new Y.DataSource.Get({

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

});

myDataSource

.plug(Y.Plugin.DataSourceJSONSchema, {

schema: {

resultListLocator: "query.results.Result",

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

}

})

.plug(Y.Plugin.DataSourceCache, {

max: 3

});

var table = new Y.DataTable.Base({

columnset: cols,

summary: "Pizza places near 98089",

caption: "Table with JSON data from YQL"

});

table

.plug(Y.Plugin.DataTableDataSource, {

datasource: myDataSource

})

.render("#pizza");

table.datasource.load({

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

});

```

<p>

Enable DataSource polling.

</p>

```

var cols = ["Title", "Phone", "Rating"];

var myDataSource = new Y.DataSource.IO({

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

});

myDataSource.plug(Y.Plugin.DataSourceXMLSchema, {

schema: {

resultListLocator: "Result",

resultFields: [

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

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

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

]

}

});

var table = new Y.DataTable.Base({

columnset: cols,

summary: "Chinese restaurants near 98089",

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

});

table

.plug(Y.Plugin.DataTableDataSource, {

datasource: myDataSource,

initialRequest: "zip=94089&query=chinese"

})

.render("#chinese");

myDataSource.setInterval(5000, {

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

callback: {

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

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

}

});

```

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

<p>

Column sorting functionality can be added with the DataTableSort plugin

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

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

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

</p>

```

var cols = [

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

{ key: "Phone" },

{ key: "Contact", sortable: true }

];

var data = [

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

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

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

];

var table = new Y.DataTable.Base({

columnset: cols,

recordset: data,

summary: "Contacts list",

caption: "Table with simple column sorting",

plugins: [ Y.Plugin.DataTableSort ]

}).render("#sort");

```

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

<p>

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

WebKit brow

ser.

<p>

Scrolling functionality can be added with the DataTableScroll plugin

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

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

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

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

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

<code>height</code> values.

</p>

```

var cols = [

{ key: "Company" },

{ key: "Phone" },

{ key: "Contact" }

];

var data = [

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

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

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

];

var table = new Y.DataTable.Base({

columnset: cols,

recordset: data,

});

table

.plug(Y.Plugin.DataTableScroll, {

width: "300px",

height: "200px"

})

.render("#scroll");

```

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

<p>

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

currently supported on the Android WebKit browser.

</p>