index.mustache revision e8d16592842bdb884e0e4d938f334b6ac5b7cad0
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith<style type="text/css">
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith .yui3-datatable table {
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith width: auto;
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith .yui3-datatable td, .yui3-datatable th {
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith border: 0 none;
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.
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith A variety of class extensions can then be used to add features to the
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith table such as sorting and scrolling.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith{{>getting-started}}
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<div class="callout">
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <h2 id="migration-intro">Upgrading from version 3.4.1 or older?</h2>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <strong>NOTE: As of version 3.5.0, DataTable and supporting module APIs
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith have been changed in backward incompatible ways.</strong>
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith If you are currently using DataTable version 3.4.1 or prior, please
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith read the <a href="migration.html">3.5.0+ Migration Guide</a> for tips
e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith to avoid unpleasant surprises when you upgrade.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith<h2 id="using">DataTable Basics</h2>
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith A basic DataTable is comprised of columns and rows. Define the columns you
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith want to display in your DataTable with the `columns` attribute. Rows are
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith created for you based on the data you provide to the `data` attribute.
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith Under the hood, the DataTable class uses a ModelList instance to manage the
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith row data properties.
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith// Columns must match data object property names
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith { id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99" },
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith { id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith { id: "wi-0650", name: "widget", price: "$4.25", cost: "$3.75" }
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smithvar table = new Y.DataTable({
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith columns: ["id", "name", "price"],
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith // Optionally configure your table with a caption
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith caption: "My first DataTable!",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith // and/or a summary (table attribute)
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith summary: "Example DataTable showing basic instantiation configuration"
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith<p>This code produces this table:</p>
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith<div id="example1" class="yui3-skin-sam"></div>
9533104fb7447a0765dc2aafec105c729d2c1be7Luke SmithYUI().use('datatable-base', function (Y) {
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith // Columns must match data object property names
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith var data = [
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith { id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99" },
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith { id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith { id: "wi-0650", name: "widget", price: "$4.25", cost: "$3.75" }
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith var table = new Y.DataTable({
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith columns: ["id", "name", "price"],
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith caption: "My first DataTable!",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith summary: "Example DataTable showing basic instantiation configuration"
9563d8a01a40e508f7697d9c674c164512940371Luke Smith<h2 id="columns">Working with columns</h2>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith The `columns` attribute takes an array of field names that correspond to
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith property names in the `data` objects. These field names are called "keys".
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith As long as these keys exist in your data, DataTable will display these
9563d8a01a40e508f7697d9c674c164512940371Luke Smith columns in the table. By default, the key is also used as the label of the
9563d8a01a40e508f7697d9c674c164512940371Luke Smith column header.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith<h3 id="column-configs">Column Configurations</h3>
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith For greater flexibility, columns can also be identified with configuration
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith objects. When identifying a column with a configuration object, use the
9563d8a01a40e508f7697d9c674c164512940371Luke Smith `key` property to reference the associated data field (the string you would
9563d8a01a40e508f7697d9c674c164512940371Luke Smith have used to identify the column if you didn't need more configuration).
9563d8a01a40e508f7697d9c674c164512940371Luke Smith Otherwise, you can include any number of additional configuration
9563d8a01a40e508f7697d9c674c164512940371Luke Smith properties to customize how your data renders and behaves, depending on
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith which table extensions or plugins you have included.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith Some column configurations affect the table headers and others affect the
9563d8a01a40e508f7697d9c674c164512940371Luke Smith data cells. The full list of configurations is listed in <a
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith href="#column-config">Appendix A</a> below.
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith // The key relates this column to a data field
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith key: "mfr-parts-database-id",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith // The label is the text that will be rendered in the table head
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith label: "Mfr Part ID",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith // The abbr sets the <th>s abbr attribute
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith key: "mfr-parts-database-name",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith label: "Mfr Part Name",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith abbr: "Name",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith // Allows user clicks on the header to sort the table rows by the
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith // values in this column. Requires the `datatable-sort` module.
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith sortable: true
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith key: "mfr-parts-database-price",
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith label: "Wholesale Price",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith abbr: "Price",
9563d8a01a40e508f7697d9c674c164512940371Luke Smith // The emptyCellValue provides default content for data cells if a data
9563d8a01a40e508f7697d9c674c164512940371Luke Smith // row has no value for this field
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith emptyCellValue: '<em>(not set)</em>',
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith // The allowHTML configuration permits markup in data values to pass
9563d8a01a40e508f7697d9c674c164512940371Luke Smith // directly into the data cell's innerHTML.
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith allowHTML: true,
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith sortable: true
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smithvar data = ...
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smithvar table = new Y.DataTable({
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith columns: cols,
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith<p>This code produces this table:</p>
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith<div id="example2" class="yui3-skin-sam"></div>
9533104fb7447a0765dc2aafec105c729d2c1be7Luke SmithYUI().use('datatable-sort', function (Y) {
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith var cols = [
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith key: "mfr-parts-database-id",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith label: "Mfr Part ID",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith key: "mfr-parts-database-name",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith label: "Mfr Part Name",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith abbr: "Name",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith sortable: true
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith key: "mfr-parts-database-price",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith label: "Wholesale Price",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith abbr: "Price",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith emptyCellValue: '<em>(not set)</em>',
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith allowHTML: true,
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith sortable: true
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith var data = [
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith { "mfr-parts-database-id": "ga-3475", "mfr-parts-database-name": "gadget", "mfr-parts-database-price": "$6.99", cost: "$5.99" },
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith { "mfr-parts-database-id": "sp-9980", "mfr-parts-database-name": "sprocket", "mfr-parts-database-price": "$3.75", cost: "$3.25" },
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith { "mfr-parts-database-id": "wi-0650", "mfr-parts-database-name": "widget", "mfr-parts-database-price": "", cost: "$3.75" },
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith { "mfr-parts-database-id": "nu-0001", "mfr-parts-database-name": "nut", "mfr-parts-database-price": "$0.25", cost: "$3.75" }
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith var table = new Y.DataTable({
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith columns: cols,
9563d8a01a40e508f7697d9c674c164512940371Luke Smith<h3 id="nested">Multi-row Headers</h3>
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith Use the `children` column configuration to created nested column headers.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith The `children` configuration takes an array of column configurations, just
9563d8a01a40e508f7697d9c674c164512940371Luke Smith like the `columns` attribute itself. The columns defined in the `children`
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith property will have their header cells rendered below the parent column's
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith header in the next row. Sibling columns without `children` will span rows.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith Because columns that have children don't relate directly to the data in the
9563d8a01a40e508f7697d9c674c164512940371Luke Smith table rows, they should not have a `key` configured. Instead, include a
9563d8a01a40e508f7697d9c674c164512940371Luke Smith `label` to provide the header's content.
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smithvar nestedCols = [
9563d8a01a40e508f7697d9c674c164512940371Luke Smith // Important: Parent columns do NOT get a key...
9563d8a01a40e508f7697d9c674c164512940371Luke Smith // but DO get a label
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith label: "Train Schedule",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith // Pass an array of column configurations (strings or objects) as children
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" }
9563d8a01a40e508f7697d9c674c164512940371Luke Smithvar table = new Y.DataTable({
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith columns: nestedCols,
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith data : data,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith caption: "Table with nested column headers"
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith}).render("#example3");
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith<p>This code produces this table:</p>
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith<div id="example3" class="yui3-skin-sam"></div>
9533104fb7447a0765dc2aafec105c729d2c1be7Luke SmithYUI().use('datatable-base', function (Y) {
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smithvar nestedCols = [
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith label: "Train Schedule",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith label: "Route",
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith children: [ { key: "from" }, { key: "to" } ]
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith { track: "1", from: "Paris", to: "Amsterdam" },
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith { track: "2", from: "Paris", to: "London" },
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith { track: "3", from: "Paris", to: "Zurich" }
9563d8a01a40e508f7697d9c674c164512940371Luke Smithvar table = new Y.DataTable({
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith columns: nestedCols,
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith data : data,
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith caption: "Table with nested column headers"
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith}).render("#example3");
9563d8a01a40e508f7697d9c674c164512940371Luke Smith<h3 id="formatters">Formatting Cell Data</h3>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith It's highly recommended to keep the data in the underlying `data` ModelList
9563d8a01a40e508f7697d9c674c164512940371Luke Smith as pure data, free from presentational concerns. For example, use real
9563d8a01a40e508f7697d9c674c164512940371Luke Smith numbers, not numeric strings, and store link urls and labels either in
9563d8a01a40e508f7697d9c674c164512940371Luke Smith separate data fields or in a single data field, but as separate properties
9563d8a01a40e508f7697d9c674c164512940371Luke Smith of a value object. This allows the data to be used for calculations such
9563d8a01a40e508f7697d9c674c164512940371Luke Smith as sorting or averaging.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith In short, it is the role of the `data` attribute to hold data. It is the
9563d8a01a40e508f7697d9c674c164512940371Luke Smith role of the `columns` configuration to decide how to display it.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith Out of the box, DataTable provides three primary ways to customize how your
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith data is formatted for display in the table cell, all defined in the column
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith configuration:
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith <li>`formatter` strings,</li>
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith <li>`formatter` functions, and</li>
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith <li>`nodeFormatter` functions
9563d8a01a40e508f7697d9c674c164512940371Luke Smith // It's ok to mix simple strings and configuration objects
9563d8a01a40e508f7697d9c674c164512940371Luke Smith label: 'formatter',
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith // 1. formatter strings
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith // These are used as templates, and use the field data to replace the {value} placeholder
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith key: 'price',
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith label: 'string',
9563d8a01a40e508f7697d9c674c164512940371Luke Smith formatter: '${value}',
9563d8a01a40e508f7697d9c674c164512940371Luke Smith emptyCellValue: '(not set)'
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith // 2. formatter functions
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith // These can provide alternate content, add cell or row classes, refer
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith // to other data fields, etc (more below)
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith key: 'price',
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith label: 'function',
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith formatter: function (o) {
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith o.className += ' yellow-background';
9563d8a01a40e508f7697d9c674c164512940371Luke Smith return o.value ? '$' + o.value.toFixed(2) : '(not set)';
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith // 3. nodeFormatter functions
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith // These have access to the cell Node as well as all other DOM Nodes in the <tbody>
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith // Caveats apply; see below.
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith key: 'price',
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith label: 'nodeFormatter',
9563d8a01a40e508f7697d9c674c164512940371Luke Smith nodeFormatter: function (o) {
9563d8a01a40e508f7697d9c674c164512940371Luke Smith var content;
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith // Add a class to the <tr>
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith o.cell.ancestor().addClass('red-text');
9563d8a01a40e508f7697d9c674c164512940371Luke Smith content = o.value ? ('$' + o.value.toFixed(2)) : '(not set)';
9563d8a01a40e508f7697d9c674c164512940371Luke Smith<p>This code produces this table:</p>
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith<div id="example4" class="yui3-skin-sam">
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith <style scoped>
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith .yui3-datatable .yui3-datatable-data .yellow-background {
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith background-color: #ffe;
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith .red-text td {
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith color: #900;
9563d8a01a40e508f7697d9c674c164512940371Luke SmithYUI().use('datatable-base', function (Y) {
9563d8a01a40e508f7697d9c674c164512940371Luke Smith var cols = [
9563d8a01a40e508f7697d9c674c164512940371Luke Smith { label: 'formatter', children: [
9563d8a01a40e508f7697d9c674c164512940371Luke Smith { key: 'price', label: 'string',
9563d8a01a40e508f7697d9c674c164512940371Luke Smith formatter: '${value}', emptyCellValue: '(not set)' },
9563d8a01a40e508f7697d9c674c164512940371Luke Smith { key: 'price', label: 'function',
9563d8a01a40e508f7697d9c674c164512940371Luke Smith formatter: function (o) {
9563d8a01a40e508f7697d9c674c164512940371Luke Smith o.className += ' yellow-background';
9563d8a01a40e508f7697d9c674c164512940371Luke Smith return o.value ? '$' + o.value.toFixed(2) : '(not set)';
9563d8a01a40e508f7697d9c674c164512940371Luke Smith key: 'price',
9563d8a01a40e508f7697d9c674c164512940371Luke Smith label: 'nodeFormatter',
9563d8a01a40e508f7697d9c674c164512940371Luke Smith nodeFormatter: function (o) {
9563d8a01a40e508f7697d9c674c164512940371Luke Smith var content;
9563d8a01a40e508f7697d9c674c164512940371Luke Smith // Add a class to the <tr>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith o.cell.ancestor().addClass('red-text');
9563d8a01a40e508f7697d9c674c164512940371Luke Smith content = o.value ? ('$' + o.value.toFixed(2)) : '(not set)';
9563d8a01a40e508f7697d9c674c164512940371Luke Smith var data = [
9563d8a01a40e508f7697d9c674c164512940371Luke Smith { id: "ga-3475", name: "gadget", price: 6.99 },
9563d8a01a40e508f7697d9c674c164512940371Luke Smith { id: "sp-9980", name: "sprocket", price: 3.75 },
9563d8a01a40e508f7697d9c674c164512940371Luke Smith { id: "wi-0650", name: "widget" },
9563d8a01a40e508f7697d9c674c164512940371Luke Smith { id: "nu-0001", name: "nut", price: 0.25 }
9563d8a01a40e508f7697d9c674c164512940371Luke Smith var table = new Y.DataTable({
9563d8a01a40e508f7697d9c674c164512940371Luke Smith columns: cols,
9563d8a01a40e508f7697d9c674c164512940371Luke Smith }).render("#example4");
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith<h4 id="formatter-function">Setting content with `formatter` functions</h4>
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith Set the cell content with column `formatter`s by returning the desired
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith content string from the function. Alternately, just update `o.value` with
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith the new value in the object passed as an argument to the `formatter`. When
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith updating `o.value` <em>do not include a return statement</em>.
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith `formatters` are very powerful because not only do they have access to the
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith record's value for that column's field, but they also receive the rest of
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith the record's data, the record Model instance itself, and the column
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith configuration object. This allows you to include any extra configurations
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith in your column configuration that might be useful to customizing how cells
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith in the column are rendered.
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smithfunction currency(o) {
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith decimalPlaces : o.column.decimalPlaces || 2,
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith decimalSeparator : o.column.decimalSeparator || '.',
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith thousandsSeparator: o.column.thousandsSeparator || ','
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith { key: "price", formatter: currency, decimalPlaces: 3 },
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith See <a href="#formatter-props">Appendix B</a> for a list of all properties
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith passed to `formatter` functions.
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith<h4 id="nodeformatters">Setting content with `nodeFormatter` functions</h4>
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith Unlike `formatters` which can effectively default to the normal rendering
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith logic by leave `o.value` unchanged, `nodeFormatters` must assign content to
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith the cell themselves. The cell's initial classes will be set up, but that's
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith it. Everything else is your responsibility.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <strong>`nodeFormatter`s should return `false`</strong>.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <a href="formatter-vs-nodeformatter">See below</a> for details.
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith While there are <a href="#formatter-vs-nodeformatter">few scenarios that
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith require `nodeFormatter`s</a>, they do have the benefits of having the Node
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith API for constructing more complex DOM subtrees and the ability to access
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith all nodes in the `<tbody>`. This means they can reference, and even modify,
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith cells in other rows.
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith Like `formatters`, `nodeFormatters` are provided with the data field value,
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith the record data, the record Model instance, and the column configuration
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith See <a href="#nodeformatter-props">Appendix C</a> for a list of all
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith properties passed to `nodeFormatter` functions.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith<h4 id="formatter-vs-nodeformatter">Why `formatter` and `nodeFormatter`?</h4>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith For good rendering performance and memory management, DataTable creates
9563d8a01a40e508f7697d9c674c164512940371Luke Smith table content by assembling `innerHTML` strings from templates, with
9563d8a01a40e508f7697d9c674c164512940371Luke Smith `{placeholder}` tokens replaced with your data. However, this means that
9563d8a01a40e508f7697d9c674c164512940371Luke Smith the Nodes don't exist yet when a column's `formatter`s are applied.
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith To minimize the need to create Nodes for each cell, the default rendering
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith logic supports the addition of cell classes as well as row classes via
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith `formatter` functions. Event subscriptions should be
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith <a href="http://yuilibrary.com/yui/docs/event/delegation.html">delegated</a>
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith from the DataTable instance itself using the
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith <a href="http://yuilibrary.com/yui/docs/api/classes/DataTable.html#method_delegate">`delegate()` method</a>.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith On the rare occasion that you <em>must</em> use Nodes to supply the cell
9563d8a01a40e508f7697d9c674c164512940371Luke Smith data, DataTable allows a second pass over the generated DOM elements once
9563d8a01a40e508f7697d9c674c164512940371Luke Smith the initial string concatenation has been completed and the full HTML
9563d8a01a40e508f7697d9c674c164512940371Luke Smith content created.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith It is important to note that `nodeFormatters` will necessarily create a
9563d8a01a40e508f7697d9c674c164512940371Luke Smith Node instance for each cell in that column, which will increase the memory
9563d8a01a40e508f7697d9c674c164512940371Luke Smith footprint of your application. If the Node instance wrappers around the
9563d8a01a40e508f7697d9c674c164512940371Luke Smith DOM elements don't need to be maintained beyond the life of the
9563d8a01a40e508f7697d9c674c164512940371Luke Smith `nodeFormatter`, return `false` to remove them from the internal object
9563d8a01a40e508f7697d9c674c164512940371Luke Smith cache. <strong>This will not remove the rendered DOM, but it will remove
9563d8a01a40e508f7697d9c674c164512940371Luke Smith event subscriptions made on those Nodes</strong>.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith In general, `nodeFormatter`s should only be used if absolutely necessary,
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith and should <em>always return `false`</em>.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith<h4 id="formatters-vs-empty">Formatters vs. `emptyCellValue`</h4>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith The `emptyCellValue` configuration is useful to provide fallback content in
9563d8a01a40e508f7697d9c674c164512940371Luke Smith the case of missing or empty column data, but it interacts with each type of
9563d8a01a40e508f7697d9c674c164512940371Luke Smith formatter differently.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith String formatters will only be applied if the field data for that cell is
9563d8a01a40e508f7697d9c674c164512940371Luke Smith not `undefined`. This allows the `emptyCellValue` to populate the cell.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith Function formatters are applied before the return value or (potentially
9563d8a01a40e508f7697d9c674c164512940371Luke Smith altered) `o.value` property is tested for `undefined` or the empty string.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith In either of these cases, the `emptyCellValue` populates the cell.
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith Finally, the `emptyCellValue` configuration is ignored by columns configured with
4e67a495f88a68220462c5e1149e16824b566cc1Luke Smith `nodeFormatter`s.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith<h2 id="data">Getting Row Data</h2>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith<!-- TODO: describe data as array, data as ModelList instance, assigned and dynamic recordTypes -->
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 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",
9563d8a01a40e508f7697d9c674c164512940371Luke Smith resultFields: [
9563d8a01a40e508f7697d9c674c164512940371Luke Smith key: "Rating",
9563d8a01a40e508f7697d9c674c164512940371Luke Smithvar table = new Y.DataTable({
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith columns: 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"]
9563d8a01a40e508f7697d9c674c164512940371Luke Smithvar table = new Y.DataTable({
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith columns: 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']" }
9563d8a01a40e508f7697d9c674c164512940371Luke Smithvar table = new Y.DataTable({
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith columns: 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>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith Column sorting functionality can be added with the `datatable-sort` module
9563d8a01a40e508f7697d9c674c164512940371Luke Smith (included in the `datatable` rollup module).
9563d8a01a40e508f7697d9c674c164512940371Luke Smith Enable sorting for all columns by setting `sortable` to true during
9563d8a01a40e508f7697d9c674c164512940371Luke Smith instantiation. Alternately, pass `sortable` an array of column keys to
9563d8a01a40e508f7697d9c674c164512940371Luke Smith enable sortability of those specific columns, `false` to disable sorting,
9563d8a01a40e508f7697d9c674c164512940371Luke Smith or the string "auto" (the default) to determine which columns to make
9563d8a01a40e508f7697d9c674c164512940371Luke Smith sortable by reading the `sortable` property from the column configurations.
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"}
9563d8a01a40e508f7697d9c674c164512940371Luke Smith// Alternately, include sortable: true or sortable: ["Company", "Contact"]
9563d8a01a40e508f7697d9c674c164512940371Luke Smith// in the DataTable configuration
9563d8a01a40e508f7697d9c674c164512940371Luke Smithvar table = new Y.DataTable({
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith columns: cols,
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith summary: "Contacts list",
9563d8a01a40e508f7697d9c674c164512940371Luke 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.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith Scrolling functionality can be added with the `datatable-scroll` module
9563d8a01a40e508f7697d9c674c164512940371Luke Smith (included in the `datatable` rollup module). Scrolling is enabled by the
9563d8a01a40e508f7697d9c674c164512940371Luke Smith `scrollable` attribute, which accepts values "x", "y", "xy", `true` (same
9563d8a01a40e508f7697d9c674c164512940371Luke Smith as "xy"), or `false` (the default).
9563d8a01a40e508f7697d9c674c164512940371Luke Smith Note, vertical scrolling also requires the table's `height` attribute to be
9563d8a01a40e508f7697d9c674c164512940371Luke Smith set, and horizontal scrolling requires the `width` to be set.
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"}
9563d8a01a40e508f7697d9c674c164512940371Luke Smithvar table = new Y.DataTable({
9533104fb7447a0765dc2aafec105c729d2c1be7Luke Smith columns: cols,
9563d8a01a40e508f7697d9c674c164512940371Luke Smith scrollable: "y",
9563d8a01a40e508f7697d9c674c164512940371Luke Smith height: "300px"
9563d8a01a40e508f7697d9c674c164512940371Luke Smith}).render("#scroll");
daa301d2a0f17b5c1b04d777de3acf969b9b63d2Luke Smith<h2 id="knownissues">Known Issues</h2>
f85539ee51e30adb584249d2c134280e8191447dLuke Smith Scrolling is
f85539ee51e30adb584249d2c134280e8191447dLuke Smith <a href="http://yuilibrary.com/projects/yui3/ticket/2529761">not
f85539ee51e30adb584249d2c134280e8191447dLuke Smith currently supported on Android</a> WebKit browser.
f85539ee51e30adb584249d2c134280e8191447dLuke Smith <li>Scrolling DataTable does
f85539ee51e30adb584249d2c134280e8191447dLuke Smith <a href="http://yuilibrary.com/projects/yui3/ticket/2531047">not appear
f85539ee51e30adb584249d2c134280e8191447dLuke Smith scrollable</a> in iOS and OS X 10.7 in Safari 5.1+ and Chrome 15+.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith<h2 id="column-config">Appendix A: Column Configurations</h2>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith The properties below are supported in the column configuration objects
9563d8a01a40e508f7697d9c674c164512940371Luke Smith passed in the `columns` attribute array.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith<div id="column-config-table" class="yui3-skin-sam">
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <th scope="col">Configuration</th>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <th scope="col">Description</th>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <th scope="col">Module</th>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <th scope="col">readOnly</th>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>key</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-base`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>name</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-base`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>label</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-base`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>children</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-base`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>abbr</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-base`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>formatter</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-base`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>nodeFormatter</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-base`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>emptyCellValue</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-base`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>allowHTML</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-base`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>className</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-base`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>sortable</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-sort`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>sortFn</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-sort`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>sortDir</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-sort`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>width</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-column-widths`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>_yuid</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-base`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>YES</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>_id</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-base`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>YES</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>_colspan</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-base`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>YES</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>_rowspan</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-base`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>YES</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>_parent</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-base`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>YES</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>_headers</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>`datatable-base`</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <td>YES</td>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith<h2 id="formatter-props">Appendix B: Formatter Argument Properties</h2>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith The properties below are found on the object passed to `formatter`
9563d8a01a40e508f7697d9c674c164512940371Luke Smith functions defined in a column configuration. See
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <a href="#nodeformatter-props">Appendix C</a> for the object properties
9563d8a01a40e508f7697d9c674c164512940371Luke Smith passed to `nodeFormatter`s.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith<div id="formatter-props-table" class="yui3-skin-sam">
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <th scope="col">Property</th>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <th scope="col">Description</th>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith<h2 id="nodeformatter-props">Appendix C: nodeFormatter Argument Properties</h2>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith The properties below are found on the object passed to `nodeFormatter`
9563d8a01a40e508f7697d9c674c164512940371Luke Smith functions defined in a column configuration. See
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <a href="#formatter-props">Appendix B</a> for the object properties
9563d8a01a40e508f7697d9c674c164512940371Luke Smith passed to `formatter`s.
9563d8a01a40e508f7697d9c674c164512940371Luke Smith<div id="nodeformatter-props-table" class="yui3-skin-sam">
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <th scope="col">Property</th>
9563d8a01a40e508f7697d9c674c164512940371Luke Smith <th scope="col">Description</th>