Class Index | File Index

Classes


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 data table options.
Method Summary
Method Attributes Method Name and Description
 
draw(data, opt_options)
Draws the table based on data and opt_options.
 
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());
});

Documentation generated by JsDoc Toolkit 2.4.0 on Tue Jun 14 2016 23:17:05 GMT+0300 (EEST)