Name Date Size

.. 2012-03-29 11:08:16 100

assets 2012-03-29 09:04:46 7

build.base.properties 2012-01-25 02:00:24 775

build.base.xml 2010-09-16 07:41:40 335

build.body.properties 2012-02-17 07:29:38 834

build.body.xml 2011-12-12 22:08:58 277

build.core.properties 2012-03-24 07:59:16 864

build.core.xml 2011-12-12 22:08:58 277

build.datasource.properties 2011-06-10 20:34:13 825

build.datasource.xml 2010-11-18 06:48:28 336

build.head.properties 2012-02-17 07:30:29 834

build.head.xml 2011-12-12 22:08:58 277

build.message.properties 2012-02-08 01:05:17 823

build.message.xml 2012-02-08 00:18:43 280

build.mutable.properties 2012-01-05 02:31:07 779

build.mutable.xml 2012-01-05 02:31:07 280

build.scroll.properties 2012-01-12 10:00:05 814

build.scroll.xml 2010-10-13 09:04:14 332

build.sort.properties 2012-01-25 20:15:25 848

build.sort.xml 2010-09-16 07:41:40 330

build.widths.properties 2012-01-18 00:28:43 787

build.widths.xml 2012-01-18 00:28:43 332

build.xml 2011-07-09 02:18:39 805

docs 2012-03-21 19:42:16 14

HISTORY.md 2012-01-30 23:51:29 4.6 KiB

js 2012-03-29 11:08:16 12

lang 2012-02-08 01:08:07 6

meta 2012-02-28 09:30:52 3

README.md 2012-01-30 23:46:15 3.8 KiB

tests 2012-03-28 09:00:03 27

README.md

DataTable
=========
Provides a Widget that is responsible for rendering columnar data into a highly
customizable and fully accessible HTML table. The core functionality of
DataTable is to visualize structured data as a table. A variety of Plugins can
then be used to add features to the table such as sorting and scrolling.
As of 3.5.0, the architecture and APIs have changed to the following architecture:
Class composition
---------------------------
* `Y.DataTable.Core`
* Class extension
* APIs and ATTRS for extending Widget
* Responsible for rendering the `<table>`, `<caption>`, and empty `<thead>`, `<tfoot>`, and `<tbody>` as appropriate
* `Y.DataTable.Base`
* Widget generated from `Y.Base.create('datatable', Y.Widget, [Core])`
* Featureless DataTable constructor
* Defaults `headerView` to `Y.DataTable.HeaderView` and `bodyView` to `Y.DataTable.BodyView`
* `Y.DataTable`
* `Y.DataTable.Base` Subclass
* Constructor with all `use()`d features
* Namespace for DT-specific extensions and component classes
* `Y.DataTable.HeaderView`
* `Y.View` subclass
* Renders the content of the `<thead>`
* `Y.DataTable.BodyView`
* `Y.View` subclass
* Renders the content of the `<tbody>`
* `Y.DataTable.ColumnWidths`
* Class extension
* Renders `<colgroup>` and `<col>`s
* Supports `width` configuration in column defs
* Adds `setColumnWidth()` method
* Automatically mixed onto `Y.DataTable`
* `Y.DataTable.Mutable`
* Class extension
* Adds `addRow()`, `addRows()`, `addColumn()`, `modifyColumn()`, etc
* Automatically mixed onto `Y.DataTable`
Events
----------
Is a bubble target for it's ModelList and all configured View instances, so inherits all their events. Events fired directly from DataTable:
* `renderTable` - fired from `renderUI`, default function creates the `<table>` and `<caption>` and fires the other render events
* `renderHead` - fired from `renderTable`'s default function IFF `headerView` is set. Default action calls `render` on the View
* `renderFoot` - (same)
* `renderBody` - (same)
* `addColumn` - From `Y.DataTable.Mutable` extension, fired from the so-named method
* `removeColumn` - (same)
* `modifyColumn` - (same)
* `moveColumn` - (same)
Properties
---------------
* `data` - the ModelList instance
* `head` - the `headerView` instance, populated by `renderHead`'s default function
* `body` - (same)
* `foot` - (same)
* `_tableNode` - Node instance of the `<table>` element
* `_captionNode` - likewise for `<caption>`
* `_colgroupNode` - and for `<colgroup>`, from `Y.DataTable.ColumnWidths`
* `_theadNode` - you guessed it
* `_tbodyNode` - yep, but only one. This might come back to haunt me
* `_tfootNode` - predictably
* `_viewConfig` - base config object (aka prototype) for...
* `_headerConfig` - specific configuration values to pass to the `headerView` constructor
* `_bodyConfig` - specific configuration values to pass to the `bodyView` constructor
* `_footerConfig` - specific configuration values to pass to the `footerView` constructor
Render lifecycle
-----------------------
This is the base rendering; augmented rendering for column widths left out.
1. `renderUI` fires `renderTable`
2. `renderTable`'s `defaultFn` creates the `<table>`
3. if `headerView` is set
1. creates a `<thead>`
2. creates an instance of the `headerClass`, passing the `_headerConfig` object plus the `<thead>` as a "container", and `data` as the "modelList"
3. fires the `renderHead` event, passing the View instance as payload
4. `renderHead`'s `defaultFn` calls the View's `render()` method
4. repeat for `footerView`, then `bodyView`
5. `bindUI` does the usual thing
6. `syncUI` creates the `<caption>` if the attribute is set, and so for the `<table>`'s `summary` attribute
See the user guide (http://yuilibrary.com/datatable/) for more information.