Class charts.DataTable

Extends dom.EventDispatcher.

Defined in: DataTable.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	charts.DataTable(container) DataTable constructor.

Field Summary
Field Attributes	Field Name and Description
<inner>	DEFAULT_OPTIONS Default data table options.

Method Summary
Method Attributes	Method Name and Description
	draw(data, opt_options) Draws the table based on `data` and `opt_options`.
	getColumn() Gets active column data.

Event Summary
Event Attributes	Event Name and Description
<inner>	sort() Dispatched when any header column is clicked.

Class Detail

charts.DataTable(container)

DataTable constructor.

Simple:
var table = new charts.DataTable('container_id');
table.draw([
  ['Work', 'Eat', 'Commute', 'Watch TV', 'Sleep'], // Columns
  [100,      50,         30,         10,      40], // First row
  [140,       2,        110,        150,    1300]  // Second row
]);

Complex:
var options = {
  'bool-format': ['<input type="checkbox" checked>',
                  '<input type="checkbox">'],
  'date-format': 'YYYY-MM-dd'
};

var table = new charts.DataTable('container_id');

table.addEventListener('sort', function() {
  window.console && console.log(table.getColumn());
});

table.draw([
  // Columns:
  [
    {label: '', type: 'bool', name: 'checkbox'}
    {label: 'Country', title: 'Title text', name: 'country', width: '40%'},
    {label: 'Population', type: 'number', name: 'population'},
    {label: 'Date', type: 'date', name: 'date', format: 'YYYY/MM/dd'}
  ],
  // Simple row:
  [true, 'Germany', 80619000, new Date(2013, 6, 31)],
  // Complex rows:
  [0, 'USA', 317638000, {value: new Date(2014, 2, 5), format: 'YY/MM/dd'}],
  [1, {label: 'Vatican', format: '<b>{{ value }}</b>'}, 839, new Date],
], options);

Styles: (default prefix: "data-")
table.data-table {}
table.data-table caption {}
table.data-table thead tr th {}
table.data-table thead tr th span {}
table.data-table tbody tr td {}
table.data-table tfoot tr td {}
table.data-table tr.data-row-even {}
table.data-table tr.data-row-odd {}
table.data-table thead tr th.data-cell-text {}
table.data-table thead tr th.data-cell-date {}
table.data-table thead tr th.data-cell-bool {}
table.data-table thead tr th.data-cell-number {}
table.data-table tbody tr td.data-cell-text {}
table.data-table tbody tr td.data-cell-date {}
table.data-table tbody tr td.data-cell-bool {}
table.data-table tbody tr td.data-cell-number {}
table.data-table tfoot tr td.data-cell-text {}
table.data-table tfoot tr td.data-cell-date {}
table.data-table tfoot tr td.data-cell-bool {}
table.data-table tfoot tr td.data-cell-number {}
table.data-table thead th.data-sort-asc {}
table.data-table thead th.data-sort-desc {}

Parameters:
{string|Element} container: The HTML container.

Requires:: dom.css; dom.events; dom.Template; formatters.NumberFormatter; formatters.DateFormatter; util.Object

Field Detail

<inner> DEFAULT_OPTIONS

Default data table options.

{
  'date-format': 'YYYY-MM-dd',      // Default date format.
  'bool-format': ['True', 'False'], // Default boolean format.
  'text-format': '{{ value }}',     // Default text template format.
  'css-prefix': 'data-',            // Default css prefix.
  'header': true,                   // Shows first row as header (THEAD).
  'footer': true,                   // Shows last row as footer (TFOOT).
  'caption': '',                    // Default table caption text.
  'sort': {
    'column': 0,                    // Default column index to sort by.
    'dir': 'asc'                    // Default sort direction.
  }
}

Method Detail

draw(data, opt_options)

Draws the table based on data and opt_options.

Parameters:
{!Array.} data: A table data.
{Object=} opt_options: A configuration options.

See:: DEFAULT_OPTIONS

{Object} getColumn()

Gets active column data. Useful while handling 'sort' event.

{
  'index': 'number, column index',
  'name': 'string, column name',
  'type': 'string, column type',
  'dir': 'string, column sort direction'
}

Returns:: {Object} Return active column data.

Event Detail

<inner> sort()

Dispatched when any header column is clicked.

table.addEventListener('sort', function() {
  window.console && console.log(table.getColumn());
});

Classes

Class charts.DataTable