undefined: DataTable.HeaderViewDataTable.HeaderView Class
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();
--------------------- | | name | | |--------------- | id | First | Last | ---------------------
Supported properties of the column objects include:
label- The HTML content of the header cell.key- Iflabelis not specified, thekeyis used for content.children- Array of columns to appear below this column in the next row.headerTemplate- Overrides the instance'sCELL_TEMPLATEfor 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.
Item Index
Properties
Methods
_afterColumnsChange
-
e
Handles changes in the source's columns attribute. Redraws the headers.
Parameters:
-
eEventFacadeThe
columnsChangeevent object
_parseColumns
-
data
Translate the input column format into a structure useful for rendering a
<thead>, rows, and cells. The structure of the input 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.
[
{ key: 'id' }, // no nesting
{ key: 'name', children: [
{ key: 'firstName', label: 'First' },
{ key: 'lastName', label: 'Last' } ] }
]
rowspan of 2, the 'name' column appearing in the first row with a
colspan of 2, and the 'firstName' and 'lastName' columns appearing in
the second row, below the 'name' column.
--------------------- | | name | | |--------------- | id | First | Last | ---------------------
Supported properties of the column objects include:
label- The HTML content of the header cell.key- Iflabelis not specified, thekeyis used for content.children- Array of columns to appear below this column in the next row.abbr- The content of the 'abbr' attribute of the<th>headerTemplate- Overrides the instance'sCELL_TEMPLATEfor cells in this column only.
The output structure is basically a simulation of the <thead> structure
with arrays for rows and objects for cells. Column objects have the
following properties added to them:
colspan- Per the<th>attributerowspan- Per the<th>attributeparent- If the column is a child of another column, this points to its parent column_yuid- 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}
replacement in the CELL_TEMPLATE, so you can modify the template and
include other column object properties to populate them.
Parameters:
-
dataObjectArray of column object data
Returns:
bindUI
()
protected
Binds event subscriptions from the UI and the source (if assigned).
destructor
()
protected
Destroys the instance.
getClassName
-
token
Builds a CSS class name from the provided tokens. If the instance is
created with cssPrefix or source in the configuration, it will use this
prefix (the _cssPrefix of the source object) as the base token. This
allows class instances to generate markup with class names that correspond
to the parent class that is consuming them.
Parameters:
-
tokenString multipleAny number of tokens to include in the class name
Returns:
initializer
-
config
Initializes the instance. Reads the following configuration properties:
columns- (REQUIRED) The initial column informationcssPrefix- The base string for classes generated bygetClassNamesource- The object to serve as source of truth for column info
Parameters:
-
configObjectConfiguration data
render
()
HeaderView
chainable
Creates the <thead> Node content by assembling markup generated by
populating the ROW_TEMPLATE and CELL_TEMPLATE templates with content
from the columns property.
Returns:
Properties
_cssPrefix
String
protected
The base token for classes created with the getClassName method.
Default: 'yui3-table'
_eventHandles
Object
protected
Holds the event subscriptions needing to be detached when the instance is
destroy()ed.
Default: undefined (initially unset)
CELL_TEMPLATE
HTML
Template used to create the table's header cell markup. Override this to customize how these cells' markup is created.
Default: '<th id="{_yuid}" {abbr} colspan="{_colspan}" rowspan="{_rowspan}" class="{className}">{content}</th>'
columns
Array
The data representation of the header rows to render. This is assigned by
parsing the columns configuration array, and is used by the render()
method.
Default: (initially unset)
ROW_TEMPLATE
HTML
Template used to create the table's header row markup. Override this to customize the row markup.
Default: '<tr>{content}</tr>'
source
Object
The object that serves as the source of truth for column and row data.
This property is assigned at instantiation from the source property of
the configuration object passed to the constructor.
Default: (initially unset)