API Docs for:
Show:

datatable-head Module

View class responsible for rendering the <thead> section of a table. Used as the default headerView for Y.DataTable.Base and Y.DataTable classes.

Translates the provided array of column configuration objects into a rendered <thead> based on the data in those objects.

The structure of the column data is expected to be a single array of objects, where each object corresponds to a <th>. Those objects may contain a children property containing a similarly structured array to indicate the nested cells should be grouped under the parent column's colspan in a separate row of header cells. E.g.


new Y.DataTable.HeaderView({
  container: tableNode,
  columns: [
    { key: 'id' }, // no nesting
    { key: 'name', children: [
      { key: 'firstName', label: 'First' },
      { key: 'lastName',  label: 'Last' } ] }
  ]
}).render();
This would translate to the following visualization:
---------------------
|    |     name     |
|    |---------------
| id | First | Last |
---------------------

Supported properties of the column objects include:

  • label - The HTML content of the header cell.
  • key - If label is not specified, the key is used for content.
  • children - Array of columns to appear below this column in the next row.
  • headerTemplate - Overrides the instance's CELL_TEMPLATE for cells in this column only.
  • abbr - The content of the 'abbr' attribute of the <th>
  • className - Adds this string of CSS classes to the column header

Through the life of instantiation and rendering, the column objects will have the following properties added to them:

  • _colspan - To supply the <th> attribute
  • _rowspan - To supply the <th> attribute
  • _parent - If the column is a child of another column, this points to its parent column
  • _yuid - (Added by DataTable) A unique YUI generated id used as the <th>'s 'id' for reference in the data <td>'s 'headers' attribute.

The column object is also used to provide values for {placeholder} tokens in the instance's CELL_TEMPLATE, so you can modify the template and include other column object properties to populate them.

This module provides the following classes: