Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge branch 'master' of github.com:lsmith/yui3

  • Loading branch information...
commit 089645941ba506392738fec4128115392aba7716 2 parents e08a0ec + fa74b1b
@lsmith lsmith authored
Showing with 1,071 additions and 540 deletions.
  1. +26 −15 build/datatable-body/datatable-body-debug.js
  2. +1 −1  build/datatable-body/datatable-body-min.js
  3. +26 −15 build/datatable-body/datatable-body.js
  4. +7 −0 build/datatable-core/datatable-core-debug.js
  5. +7 −0 build/datatable-core/datatable-core.js
  6. +25 −24 build/datatable-head/datatable-head-debug.js
  7. +1 −1  build/datatable-head/datatable-head-min.js
  8. +25 −24 build/datatable-head/datatable-head.js
  9. +5 −1 build/datatable-scroll/datatable-scroll-debug.js
  10. +1 −1  build/datatable-scroll/datatable-scroll-min.js
  11. +5 −1 build/datatable-scroll/datatable-scroll.js
  12. +4 −13 src/datatable/docs/datatable-dsio.mustache
  13. +57 −52 src/datatable/docs/datatable-formatting.mustache
  14. +15 −5 src/datatable/docs/datatable-nestedcols.mustache
  15. +35 −36 src/datatable/docs/datatable-scroll.mustache
  16. +26 −14 src/datatable/docs/datatable-sort.mustache
  17. +634 −224 src/datatable/docs/index.mustache
  18. +24 −11 src/datatable/docs/partials/datatable-dsio-source.mustache
  19. +6 −9 src/datatable/docs/partials/datatable-formatting-source.mustache
  20. +6 −2 src/datatable/docs/partials/datatable-nestedcols-source.mustache
  21. +26 −31 src/datatable/docs/partials/datatable-scroll-source.mustache
  22. +25 −3 src/datatable/docs/partials/datatable-sort-source.mustache
  23. +26 −15 src/datatable/js/body.js
  24. +7 −0 src/datatable/js/core.js
  25. +25 −24 src/datatable/js/head.js
  26. +5 −1 src/datatable/js/scroll.js
  27. +9 −1 src/panel/docs/partials/panel-form-css-source.mustache
  28. +9 −13 src/panel/docs/partials/panel-form-js-source.mustache
  29. +3 −3 src/yui/docs/partials/modules.mustache
View
41 build/datatable-body/datatable-body-debug.js
@@ -46,6 +46,8 @@ Column `formatter`s are passed an object (`o`) with the following properties:
* `className` - Initially empty string to allow `formatter`s to add CSS
classes to the cell's `<td>`.
* `rowindex` - The zero-based row number.
+ * `rowClass` - Initially empty string to allow `formatter`s to add CSS
+ classes to the cell's containing row `<tr>`.
They may return a value or update `o.value` to assign specific HTML content. A
returned value has higher precedence.
@@ -129,10 +131,10 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
@property ROW_TEMPLATE
@type {HTML}
- @default '<tr id="{clientId}" class="{rowClasses}">{content}</tr>'
+ @default '<tr id="{clientId}" class="{rowClass}">{content}</tr>'
**/
ROW_TEMPLATE :
- '<tr role="row" id="{rowId}" class="{rowClasses}">' +
+ '<tr role="row" id="{rowId}" class="{rowClass}">' +
'{content}' +
'</tr>',
@@ -258,6 +260,8 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
* `className` - Initially empty string to allow `formatter`s to add CSS
classes to the cell's `<td>`.
* `rowindex` - The zero-based row number.
+ * `rowClass` - Initially empty string to allow `formatter`s to add CSS
+ classes to the cell's containing row `<tr>`.
They may return a value or update `o.value` to assign specific HTML
content. A returned value has higher precedence.
@@ -472,7 +476,7 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
supplemented by other template values to the instance's `_rowTemplate` (see
`_createRowTemplate`). The generated string is then returned.
- The data from Model's attributes is fetched by `getAttrs` and this data
+ The data from Model's attributes is fetched by `toJSON` and this data
object is appended with other properties to supply values to {placeholders}
in the template. For a template generated from a Model with 'foo' and 'bar'
attributes, the data object would end up with the following properties
@@ -480,15 +484,16 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
* `clientID` - From Model, used the assign the `<tr>`'s 'id' attribute.
* `foo` - The value to populate the 'foo' column cell content. This
- value will be the result of the column's `formatter` if assigned, and
- will default from '' or `undefined` to the value of the column's
- `emptyCellValue` if assigned.
+ value will be the value stored in the Model's `foo` attribute, or the
+ result of the column's `formatter` if assigned. If the value is '' or
+ `undefined`, and the column's `emptyCellValue` is assigned, that value
+ will be used.
* `bar` - Same for the 'bar' column cell content.
* `foo-className` - String of CSS classes to apply to the `<td>`.
* `bar-className` - Same.
- * `rowClasses` - String of CSS classes to apply to the `<tr>`. This will
- default to the odd/even class per the specified index, but can be
- accessed and ammended by any column formatter via `o.data.rowClasses`.
+ * `rowClass` - String of CSS classes to apply to the `<tr>`. This
+ will be the odd/even class per the specified index plus any additional
+ classes assigned by column formatters (via `o.rowClass`).
Because this object is available to formatters, any additional properties
can be added to fill in custom {placeholders} in the `_rowTemplate`.
@@ -502,8 +507,8 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
_createRowHTML: function (model, index) {
var data = model.toJSON(),
values = {
- rowId: model.get('clientId'),
- rowClasses: (index % 2) ? this.CLASS_ODD : this.CLASS_EVEN
+ rowId : model.get('clientId'),
+ rowClass: (index % 2) ? this.CLASS_ODD : this.CLASS_EVEN
},
source = this.source || this,
columns = this.columns,
@@ -523,12 +528,15 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
column : col,
record : model,
className: '',
+ rowClass : '',
rowindex : index
};
if (typeof col.formatter === 'string') {
- // TODO: look for known formatters by string name
- value = fromTemplate(col.formatter, formatterData);
+ if (value !== undefined) {
+ // TODO: look for known formatters by string name
+ value = fromTemplate(col.formatter, formatterData);
+ }
} else {
// Formatters can either return a value
value = col.formatter.call(source, formatterData);
@@ -539,6 +547,7 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
}
values[token + '-className'] = formatterData.className;
+ values.rowClass += ' ' + formatterData.rowClass;
}
}
@@ -547,6 +556,8 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
}
values[token] = col.allowHTML ? value : htmlEscape(value);
+
+ values.rowClass = values.rowClass.replace(/\s+/g, ' ');
}
return fromTemplate(this._rowTemplate, values);
@@ -575,7 +586,7 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
tokenValues = {
content : '{' + token + '}',
- headers : col.headers.join(' '),
+ headers : (col._headers || []).join(' '),
className: this.getClassName('col', token) + ' ' +
(col.className || '') + ' ' +
this.getClassName('cell') +
@@ -584,7 +595,7 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
if (col.nodeFormatter) {
// Defer all node decoration to the formatter
- tokenValues.content = '';
+ tokenValues.content = '';
}
html += fromTemplate(cellTemplate, tokenValues);
View
2  build/datatable-body/datatable-body-min.js
@@ -1 +1 @@
-YUI.add("datatable-body",function(a){var e=a.Lang,f=e.isArray,j=e.sub,i=a.Escape.html,c=a.Array,g=a.bind,h=a.Object,b=a.ClassNameManager,d=b.getClassName;a.namespace("DataTable").BodyView=a.Base.create("tableBody",a.View,[],{CELL_TEMPLATE:'<td role="gridcell" headers="{headers}" class="{className}">{content}</td>',ROW_TEMPLATE:'<tr role="row" id="{rowId}" class="{rowClasses}">'+"{content}"+"</tr>",getCell:function(n,l){var k=this.get("container"),m;if(k){m=k.getDOMNode().rows[+n];m&&(m=m.cells[+l]);}return a.one(m);},getClassName:function(){var k=c(arguments);k.unshift(this._cssPrefix);k.push(true);return d.apply(b,k);},getRow:function(l){var k=this.get("container");return a.one(k&&k.getDOMNode().rows[+l]);},render:function(){var k=this.get("container"),m=this.get("modelList"),l=this.columns;this._createRowTemplate(l);if(k&&m){k.setContent(this._createDataHTML(l));this._applyNodeFormatters(k,l);}this.bindUI();return this;},_afterColumnsChange:function(k){this.columns=this._parseColumns(k.newVal);this.render();},_afterDataChange:function(k){this.render();},_applyNodeFormatters:function(q,l){var k=this.source,o=this.get("modelList"),n=[],s=q.getDOMNode(),m="."+this.getClassName("liner"),p,r;for(p=0,r=l.length;p<r;++p){if(l[p].nodeFormatter){n.push(p);}}if(o&&n.length){o.each(function(x,y){var v={data:x.toJSON(),record:x,rowindex:y},C=s.rows[y],w,z,u,B,A,t;if(C){for(w=0,z=n.length;w<z;++w){A=a.one(C.cells[n[w]]);if(A){u=v.column=l[n[w]];B=u.key||u._yuid;v.value=x.get(B);v.td=A;v.cell=A.one(m)||A;t=u.nodeFormatter.call(k,v);if(t===false){A.destroy(true);}}}}});}},bindUI:function(){var k=this._eventHandles,l=this.get("modelList");if(this.source&&!k.columnsChange){k.columnsChange=this.source.after("columnsChange",g("_afterColumnsChange",this));}if(!k.dataChange){k.dataChange=l.after(["*:change","add","remove","reset"],g("_afterDataChange",this));}},_cssPrefix:b.getClassName("table"),_createDataHTML:function(l){var m=this.get("modelList"),k="";if(m){m.each(function(o,n){k+=this._createRowHTML(o,n);},this);}return k;},_createRowHTML:function(r,s){var p=r.toJSON(),v={rowId:r.get("clientId"),rowClasses:(s%2)?this.CLASS_ODD:this.CLASS_EVEN},k=this.source||this,n=this.columns,q,t,l,m,u,o;for(q=0,t=n.length;q<t;++q){l=n[q];u=p[l.key];m=l._id;v[m+"-className"]="";if(l.formatter){o={value:u,data:p,column:l,record:r,className:"",rowindex:s};if(typeof l.formatter==="string"){u=j(l.formatter,o);}else{u=l.formatter.call(k,o);if(u===undefined){u=o.value;}v[m+"-className"]=o.className;}}if(u===undefined||u===""){u=l.emptyCellValue||"";}v[m]=l.allowHTML?u:i(u);}return j(this._rowTemplate,v);},_createRowTemplate:function(m){var p="",s=this.CELL_TEMPLATE,o,q,l,r,n,k;for(o=0,q=m.length;o<q;++o){l=m[o];r=l.key;n=l._id;k={content:"{"+n+"}",headers:l.headers.join(" "),className:this.getClassName("col",n)+" "+(l.className||"")+" "+this.getClassName("cell")+" {"+n+"-className}"};if(l.nodeFormatter){k.content="";}p+=j(s,k);}this._rowTemplate=j(this.ROW_TEMPLATE,{content:p});},destructor:function(){(new a.EventHandle(h.values(this._eventHandles))).detach();},initializer:function(k){var l=k.cssPrefix||(k.source||{}).cssPrefix;this.source=k.source;this.columns=this._parseColumns(k.columns);this._eventHandles={};if(l){this._cssPrefix=l;}this.CLASS_ODD=this.getClassName("odd");this.CLASS_EVEN=this.getClassName("even");},_parseColumns:function(o,n){var l,m,k;n||(n=[]);if(f(o)&&o.length){for(m=0,k=o.length;m<k;++m){l=o[m];if(typeof l==="string"){l={key:l};}if(l.key||l.formatter||l.nodeFormatter){l.index=n.length;n.push(l);}else{if(l.children){this._parseColumns(l.children,n);}}}}return n;}});},"@VERSION@",{requires:["datatable-core","view","classnamemanager"]});
+YUI.add("datatable-body",function(a){var e=a.Lang,f=e.isArray,j=e.sub,i=a.Escape.html,c=a.Array,g=a.bind,h=a.Object,b=a.ClassNameManager,d=b.getClassName;a.namespace("DataTable").BodyView=a.Base.create("tableBody",a.View,[],{CELL_TEMPLATE:'<td role="gridcell" headers="{headers}" class="{className}">{content}</td>',ROW_TEMPLATE:'<tr role="row" id="{rowId}" class="{rowClass}">'+"{content}"+"</tr>",getCell:function(n,l){var k=this.get("container"),m;if(k){m=k.getDOMNode().rows[+n];m&&(m=m.cells[+l]);}return a.one(m);},getClassName:function(){var k=c(arguments);k.unshift(this._cssPrefix);k.push(true);return d.apply(b,k);},getRow:function(l){var k=this.get("container");return a.one(k&&k.getDOMNode().rows[+l]);},render:function(){var k=this.get("container"),m=this.get("modelList"),l=this.columns;this._createRowTemplate(l);if(k&&m){k.setContent(this._createDataHTML(l));this._applyNodeFormatters(k,l);}this.bindUI();return this;},_afterColumnsChange:function(k){this.columns=this._parseColumns(k.newVal);this.render();},_afterDataChange:function(k){this.render();},_applyNodeFormatters:function(q,l){var k=this.source,o=this.get("modelList"),n=[],s=q.getDOMNode(),m="."+this.getClassName("liner"),p,r;for(p=0,r=l.length;p<r;++p){if(l[p].nodeFormatter){n.push(p);}}if(o&&n.length){o.each(function(x,y){var v={data:x.toJSON(),record:x,rowindex:y},C=s.rows[y],w,z,u,B,A,t;if(C){for(w=0,z=n.length;w<z;++w){A=a.one(C.cells[n[w]]);if(A){u=v.column=l[n[w]];B=u.key||u._yuid;v.value=x.get(B);v.td=A;v.cell=A.one(m)||A;t=u.nodeFormatter.call(k,v);if(t===false){A.destroy(true);}}}}});}},bindUI:function(){var k=this._eventHandles,l=this.get("modelList");if(this.source&&!k.columnsChange){k.columnsChange=this.source.after("columnsChange",g("_afterColumnsChange",this));}if(!k.dataChange){k.dataChange=l.after(["*:change","add","remove","reset"],g("_afterDataChange",this));}},_cssPrefix:b.getClassName("table"),_createDataHTML:function(l){var m=this.get("modelList"),k="";if(m){m.each(function(o,n){k+=this._createRowHTML(o,n);},this);}return k;},_createRowHTML:function(r,s){var p=r.toJSON(),v={rowId:r.get("clientId"),rowClass:(s%2)?this.CLASS_ODD:this.CLASS_EVEN},k=this.source||this,n=this.columns,q,t,l,m,u,o;for(q=0,t=n.length;q<t;++q){l=n[q];u=p[l.key];m=l._id;v[m+"-className"]="";if(l.formatter){o={value:u,data:p,column:l,record:r,className:"",rowClass:"",rowindex:s};if(typeof l.formatter==="string"){if(u!==undefined){u=j(l.formatter,o);}}else{u=l.formatter.call(k,o);if(u===undefined){u=o.value;}v[m+"-className"]=o.className;v.rowClass+=" "+o.rowClass;}}if(u===undefined||u===""){u=l.emptyCellValue||"";}v[m]=l.allowHTML?u:i(u);v.rowClass=v.rowClass.replace(/\s+/g," ");}return j(this._rowTemplate,v);},_createRowTemplate:function(m){var p="",s=this.CELL_TEMPLATE,o,q,l,r,n,k;for(o=0,q=m.length;o<q;++o){l=m[o];r=l.key;n=l._id;k={content:"{"+n+"}",headers:(l._headers||[]).join(" "),className:this.getClassName("col",n)+" "+(l.className||"")+" "+this.getClassName("cell")+" {"+n+"-className}"};if(l.nodeFormatter){k.content="";}p+=j(s,k);}this._rowTemplate=j(this.ROW_TEMPLATE,{content:p});},destructor:function(){(new a.EventHandle(h.values(this._eventHandles))).detach();},initializer:function(k){var l=k.cssPrefix||(k.source||{}).cssPrefix;this.source=k.source;this.columns=this._parseColumns(k.columns);this._eventHandles={};if(l){this._cssPrefix=l;}this.CLASS_ODD=this.getClassName("odd");this.CLASS_EVEN=this.getClassName("even");},_parseColumns:function(o,n){var l,m,k;n||(n=[]);if(f(o)&&o.length){for(m=0,k=o.length;m<k;++m){l=o[m];if(typeof l==="string"){l={key:l};}if(l.key||l.formatter||l.nodeFormatter){l.index=n.length;n.push(l);}else{if(l.children){this._parseColumns(l.children,n);}}}}return n;}});},"@VERSION@",{requires:["datatable-core","view","classnamemanager"]});
View
41 build/datatable-body/datatable-body.js
@@ -46,6 +46,8 @@ Column `formatter`s are passed an object (`o`) with the following properties:
* `className` - Initially empty string to allow `formatter`s to add CSS
classes to the cell's `<td>`.
* `rowindex` - The zero-based row number.
+ * `rowClass` - Initially empty string to allow `formatter`s to add CSS
+ classes to the cell's containing row `<tr>`.
They may return a value or update `o.value` to assign specific HTML content. A
returned value has higher precedence.
@@ -129,10 +131,10 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
@property ROW_TEMPLATE
@type {HTML}
- @default '<tr id="{clientId}" class="{rowClasses}">{content}</tr>'
+ @default '<tr id="{clientId}" class="{rowClass}">{content}</tr>'
**/
ROW_TEMPLATE :
- '<tr role="row" id="{rowId}" class="{rowClasses}">' +
+ '<tr role="row" id="{rowId}" class="{rowClass}">' +
'{content}' +
'</tr>',
@@ -258,6 +260,8 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
* `className` - Initially empty string to allow `formatter`s to add CSS
classes to the cell's `<td>`.
* `rowindex` - The zero-based row number.
+ * `rowClass` - Initially empty string to allow `formatter`s to add CSS
+ classes to the cell's containing row `<tr>`.
They may return a value or update `o.value` to assign specific HTML
content. A returned value has higher precedence.
@@ -472,7 +476,7 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
supplemented by other template values to the instance's `_rowTemplate` (see
`_createRowTemplate`). The generated string is then returned.
- The data from Model's attributes is fetched by `getAttrs` and this data
+ The data from Model's attributes is fetched by `toJSON` and this data
object is appended with other properties to supply values to {placeholders}
in the template. For a template generated from a Model with 'foo' and 'bar'
attributes, the data object would end up with the following properties
@@ -480,15 +484,16 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
* `clientID` - From Model, used the assign the `<tr>`'s 'id' attribute.
* `foo` - The value to populate the 'foo' column cell content. This
- value will be the result of the column's `formatter` if assigned, and
- will default from '' or `undefined` to the value of the column's
- `emptyCellValue` if assigned.
+ value will be the value stored in the Model's `foo` attribute, or the
+ result of the column's `formatter` if assigned. If the value is '' or
+ `undefined`, and the column's `emptyCellValue` is assigned, that value
+ will be used.
* `bar` - Same for the 'bar' column cell content.
* `foo-className` - String of CSS classes to apply to the `<td>`.
* `bar-className` - Same.
- * `rowClasses` - String of CSS classes to apply to the `<tr>`. This will
- default to the odd/even class per the specified index, but can be
- accessed and ammended by any column formatter via `o.data.rowClasses`.
+ * `rowClass` - String of CSS classes to apply to the `<tr>`. This
+ will be the odd/even class per the specified index plus any additional
+ classes assigned by column formatters (via `o.rowClass`).
Because this object is available to formatters, any additional properties
can be added to fill in custom {placeholders} in the `_rowTemplate`.
@@ -502,8 +507,8 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
_createRowHTML: function (model, index) {
var data = model.toJSON(),
values = {
- rowId: model.get('clientId'),
- rowClasses: (index % 2) ? this.CLASS_ODD : this.CLASS_EVEN
+ rowId : model.get('clientId'),
+ rowClass: (index % 2) ? this.CLASS_ODD : this.CLASS_EVEN
},
source = this.source || this,
columns = this.columns,
@@ -523,12 +528,15 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
column : col,
record : model,
className: '',
+ rowClass : '',
rowindex : index
};
if (typeof col.formatter === 'string') {
- // TODO: look for known formatters by string name
- value = fromTemplate(col.formatter, formatterData);
+ if (value !== undefined) {
+ // TODO: look for known formatters by string name
+ value = fromTemplate(col.formatter, formatterData);
+ }
} else {
// Formatters can either return a value
value = col.formatter.call(source, formatterData);
@@ -539,6 +547,7 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
}
values[token + '-className'] = formatterData.className;
+ values.rowClass += ' ' + formatterData.rowClass;
}
}
@@ -547,6 +556,8 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
}
values[token] = col.allowHTML ? value : htmlEscape(value);
+
+ values.rowClass = values.rowClass.replace(/\s+/g, ' ');
}
return fromTemplate(this._rowTemplate, values);
@@ -575,7 +586,7 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
tokenValues = {
content : '{' + token + '}',
- headers : col.headers.join(' '),
+ headers : (col._headers || []).join(' '),
className: this.getClassName('col', token) + ' ' +
(col.className || '') + ' ' +
this.getClassName('cell') +
@@ -584,7 +595,7 @@ Y.namespace('DataTable').BodyView = Y.Base.create('tableBody', Y.View, [], {
if (col.nodeFormatter) {
// Defer all node decoration to the formatter
- tokenValues.content = '';
+ tokenValues.content = '';
}
html += fromTemplate(cellTemplate, tokenValues);
View
7 build/datatable-core/datatable-core-debug.js
@@ -1063,6 +1063,13 @@ Y.mix(Table.prototype, {
has a `children` property, it will be iterated, adding any nested column
keys to the returned map. There is no limit to the levels of nesting.
+ All columns are assigned a `_yuid` stamp and `_id` property corresponding
+ to the column's configured `name` or `key` property. If the same `name` or
+ `key` appears in multiple columns, subsequent appearances will have their
+ `_id` appended with an incrementing number (e.g. if column "foo" is
+ included in the `columns` attribute twice, the first will get `_id` of
+ "foo", and the second an `_id` of "foo1").
+
The result is an object map with column keys as the property name and the
corresponding column object as the associated value.
View
7 build/datatable-core/datatable-core.js
@@ -1063,6 +1063,13 @@ Y.mix(Table.prototype, {
has a `children` property, it will be iterated, adding any nested column
keys to the returned map. There is no limit to the levels of nesting.
+ All columns are assigned a `_yuid` stamp and `_id` property corresponding
+ to the column's configured `name` or `key` property. If the same `name` or
+ `key` appears in multiple columns, subsequent appearances will have their
+ `_id` appended with an incrementing number (e.g. if column "foo" is
+ included in the `columns` attribute twice, the first will get `_id` of
+ "foo", and the second an `_id` of "foo1").
+
The result is an object map with column keys as the property name and the
corresponding column object as the associated value.
View
49 build/datatable-head/datatable-head-debug.js
@@ -38,21 +38,22 @@ This would translate to the following visualization:
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.
- * `abbr` - The content of the 'abbr' attribute of the `<th>`
+ * `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.
+ * `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
+ * `_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` - A unique YUI generated id used as the `<th>`'s 'id' for
- reference in the data `<td>`'s 'headers' attribute.
+ * `_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
@@ -80,10 +81,10 @@ Y.namespace('DataTable').HeaderView = Y.Base.create('tableHeader', Y.View, [], {
@property CELL_TEMPLATE
@type {HTML}
- @default '<th id="{_yuid}" abbr="{abbr} colspan="{colspan}" rowspan="{rowspan}" class="{className}" {headers}>{content}</th>'
+ @default '<th id="{_yuid}" abbr="{abbr} colspan="{_colspan}" rowspan="{_rowspan}" class="{className}" role="columnheader" {_headers}>{content}</th>'
**/
CELL_TEMPLATE :
- '<th id="{_yuid}" abbr="{abbr}" colspan="{colspan}" rowspan="{rowspan}" class="{className}" scope="col" role="columnheader" {headers}>{content}</th>',
+ '<th id="{_yuid}" abbr="{abbr}" colspan="{_colspan}" rowspan="{_rowspan}" class="{className}" role="columnheader" {_headers}>{content}</th>',
/**
The data representation of the header rows to render. This is assigned by
@@ -156,8 +157,8 @@ Y.namespace('DataTable').HeaderView = Y.Base.create('tableHeader', Y.View, [], {
columns = this.columns,
defaults = {
abbr: '',
- colspan: 1,
- rowspan: 1
+ _colspan: 1,
+ _rowspan: 1
},
i, len, j, jlen, col, html, content, values;
@@ -189,9 +190,9 @@ Y.namespace('DataTable').HeaderView = Y.Base.create('tableHeader', Y.View, [], {
' ' + this.getClassName('col', col._id);
}
- if (col.parent) {
- values.headers =
- 'headers="' + col.parent.headers.join(' ') + '"';
+ if (col._parent) {
+ values._headers =
+ 'headers="' + col._parent._headers.join(' ') + '"';
}
content += fromTemplate(this.CELL_TEMPLATE, values);
@@ -387,7 +388,7 @@ Y.namespace('DataTable').HeaderView = Y.Base.create('tableHeader', Y.View, [], {
// break to let the while loop process the children
break;
} else {
- col.colspan = 1;
+ col._colspan = 1;
}
}
@@ -397,15 +398,15 @@ Y.namespace('DataTable').HeaderView = Y.Base.create('tableHeader', Y.View, [], {
entry = stack[stack.length - 2];
parent = entry[0][entry[1]];
- parent.colspan = 0;
+ parent._colspan = 0;
for (i = 0, len = row.length; i < len; ++i) {
// Can't use .length because in 3+ rows, colspan
// needs to aggregate the colspans of children
- parent.colspan += row[i].colspan;
+ parent._colspan += row[i]._colspan;
// Assign the parent column for ease of navigation
- row[i].parent = parent;
+ row[i]._parent = parent;
}
}
stack.pop();
@@ -433,12 +434,12 @@ Y.namespace('DataTable').HeaderView = Y.Base.create('tableHeader', Y.View, [], {
entry[1] = i;
// collect the IDs of parent cols
- col.headers = [col._yuid];
+ col._headers = [col._yuid];
for (j = stack.length - 2; j >= 0; --j) {
parent = stack[j][0][stack[j][1]];
- col.headers.unshift(parent._yuid);
+ col._headers.unshift(parent._yuid);
}
if (children && children.length) {
@@ -448,7 +449,7 @@ Y.namespace('DataTable').HeaderView = Y.Base.create('tableHeader', Y.View, [], {
stack.push([children, -1]);
break;
} else {
- col.rowspan = rowSpan - stack.length + 1;
+ col._rowspan = rowSpan - stack.length + 1;
}
}
View
2  build/datatable-head/datatable-head-min.js
@@ -1 +1 @@
-YUI.add("datatable-head",function(g){var d=g.Lang,f=d.sub,a=d.isArray,b=g.Array,e=g.ClassNameManager,c=e.getClassName;g.namespace("DataTable").HeaderView=g.Base.create("tableHeader",g.View,[],{CELL_TEMPLATE:'<th id="{_yuid}" abbr="{abbr}" colspan="{colspan}" rowspan="{rowspan}" class="{className}" scope="col" role="columnheader" {headers}>{content}</th>',ROW_TEMPLATE:'<tr role="row">{content}</tr>',getClassName:function(){var h=b(arguments);h.unshift(this._cssPrefix);h.push(true);return c.apply(e,h);},render:function(){var r=this.get("container"),k=this.columns,l={abbr:"",colspan:1,rowspan:1},n,p,m,t,h,o,q,s;if(r&&k){o="";if(k.length){for(n=0,p=k.length;n<p;++n){q="";for(m=0,t=k[n].length;m<t;++m){h=k[n][m];s=g.merge(l,h,{className:this.getClassName("header"),content:h.label||h.key||("Column "+(m+1)),headers:""});if(h.className){s.className+=" "+h.className;}if(h._id){s.className+=" "+this.getClassName("col",h._id);}if(h.parent){s.headers='headers="'+h.parent.headers.join(" ")+'"';}q+=f(this.CELL_TEMPLATE,s);}o+=f(this.ROW_TEMPLATE,{content:q});}}r.setContent(o);}this.bindUI();return this;},_cssPrefix:e.getClassName("table"),_afterColumnsChange:function(h){this.columns=this._parseColumns(h.newVal);this.render();},bindUI:function(){if(this.source&&!this._eventHandles.columnsChange){this._eventHandles.columnsChange=this.source.after("columnsChange",g.bind("_afterColumnsChange",this));}},destructor:function(){(new g.EventHandle(g.Object.values(this._eventHandles))).detach();},initializer:function(h){h||(h={});var i=h.cssPrefix||(h.source||{}).cssPrefix;this.source=h.source;this.columns=this._parseColumns(h.columns);this._eventHandles=[];if(i){this._cssPrefix=i;}},_parseColumns:function(o){var l=[],r=[],q=1,t,u,k,h,s,n,p,m;if(a(o)&&o.length){r.push([o,-1]);while(r.length){t=r[r.length-1];u=t[0];n=t[1]+1;for(p=u.length;n<p;++n){k=u[n];h=k.children;g.stamp(k);if(a(h)&&h.length){r.push([h,-1]);t[1]=n;q=Math.max(q,r.length);break;}else{k.colspan=1;}}if(n>=p){if(r.length>1){t=r[r.length-2];s=t[0][t[1]];s.colspan=0;for(n=0,p=u.length;n<p;++n){s.colspan+=u[n].colspan;u[n].parent=s;}}r.pop();}}for(n=0;n<q;++n){l.push([]);}r.push([o,-1]);while(r.length){t=r[r.length-1];u=t[0];n=t[1]+1;for(p=u.length;n<p;++n){k=u[n];h=k.children;l[r.length-1].push(k);t[1]=n;k.headers=[k._yuid];for(m=r.length-2;m>=0;--m){s=r[m][0][r[m][1]];k.headers.unshift(s._yuid);}if(h&&h.length){r.push([h,-1]);break;}else{k.rowspan=q-r.length+1;}}if(n>=p){r.pop();}}}return l;}});},"@VERSION@",{requires:["datatable-core","view","classnamemanager"]});
+YUI.add("datatable-head",function(g){var d=g.Lang,f=d.sub,a=d.isArray,b=g.Array,e=g.ClassNameManager,c=e.getClassName;g.namespace("DataTable").HeaderView=g.Base.create("tableHeader",g.View,[],{CELL_TEMPLATE:'<th id="{_yuid}" abbr="{abbr}" colspan="{_colspan}" rowspan="{_rowspan}" class="{className}" role="columnheader" {_headers}>{content}</th>',ROW_TEMPLATE:'<tr role="row">{content}</tr>',getClassName:function(){var h=b(arguments);h.unshift(this._cssPrefix);h.push(true);return c.apply(e,h);},render:function(){var r=this.get("container"),k=this.columns,l={abbr:"",_colspan:1,_rowspan:1},n,p,m,t,h,o,q,s;if(r&&k){o="";if(k.length){for(n=0,p=k.length;n<p;++n){q="";for(m=0,t=k[n].length;m<t;++m){h=k[n][m];s=g.merge(l,h,{className:this.getClassName("header"),content:h.label||h.key||("Column "+(m+1)),headers:""});if(h.className){s.className+=" "+h.className;}if(h._id){s.className+=" "+this.getClassName("col",h._id);}if(h._parent){s._headers='headers="'+h._parent._headers.join(" ")+'"';}q+=f(this.CELL_TEMPLATE,s);}o+=f(this.ROW_TEMPLATE,{content:q});}}r.setContent(o);}this.bindUI();return this;},_cssPrefix:e.getClassName("table"),_afterColumnsChange:function(h){this.columns=this._parseColumns(h.newVal);this.render();},bindUI:function(){if(this.source&&!this._eventHandles.columnsChange){this._eventHandles.columnsChange=this.source.after("columnsChange",g.bind("_afterColumnsChange",this));}},destructor:function(){(new g.EventHandle(g.Object.values(this._eventHandles))).detach();},initializer:function(h){h||(h={});var i=h.cssPrefix||(h.source||{}).cssPrefix;this.source=h.source;this.columns=this._parseColumns(h.columns);this._eventHandles=[];if(i){this._cssPrefix=i;}},_parseColumns:function(o){var l=[],r=[],q=1,t,u,k,h,s,n,p,m;if(a(o)&&o.length){r.push([o,-1]);while(r.length){t=r[r.length-1];u=t[0];n=t[1]+1;for(p=u.length;n<p;++n){k=u[n];h=k.children;g.stamp(k);if(a(h)&&h.length){r.push([h,-1]);t[1]=n;q=Math.max(q,r.length);break;}else{k._colspan=1;}}if(n>=p){if(r.length>1){t=r[r.length-2];s=t[0][t[1]];s._colspan=0;for(n=0,p=u.length;n<p;++n){s._colspan+=u[n]._colspan;u[n]._parent=s;}}r.pop();}}for(n=0;n<q;++n){l.push([]);}r.push([o,-1]);while(r.length){t=r[r.length-1];u=t[0];n=t[1]+1;for(p=u.length;n<p;++n){k=u[n];h=k.children;l[r.length-1].push(k);t[1]=n;k._headers=[k._yuid];for(m=r.length-2;m>=0;--m){s=r[m][0][r[m][1]];k._headers.unshift(s._yuid);}if(h&&h.length){r.push([h,-1]);break;}else{k._rowspan=q-r.length+1;}}if(n>=p){r.pop();}}}return l;}});},"@VERSION@",{requires:["datatable-core","view","classnamemanager"]});
View
49 build/datatable-head/datatable-head.js
@@ -38,21 +38,22 @@ This would translate to the following visualization:
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.
- * `abbr` - The content of the 'abbr' attribute of the `<th>`
+ * `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.
+ * `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
+ * `_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` - A unique YUI generated id used as the `<th>`'s 'id' for
- reference in the data `<td>`'s 'headers' attribute.
+ * `_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
@@ -80,10 +81,10 @@ Y.namespace('DataTable').HeaderView = Y.Base.create('tableHeader', Y.View, [], {
@property CELL_TEMPLATE
@type {HTML}
- @default '<th id="{_yuid}" abbr="{abbr} colspan="{colspan}" rowspan="{rowspan}" class="{className}" {headers}>{content}</th>'
+ @default '<th id="{_yuid}" abbr="{abbr} colspan="{_colspan}" rowspan="{_rowspan}" class="{className}" role="columnheader" {_headers}>{content}</th>'
**/
CELL_TEMPLATE :
- '<th id="{_yuid}" abbr="{abbr}" colspan="{colspan}" rowspan="{rowspan}" class="{className}" scope="col" role="columnheader" {headers}>{content}</th>',
+ '<th id="{_yuid}" abbr="{abbr}" colspan="{_colspan}" rowspan="{_rowspan}" class="{className}" role="columnheader" {_headers}>{content}</th>',
/**
The data representation of the header rows to render. This is assigned by
@@ -156,8 +157,8 @@ Y.namespace('DataTable').HeaderView = Y.Base.create('tableHeader', Y.View, [], {
columns = this.columns,
defaults = {
abbr: '',
- colspan: 1,
- rowspan: 1
+ _colspan: 1,
+ _rowspan: 1
},
i, len, j, jlen, col, html, content, values;
@@ -189,9 +190,9 @@ Y.namespace('DataTable').HeaderView = Y.Base.create('tableHeader', Y.View, [], {
' ' + this.getClassName('col', col._id);
}
- if (col.parent) {
- values.headers =
- 'headers="' + col.parent.headers.join(' ') + '"';
+ if (col._parent) {
+ values._headers =
+ 'headers="' + col._parent._headers.join(' ') + '"';
}
content += fromTemplate(this.CELL_TEMPLATE, values);
@@ -387,7 +388,7 @@ Y.namespace('DataTable').HeaderView = Y.Base.create('tableHeader', Y.View, [], {
// break to let the while loop process the children
break;
} else {
- col.colspan = 1;
+ col._colspan = 1;
}
}
@@ -397,15 +398,15 @@ Y.namespace('DataTable').HeaderView = Y.Base.create('tableHeader', Y.View, [], {
entry = stack[stack.length - 2];
parent = entry[0][entry[1]];
- parent.colspan = 0;
+ parent._colspan = 0;
for (i = 0, len = row.length; i < len; ++i) {
// Can't use .length because in 3+ rows, colspan
// needs to aggregate the colspans of children
- parent.colspan += row[i].colspan;
+ parent._colspan += row[i]._colspan;
// Assign the parent column for ease of navigation
- row[i].parent = parent;
+ row[i]._parent = parent;
}
}
stack.pop();
@@ -433,12 +434,12 @@ Y.namespace('DataTable').HeaderView = Y.Base.create('tableHeader', Y.View, [], {
entry[1] = i;
// collect the IDs of parent cols
- col.headers = [col._yuid];
+ col._headers = [col._yuid];
for (j = stack.length - 2; j >= 0; --j) {
parent = stack[j][0][stack[j][1]];
- col.headers.unshift(parent._yuid);
+ col._headers.unshift(parent._yuid);
}
if (children && children.length) {
@@ -448,7 +449,7 @@ Y.namespace('DataTable').HeaderView = Y.Base.create('tableHeader', Y.View, [], {
stack.push([children, -1]);
break;
} else {
- col.rowspan = rowSpan - stack.length + 1;
+ col._rowspan = rowSpan - stack.length + 1;
}
}
View
6 build/datatable-scroll/datatable-scroll-debug.js
@@ -652,7 +652,11 @@ Y.mix(Scrollable.prototype, {
(this._yScrollNode.get('offsetHeight') -
Y.DOM.getScrollbarWidth()) + 'px');
- this._addVirtualScrollbar();
+ // Only add virtual scrollbar if the OS+browser renders
+ // scrollbars.
+ if (Y.DOM.getScrollbarWidth()) {
+ this._addVirtualScrollbar();
+ }
}
} else {
this._mergeXScrollContent();
View
2  build/datatable-scroll/datatable-scroll-min.js
@@ -1,2 +1,2 @@
YUI.add("datatable-scroll",function(f){var d=f.Lang,a=d.isString,e=d.isNumber,c=d.isArray,b;f.DataTable.Scrollable=b=function(){};b.ATTRS={scrollable:{value:false,setter:"_setScrollable"}};f.mix(b.prototype,{scrollTo:function(h){var g;if(h&&this._tbodyNode&&(this._yScrollNode||this._xScrollNode)){if(c(h)){g=this.getCell(h);}else{if(e(h)){g=this.getRow(h);}else{if(a(h)){g=this._tbodyNode.one("#"+h);}else{if(h instanceof f.Node&&h.ancestor(".yui3-datatable")===this.get("boundingBox")){g=h;}}}}g&&g.scrollIntoView();}},_CAPTION_TABLE_TEMPLATE:'<table class="{className}" role="presentation"></table>',_SCROLLBAR_TEMPLATE:'<div class="{className}"><div></div></div>',_X_SCROLLER_TEMPLATE:'<div class="{className}"></div>',_Y_SCROLLER_TEMPLATE:'<div class="{className}"><table class="{tableClassName}" role="presentation"></table></div>',_addVirtualScrollbar:function(){var g=this._yScrollNode,h=f.DOM.getScrollbarWidth()+"px",i=f.Node.create(f.Lang.sub(this._SCROLLBAR_TEMPLATE,{className:this.getClassName("virtual","scrollbar")}));this._scrollbarNode=i;i.setStyles({height:g.get("clientHeight")+"px",width:h,bottom:h});i.one("div").setStyle("height",g.get("scrollHeight")+"px");this._virtualScrollHandle=new f.EventHandle([i.on("scroll",f.rbind("_syncVirtualScroll",this)),g.on("scroll",f.rbind("_syncVirtualScroll",this))]);this.get("contentBox").appendChild(i);},_afterContentChange:function(g){this._mergeXScrollContent();this._mergeYScrollContent();this._uiSetWidth(this.get("width"));this._syncScrollUI();},_afterScrollableChange:function(g){this._uiSetScrollable();this._syncScrollUI();},_afterScrollHeightChange:function(g){this._yScroll&&this._syncScrollUI();},_bindScrollUI:function(){this.after(["dataChange","columnsChange","captionChange","heightChange"],f.bind("_afterContentChange",this));this.data.after(["add","remove","reset","*:change"],f.bind("_afterContentChange",this));},_calcScrollHeight:function(){var g=this._yScrollNode;return this.get("contentBox").get("clientHeight")-g.get("offsetTop")-g.get("offsetHeight")+g.get("clientHeight");},_createXScrollNode:function(){if(!this._xScrollNode){this._xScrollNode=f.Node.create(f.Lang.sub(this._X_SCROLLER_TEMPLATE,{className:this.getClassName("x","scroller")}));}},_createYScrollNode:function(){if(!this._yScrollNode){this._yScrollNode=f.Node.create(f.Lang.sub(this._Y_SCROLLER_TEMPLATE,{className:this.getClassName("y","scroller"),tableClassName:this.getClassName("y","scroll","table")}));}},_fixColumnWidths:function(){var k=this._tbodyNode,n=k.get("parentNode"),h=k.one("tr"),o=h&&h.all("td"),p=f.DOM.getScrollbarWidth(),g=[],j,l,m;if(o){this._tableNode.appendChild(this._tbodyNode);j=o.size()-1;m=o.item(j);this._setColumnWidth(j,(m.get("offsetWidth")+p)+"px");o.pop();g=o.get("offsetWidth");for(j=0,l=g.length;j<l;++j){this._setColumnWidth(j,g[j]+"px");}n.appendChild(this._tbodyNode);}},initializer:function(){this._setScrollProperties();this.after(["scrollableChange","heightChange","widthChange"],this._setScrollProperties);f.Do.after(this._bindScrollUI,this,"bindUI");f.Do.after(this._syncScrollUI,this,"syncUI");},_mergeXScrollContent:function(){var g=this._xScrollNode,h;this.get("boundingBox").removeClass(this.getClassName("scrollable","x"));if(g){if(this._captionNode){h=this._captionNode&&this._captionNode.ancestor("."+this.getClassName("caption","table"));this._tableNode.insertBefore(this._captionNode,this._tableNode.get("firstChild"));if(h){h.remove().destroy(true);}}g.replace(g.get("childNodes").toFrag());this._xScrollNode=null;if(this._scrollbarNode){this._virtualScrollHandle.detach();this._virtualScrollHandle=null;this._scrollbarNode.remove().destroy(true);this._scrollbarNode=null;}}},_mergeYScrollContent:function(){this.get("boundingBox").removeClass(this.getClassName("scrollable","y"));if(this._yScrollNode){this._tableNode.append(this._tbodyNode);this._yScrollNode.remove().destroy(true);this._yScrollNode=null;this._removeHeaderScrollPadding();}this._uiSetColumns();},_removeHeaderScrollPadding:function(){var k=this._theadNode.all("> tr").getDOMNodes(),h,j,g;for(j=0,g=k.length;j<g;j+=(h.rowSpan||1)){h=f.one(k[j].cells[k[j].cells.length-1]).setStyle("paddingRight","");}},_setHeaderScrollPadding:function(){var k=this._theadNode.all("> tr").getDOMNodes(),l,h,j,g;h=f.one(k[0].cells[k[0].cells.length-1]);l=(f.DOM.getScrollbarWidth()+parseInt(h.getComputedStyle("paddingRight"),10))+"px";for(j=0,g=k.length;j<g;j+=(h.rowSpan||1)){h=f.one(k[j].cells[k[j].cells.length-1]).setStyle("paddingRight",l);}},_setScrollable:function(g){if(g===true){g="xy";}if(a(g)){g=g.toLowerCase();}return(g===false||g==="y"||g==="x"||g==="xy")?g:f.Attribute.INVALID_VALUE;},_setScrollProperties:function(){var i=this.get("scrollable")||"",h=this.get("width"),g=this.get("height");this._xScroll=h&&i.indexOf("x")>-1;this._yScroll=g&&i.indexOf("y")>-1;},_setYScrollColWidths:function(){var j=this._yScrollNode,i=j&&j.one("> table"),h,g;if(i){j.all("colgroup,col").remove();h=this._colgroupNode.cloneNode(true);h.set("id",f.stamp(h));if(!f.Features.test("table","badColWidth")){g=h.all("col").pop();g.setStyle("width",(parseInt(g.getStyle("width"),10)-1-f.DOM.getScrollbarWidth())+"px");}i.insertBefore(h,i.one("> thead, > tfoot, > tbody"));}},_splitXScrollContent:function(){var g;this._createXScrollNode();this._tableNode.wrap(this._xScrollNode);if(this._yScrollNode){this._xScrollNode.append(this._yScrollNode);}if(this._captionNode){g=f.Node.create(f.Lang.sub(this._CAPTION_TABLE_TEMPLATE,{className:this.getClassName("caption","table")}));g.setStyle("width",this.get("width"));g.insertBefore(this._captionNode,g.get("firstChild"));this.get("contentBox").insertBefore(g,this._xScrollNode);}},_splitYScrollContent:function(){var i=this._tableNode,j=this._yScrollTable,g,h;this.get("boundingBox").addClass(this.getClassName("scrollable","y"));if(!j){this._fixColumnWidths();this._setHeaderScrollPadding();h=parseInt(i.getComputedStyle("width"),10);i.setStyle("width",h+"px");this._createYScrollNode();j=this._yScrollNode;
-g=j.one("table");g.append(this._tbodyNode);i.insert(j,"after");j.setStyles({height:this._calcScrollHeight()+"px",width:(h-2)+"px"});g.setStyle("width",j.get("clientWidth")+"px");}this._setYScrollColWidths();},_syncScrollUI:function(){var g=this.get("contentBox"),i=this._yScrollNode||g,h=i.one("table");this._uiSetDim("width","");this._tableNode.setStyle("width","");this._uiSetScrollable();if(this._yScroll){if(h.get("scrollHeight")>i.get("clientHeight")){this._splitYScrollContent();}else{this._mergeYScrollContent();}}else{this._mergeYScrollContent();}if(this._xScroll){if(h.get("scrollWidth")>parseInt(this.get("width"),10)){this._splitXScrollContent();if(this._yScrollNode){this._yScrollNode.setStyle("height",(this._yScrollNode.get("offsetHeight")-f.DOM.getScrollbarWidth())+"px");this._addVirtualScrollbar();}}else{this._mergeXScrollContent();}}else{this._mergeXScrollContent();}this._uiSetDim("width",this.get("width"));},_syncVirtualScroll:function(h){var g=(h.currentTarget===this._scrollbarNode)?this._yScrollNode:this._scrollbarNode;g.set("scrollTop",h.currentTarget.get("scrollTop"));},_uiSetWidth:function(g){var h=this._xScrollNode||this._yScrollNode;if(e(g)){g+=this.DEF_UNIT;}if(h){this._mergeXScrollContent();this._mergeYScrollContent();this._syncScrollUI();}else{this._uiSetDim("width",g);this._tableNode.setStyle("width",g);}},_uiSetScrollable:function(){this.get("boundingBox").toggleClass(this.getClassName("scrollable","x"),this._xScroll).toggleClass(this.getClassName("scrollable","y"),this._yScroll);}},true);f.Base.mix(f.DataTable,[b]);},"@VERSION@",{skinnable:true,requires:["datatable-base","dom-screen"]});
+g=j.one("table");g.append(this._tbodyNode);i.insert(j,"after");j.setStyles({height:this._calcScrollHeight()+"px",width:(h-2)+"px"});g.setStyle("width",j.get("clientWidth")+"px");}this._setYScrollColWidths();},_syncScrollUI:function(){var g=this.get("contentBox"),i=this._yScrollNode||g,h=i.one("table");this._uiSetDim("width","");this._tableNode.setStyle("width","");this._uiSetScrollable();if(this._yScroll){if(h.get("scrollHeight")>i.get("clientHeight")){this._splitYScrollContent();}else{this._mergeYScrollContent();}}else{this._mergeYScrollContent();}if(this._xScroll){if(h.get("scrollWidth")>parseInt(this.get("width"),10)){this._splitXScrollContent();if(this._yScrollNode){this._yScrollNode.setStyle("height",(this._yScrollNode.get("offsetHeight")-f.DOM.getScrollbarWidth())+"px");if(f.DOM.getScrollbarWidth()){this._addVirtualScrollbar();}}}else{this._mergeXScrollContent();}}else{this._mergeXScrollContent();}this._uiSetDim("width",this.get("width"));},_syncVirtualScroll:function(h){var g=(h.currentTarget===this._scrollbarNode)?this._yScrollNode:this._scrollbarNode;g.set("scrollTop",h.currentTarget.get("scrollTop"));},_uiSetWidth:function(g){var h=this._xScrollNode||this._yScrollNode;if(e(g)){g+=this.DEF_UNIT;}if(h){this._mergeXScrollContent();this._mergeYScrollContent();this._syncScrollUI();}else{this._uiSetDim("width",g);this._tableNode.setStyle("width",g);}},_uiSetScrollable:function(){this.get("boundingBox").toggleClass(this.getClassName("scrollable","x"),this._xScroll).toggleClass(this.getClassName("scrollable","y"),this._yScroll);}},true);f.Base.mix(f.DataTable,[b]);},"@VERSION@",{skinnable:true,requires:["datatable-base","dom-screen"]});
View
6 build/datatable-scroll/datatable-scroll.js
@@ -652,7 +652,11 @@ Y.mix(Scrollable.prototype, {
(this._yScrollNode.get('offsetHeight') -
Y.DOM.getScrollbarWidth()) + 'px');
- this._addVirtualScrollbar();
+ // Only add virtual scrollbar if the OS+browser renders
+ // scrollbars.
+ if (Y.DOM.getScrollbarWidth()) {
+ this._addVirtualScrollbar();
+ }
}
} else {
this._mergeXScrollContent();
View
17 src/datatable/docs/datatable-dsio.mustache
@@ -51,16 +51,9 @@ dataSource.sendRequest({
<p>Now that the DataSource is created properly, define the columns that you want your table to show. These columns map directly to the parameter names returned in the data.</p>
-```
-var cols = ["Title", "Phone", "Rating"];
-
-```
-
<p>Now you are ready to create a DataTable using the columns you have defined. When you plug the instance with the DataTableDataSource plugin, point to your DataSource instance, and set an `initialRequest` value so that the initial data loads right way. Then call `render()` after the data response has been processed.</p>
```
-var cols = ["Title", "Phone", "Rating"];
-
var dataSource = new Y.DataSource.IO({
source:"ylocal_proxy.php?zip=94089&query=chinese"
});
@@ -76,8 +69,8 @@ dataSource.plug(Y.Plugin.DataSourceXMLSchema, {
}
});
-var table = new Y.DataTable.Base({
- columnset: cols,
+var table = new Y.DataTable({
+ columns: ["Title", "Phone", "Rating"],
summary: "Chinese restaurants near 98089",
caption: "Table with XML data from same-domain script"
});
@@ -98,8 +91,6 @@ dataSource.after("response", function() {
```
YUI().use("datasource-get", "datasource-jsonschema", "datatable-datasource", function(Y) {
- var cols = ["Title", "Phone", "Rating"];
-
var dataSource = new Y.DataSource.IO({
source: "ylocal_proxy.php?"
});
@@ -115,8 +106,8 @@ YUI().use("datasource-get", "datasource-jsonschema", "datatable-datasource", fun
}
});
- var table = new Y.DataTable.Base({
- columnset: cols,
+ var table = new Y.DataTable({
+ columns: ["Title", "Phone", "Rating"],
summary: "Chinese restaurants near 98089",
caption: "Table with XML data from same-domain script"
});
View
109 src/datatable/docs/datatable-formatting.mustache
@@ -1,11 +1,21 @@
<style scoped>
/* custom styles for this example */
-.dt-example {margin:1em;}
+.example .yui3-datatable {
+ margin-bottom: 1em;
+}
/* css to counter global site css */
-.dt-example th {text-transform:none;}
-.dt-example table {width:auto;}
-.dt-example caption {display:table-caption;}
+.example table {
+ width: auto;
+}
+.example caption {
+ display: table-caption;
+}
+.example th,
+.example td {
+ text-transform: none;
+ border: 0 none;
+}
</style>
<div class="intro">
@@ -23,42 +33,40 @@
<p>Simple formatting can be defined with a string template on the column definition.</p>
```
-YUI().use("datatable-base", function(Y) {
- var cols = ["id","name", {key:"price", formatter:"\${value}"}],
- data = [
- {id:"ga-3475", name:"gadget", price:6.99},
- {id:"sp-9980", name:"sprocket", price:3.75},
- {id:"wi-0650", name:"widget", price:4.25}
- ],
- table = new Y.DataTable.Base({
- columnset: cols,
- recordset: data,
+YUI().use("datatable", function(Y) {
+
+ var table = new Y.DataTable({
+ columns: [ "id", "name", { key: "price", formatter: "${value}" } ],
+ data : [
+ { id: "ga-3475", name: "gadget", price: 6.99 },
+ { id: "sp-9980", name: "sprocket", price: 3.75 },
+ { id: "wi-0650", name: "widget", price: 4.25 }
+ ],
caption: "Data formatting with string template"
+
}).render("#template");
```
-<p>When a calculation is needed, define a custom function that generates markup for the data cell. The custom formatter function receives an object with the following properties: `{tbody, tr, classnames, headers, rowindex, record, column, data, value}`.</p>
+<p>
+ When a calculation is needed, define a custom function that generates
+ markup for the data cell. The custom formatter function receives an object
+ with the properties listed in <a href="index.html#formatter-props">Appendix
+ B</a> in the DataTable user guide.
+</p>
```
-// The custom formatter function recieves an object with the properties:
-// {tbody, tr, td, classnames, headers, rowindex, record, column, data, value}
-var calculate = function (o){
- var record = o.record;
- return "$"+(record.getValue("price") - record.getValue("cost"));
-},
-cols = [
- "id",
- "name",
- { key: "profit", formatter: calculate }
-],
-data = [
- {id:"ga-3475", name:"gadget", price:6.99, cost:4.99},
- {id:"sp-9980", name:"sprocket", price:3.75, cost:2.75},
- {id:"wi-0650", name:"widget", price:4.25, cost:3.25}
-],
-dt = new Y.DataTable.Base({
- columnset: cols,
- recordset: data,
+// See the DataTable user guide for a list of properties on o.
+function calculate(o) {
+ return "$" + (o.data.price - o.data.cost).toFixed(2);
+}
+
+var table = new Y.DataTable({
+ columns: [ "id", "name", { key: "profit", formatter: calculate } ],
+ data : [
+ { id: "ga-3475", name: "gadget", price: 6.99, cost: 4.99 },
+ { id: "sp-9980", name: "sprocket", price: 3.75, cost: 2.75 },
+ { id: "wi-0650", name: "widget", price: 4.25, cost: 3.25 }
+ ],
caption: "Data formatting with custom function"
}).render("#function");
```
@@ -68,26 +76,23 @@ also uses the `emptyCellValue` column configuration to supply a custom cell
value in the case of missing data.</p>
```
-YUI().use("datatype-date", "datatable-base", function (Y) {
- // The custom formatter function recieves an object with the properties:
- // {tbody, tr, classnames, headers, rowindex, record, column, data, value}
- var formatDates = function (o){
+YUI().use("datatype-date", "datatable", function (Y) {
+ function formatDates(o) {
return o.value &&
Y.DataType.Date.format(o.value, { format: "%m/%d/%Y" });
- },
- cols = [
- "id",
- "name",
- { key: "date", formatter: formatDates, emptyCellValue: "(unknown)" }
- ],
- data = [
- {id:"ga-3475", name:"gadget", date:new Date(2006, 5, 1)},
- {id:"sp-9980", name:"sprocket", date:new Date(2004, 8, 16)},
- {id:"wi-0650", name:"widget"} // no date for this record
- ],
- dt = new Y.DataTable.Base({
- columnset: cols,
- recordset: data,
+ }
+
+ dt = new Y.DataTable({
+ columns: [
+ "id",
+ "name",
+ { key: "date", formatter: formatDates, emptyCellValue: "(unknown)" }
+ ],
+ data : [
+ { id: "ga-3475", name: "gadget", date: new Date(2006, 5, 1) },
+ { id: "sp-9980", name: "sprocket", date: new Date(2004, 8, 16) },
+ { id: "wi-0650", name: "widget"} // no date for this record
+ ],
caption: "Data formatting with DataType.Date"
}).render("#dates");
```
View
20 src/datatable/docs/datatable-nestedcols.mustache
@@ -1,15 +1,25 @@
<style scoped>
/* custom styles for this example */
-.dt-example {margin:1em;}
+.example .yui3-datatable {
+ margin-bottom: 1em;
+}
/* css to counter global site css */
-.dt-example th {text-transform:none;}
-.dt-example table {width:auto;}
-.dt-example caption {display:table-caption;}
+.example table {
+ width: auto;
+}
+.example caption {
+ display: table-caption;
+}
+.example th,
+.example td {
+ text-transform: none;
+ border: 0 none;
+}
</style>
<div class="intro">
- <p>The DataTable widget supports nested column headers, which can be defined in the columnset definition using the `children` configuration.</p>
+ <p>The DataTable widget supports nested column headers, which can be defined in the columns definition using the `children` configuration.</p>
</div>
<div class="example yui3-skin-sam">
View
71 src/datatable/docs/datatable-scroll.mustache
@@ -1,21 +1,32 @@
<style scoped>
/* custom styles for this example */
-.tableDemo {margin: 15px 0;}
+.example .yui3-datatable {
+ margin-bottom: 1em;
+}
/* css to counter global site css */
-.tableDemo th {text-transform:none;}
-.tableDemo table {width:auto;}
-
-/* scrolling datatable doesn't support caption
-.dt-example caption {display:table-caption;}*/
+.example table {
+ width: auto;
+}
+.example caption {
+ display: table-caption;
+}
+.example th,
+.example td {
+ text-transform: none;
+ border: 0 none;
+}
</style>
<div class="intro">
- <p>Datatables can be made to scroll along the x and y axes. The `DataTableScroll` plugin enables this functionality.</p>
+ <p>Datatables can be made to scroll along the x and y axes. The `datatable-scroll` module enables this functionality.</p>
- <p>The `width` and `height` attributes trigger scrolling along the respective axis, `width` to make the table scroll along the x axis and `height` along the y axis. Setting both `width` and `height` make the table both x and y scrollable.</p>
+ <p>The `scrollable` attribute along with the `width` and `height` attributes trigger scrolling along the respective axis. Set `scrollable` to "x" and set the `width` to enable horizontal scrolling. Or set `scrollable` to "y" and set the `height` to enable vertical scrolling. Or set `scrollable` to "xy" and set both `height` and `width` to enable scrolling along both axes.</p>
<p><strong>Note:</strong> Scrolling is not currently supported on the Android WebKit browser.
+
+ <p><strong>Yes, the vertical scrolling column alignment is off. This will be fixed before 3.5.0 GA</strong>.</p>
+
</div>
<div class="example yui3-skin-sam">
@@ -23,7 +34,7 @@
</div>
<h3>The Data</h3>
-<p>This is the `recordset` data that will be used for each example table. The keys in each tables' `columnset` will correspond with the keys in the data.</p>
+<p>This is the data that will be used for each example table. The keys in each tables' `columns` will correspond with the keys in the data.</p>
```
var sampleData = [
@@ -35,8 +46,8 @@ var sampleData = [
];
```
-<h3>Instantiation &amp; Plugin</h3>
-<p>The `DataTableScroll` plugin is packaged in the `datatable-scroll` module.</p>
+<h3>Instantiation &amp; Configuration</h3>
+<p>The `datatable-scroll` module adds support for scrollability.</p>
```
YUI().use('datatable-scroll', function (Y) {
@@ -44,44 +55,32 @@ YUI().use('datatable-scroll', function (Y) {
});
```
-<p>Plug `DataTableScroll` into the `DataTable` instance before the call to `render()`. Configure the plugin to limit the rendered table dimensions by `height` or `width`.</p>
+<p>Configure the DataTable to limit the rendered table dimensions by `height` or `width`.</p>
-<p>The first table will be configured to scroll on both X and Y axes by setting both `height` and `width`.</p>
+<p>The first table will be configured to scroll on both X and Y axes by setting `scrollable` to `true` (aka "xy") and setting both `height` and `width`.</p>
```
-var dtScrollingXY = new Y.DataTable.Base({
- columnset: sampleCols,
- recordset: sampleData,
- summary: "X and Y axis scrolling table"
-});
-
-//Creating an xy-scrolling datatable with specific width and height
-dtScrollingXY.plug(Y.Plugin.DataTableScroll, {
+var dtScrollingXY = new Y.DataTable({
+ columns: sampleCols,
+ data: sampleData,
+ scrollable: true,
width: "300px",
- height: "100px"
-});
-
-// Pass render() the CSS selector of the container element
-dtScrollingXY.render("#scrolling-xy");
+ height: "100px",
+ caption: "X and Y axis scrolling table"
+}).render("#scrolling-xy");
```
<h3>Setting a scrolling direction</h3>
-<p>The `width` and `height` values passed into the `datatable-scroll` plugin determine the scrolling directions on that particular datatable instance. The following rules apply:</p>
-<ol>
- <li>If a width and height are both passed in through the configuration object, the datatable will support scrolling in 'x' and 'y' directions.</li>
- <li>If only a width is passed in, the datatable will only support x-scrolling, and its height will default to `auto`</li>
- <li>If only a height is passed in, the datatable will only support y-scrolling, and its width will default to `auto`</li>
- <li>If neither width nor height are passed in, the datatable will not scroll, and both attributes will default to `auto`</li>
-</ol>
+<p>The values of `scrollable` and the respective dimensional attribute determines the scrolling directions on that particular datatable instance.</p>
<h5>Notes</h5>
<ol>
- <li>Even if a width and height is passed in, the table will not scroll if it can entirely fit into the specified viewport. However, if additional rows are added, scrollbars will be available immediately.</li>
- <li>The widths and heights of the scrolling data-table can currently only be set during initialization. They cannot be modified after the table has been displayed, and modifying them will not enable a certain scrolling direction.</li>
+ <li>If a DataTable is configured with `scrollable` of "y", but the `height` is not set, it will be made scrollable. Likewise for "x" and `width`.</li>
+ <li>If the data in the DataTable will fit within the given dimensions without scrolling, scrolling will be disabled. If the table columns or data change in such a way to exceed the configured dimensions, scrolling will automatically be enabled.</li>
</ol>
<h3>Full Code Listing</h3>
```
- {{>datatable-scroll-source}}
+{{>datatable-scroll-source}}
```
View
40 src/datatable/docs/datatable-sort.mustache
@@ -1,15 +1,25 @@
<style scoped>
/* custom styles for this example */
-.dt-example {margin:1em;}
+.example .yui3-datatable {
+ margin-bottom: 1em;
+}
/* css to counter global site css */
-.dt-example th {text-transform:none;}
-.dt-example table {width:auto;}
-.dt-example caption {display:table-caption;}
+.example table {
+ width: auto;
+}
+.example caption {
+ display: table-caption;
+}
+.example th,
+.example td {
+ text-transform: none;
+ border: 0 none;
+}
</style>
<div class="intro">
- <p>The `Y.Plugin.DataTableSort` plugin adds column sorting functionality to a basic DataTable.</p>
+ <p>The `datatable-sort` module adds column sorting functionality to a basic DataTable.</p>
</div>
<div class="example yui3-skin-sam">
@@ -18,7 +28,9 @@
<h2>Implementing Sortable Columns</h2>
-<p>To add column sorting functionality to any DataTable, simply call `.plug(Y.Plugin.DataTableSort)`. The `DataTableSort` plugin is available in the`datatable-sort` submodule. To enable sorting, you must define `sortable:true` in each column definition.</p>
+<p>To add column sorting functionality to any DataTable, simply include the `datatable-sort` module in your `use()` line and add the `sortable: true` configuration to the configuration objects of the columns you want to be sortable.</p>
+
+<p>Note, if you want all columns to be sortable, simply set `sortable: true` on the DataTable instance.</p>
```
YUI().use("datatable-sort", function(Y) {
@@ -32,17 +44,16 @@ YUI().use("datatable-sort", function(Y) {
{Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},
{Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
],
- table = new Y.DataTable.Base({
- columnset: cols,
- recordset: data,
+ table = new Y.DataTable({
+ columns: cols,
+ data : data,
summary: "Contacts list",
caption: "Table with simple column sorting"
- }).plug(Y.Plugin.DataTableSort)
- .render("#sort");
+ }).render("#sort");
});
```
-<h6>Pre-sorted Data</h6>
+<!--h6>Pre-sorted Data</h6>
<p>Often data is already sorted when it loads, and we want the data to reverse-sort the first time the user clicks on the column. In that case, define the `lastSortedBy` value in the DataTableSort plugin to indicate the field that is already sorted and whether it is sorted in "asc" or "desc" order.</p>
@@ -58,7 +69,7 @@ YUI().use("datatable-sort", function(Y) {
{Company:"Company Bee", Phone:"650-555-4444", Contact:"Sally Spencer"},
{Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
],
- table = new Y.DataTable.Base({
+ table = new Y.DataTable({
columnset: cols,
recordset: presortedData,
summary: "Contacts list",
@@ -100,7 +111,7 @@ YUI().use("datatable-sort", function(Y) {
{Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},
{Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
],
- table = new Y.DataTable.Base({
+ table = new Y.DataTable({
columnset: cols,
recordset: data,
summary: "Contacts list",
@@ -112,3 +123,4 @@ YUI().use("datatable-sort", function(Y) {
.render("#dblclick");
});
```
+-->
View
858 src/datatable/docs/index.mustache
@@ -1,133 +1,227 @@
+<style type="text/css">
+ .yui3-datatable table {
+ width: auto;
+ }
+
+ .yui3-datatable td, .yui3-datatable th {
+ border: 0 none;
+ }
+</style>
+
<div class="intro component">
<p>
The DataTable widget 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.
+ A variety of class extensions can then be used to add features to the
+ table such as sorting and scrolling.
</p>
</div>
{{>getting-started}}
-<h2 id="using">Using DataTables</h2>
-
-<h3 id="basics">DataTable basics</h3>
+<h2 id="using">DataTable Basics</h2>
<p>
A basic DataTable is comprised of columns and rows. Define the columns you
- want to display in your DataTable with the <code>columnset</code>
- attribute. Rows are created for you based on the data you define using the
- <code>recordset</code> attribute. Under the hood, the DataTable class uses
- a Columnset instance and a Recordset instance to manage column and row data
- properties.
+ want to display in your DataTable with the `columns` attribute. Rows are
+ created for you based on the data you provide to the `data` attribute.
+ Under the hood, the DataTable class uses a ModelList instance to manage the
+ row data properties.
</p>
-
-<h3 id="columns">Working with columns</h3>
-<p>
- A <code>columnset</code> can be defined with a simple array of
- <code>keys</code>. As long as these keys exist in your data, DataTable will
- display these columns of data in the table. Note that your data may contain
- other columns that are not displayed if they are not defined in the
- <code>columnset</code> array. A Columnset will be created containing a
- Column instance for each item in your array, with the <code>key</code>
- values you provided.
-</p>
-
```
-// Creates a Columnset with 3 Columns. "cost" is not rendered.
-var cols = ["id","name","price"];
-
-// Columns must match data parameter names
+// Columns must match data object property names
var data = [
- {id:"ga-3475", name:"gadget", price:"$6.99", cost:"$5.99"},
- {id:"sp-9980", name:"sprocket", price:"$3.75", cost:"$3.25"},
- {id:"wi-0650", name:"widget", price:"$4.25", cost:"$3.75"}
+ { id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99" },
+ { id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
+ { id: "wi-0650", name: "widget", price: "$4.25", cost: "$3.75" }
];
-// Creates a DataTable with 3 columns and 3 rows
-var table = new Y.DataTable.Base({
- columnset: cols,
- recordset: data
-}).render("#example");
+var table = new Y.DataTable({
+ columns: ["id", "name", "price"],
+ data: data,
+
+ // Optionally configure your table with a caption
+ caption: "My first DataTable!",
+
+ // and/or a summary (table attribute)
+ summary: "Example DataTable showing basic instantiation configuration"
+});
+
+table.render("#example1");
```
-<p>
- For greater flexibility, the <code>columnset</code> array accepts
- configuration objects as well as simple column name strings. When
- identifying a column with a configuration object, use the <code>key</code>
- property to reference the column name string. Below are a few other
- available column configurations.
-</p>
+<p>This code produces this table:</p>
+
+<div id="example1" class="yui3-skin-sam"></div>
+
+<script>
+YUI().use('datatable-base', function (Y) {
+ // Columns must match data object property names
+ var data = [
+ { id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99" },
+ { id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
+ { id: "wi-0650", name: "widget", price: "$4.25", cost: "$3.75" }
+ ];
+
+ var table = new Y.DataTable({
+ columns: ["id", "name", "price"],
+ data: data,
+ caption: "My first DataTable!",
+ summary: "Example DataTable showing basic instantiation configuration"
+ });
+
+ table.render("#example1");
+});
+</script>
+
+<h2 id="columns">Working with columns</h2>
<p>
- Use the <code>label</code> attribute to customize the rendered column
- header:
+ The `columns` attribute takes an array of field names that correspond to
+ property names in the `data` objects. These field names are called "keys".
+ As long as these keys exist in your data, DataTable will display these
+ columns in the table. By default, the key is also used as the label of the
+ column header.
</p>
-```
-// The label is the text that will be rendered in the table head
-var cols = [
- { key: "id", label: "ID" },
- { key: "name", label: "Name" },
- { key: "price", label: "Price" }
-];
-```
+<h3 id="column-configs">Column Configurations</h3>
<p>
- Use the `emptyCellValue` attribute to provide custom cell content when
- there is no data for that cell in the `Recordset` or a `formatter` returns
- `undefined`. The default `emptyCellValue` is the empty string `""`.
+ For greater flexibility, columns can also be identified with configuration
+ objects. When identifying a column with a configuration object, use the
+ `key` property to reference the associated data field (the string you would
+ have used to identify the column if you didn't need more configuration).
+ Otherwise, you can include any number of additional configuration
+ properties to customize how your data renders and behaves, depending on
+ which table extensions or plugins you have included.
</p>
-```
-// The label is the text that will be rendered in the table head
-var cols = [
- { key: "id", label: "ID" },
- { key: "name", label: "Name" },
- { key: "price", label: "Price", emptyCellValue: "<em>FREE!!!</em>" }
-];
-```
-
<p>
- Use the <code>abbr</code> attribute to set the screen-reader friendly
- "abbr" on each TH element:
+ Some column configurations affect the table headers and others affect the
+ data cells. The full list of configurations is listed in <a
+ href="#column-config">Column Configurations list</a> below.
</p>
```
-// The attr attribute enhances the screen-reader experience
var cols = [
{
+ // The key relates this column to a data field
key: "mfr-parts-database-id",
+
+ // The label is the text that will be rendered in the table head
label: "Mfr Part ID",
+
+ // The abbr sets the <th>s abbr attribute
abbr: "ID"
},
{
key: "mfr-parts-database-name",
label: "Mfr Part Name",
- abbr: "Name"
+ abbr: "Name",
+
+ // Allows user clicks on the header to sort the table rows by the
+ // values in this column. Requires the `datatable-sort` module.
+ sortable: true
},
{
key: "mfr-parts-database-price",
label: "Wholesale Price",
- abbr: "Price"
+ abbr: "Price",
+
+ // The emptyCellValue provides default content for data cells if a data
+ // row has no value for this field
+ emptyCellValue: '<em>(not set)</em>',
+
+ // The allowHTML configuration permits markup in data values to pass
+ // directly into the data cell's innerHTML.
+ allowHTML: true,
+
+ sortable: true
}
];
+
+var data = ...
+
+var table = new Y.DataTable({
+ columns: cols,
+ data : data
+});
+
+table.render('#example2');
```
+<p>This code produces this table:</p>
+
+<div id="example2" class="yui3-skin-sam"></div>
+
+<script>
+YUI().use('datatable-sort', function (Y) {
+ var cols = [
+ {
+ key: "mfr-parts-database-id",
+ label: "Mfr Part ID",
+ abbr: "ID"
+ },
+ {
+ key: "mfr-parts-database-name",
+ label: "Mfr Part Name",
+ abbr: "Name",
+ sortable: true
+ },
+ {
+ key: "mfr-parts-database-price",
+ label: "Wholesale Price",
+ abbr: "Price",
+ emptyCellValue: '<em>(not set)</em>',
+ allowHTML: true,
+ sortable: true
+ }
+ ];
+
+ var data = [
+ { "mfr-parts-database-id": "ga-3475", "mfr-parts-database-name": "gadget", "mfr-parts-database-price": "$6.99", cost: "$5.99" },
+ { "mfr-parts-database-id": "sp-9980", "mfr-parts-database-name": "sprocket", "mfr-parts-database-price": "$3.75", cost: "$3.25" },
+ { "mfr-parts-database-id": "wi-0650", "mfr-parts-database-name": "widget", "mfr-parts-database-price": "", cost: "$3.75" },
+ { "mfr-parts-database-id": "nu-0001", "mfr-parts-database-name": "nut", "mfr-parts-database-price": "$0.25", cost: "$3.75" }
+ ];
+
+ var table = new Y.DataTable({
+ columns: cols,
+ data: data
+ });
+
+ table.render("#example2");
+});
+</script>
+
+<h3 id="nested">Multi-row Headers</h3>
+
<p>
- Use the <code>children</code> attribute to created nested column headers.
- Parent columns are for display purposes only, not associated with any data,
- and should not have a <code>key</code> attribute of their own.
+ Use the `children` column configuration to created nested column headers.
+ The `children` configuration takes an array of column configurations, just
+ like the `columns` attribute itself. The columns defined in the `children`
+ property will have their header cells rendered in the row below that
+ column's header.
</p>
+<p>
+ Because columns that have children don't relate directly to the data in the
+ table rows, they should not have a `key` configured. Instead, include a
+ `label` to provide the header's content.
+</p>
```
var nestedCols = [
{
+ // Important: Parent columns do NOT get a key...
+
+ // but DO get a label
label: "Train Schedule",
- children: [ // Use children to define nested relationships
- { key: "track" },
+
+ // Pass an array of column configurations (strings or objects) as children
+ children: [
+ "track",
{
label: "Route",
children: [
@@ -145,146 +239,269 @@ var data = [
{ track: "3", from: "Paris", to: "Zurich" }
];
-var table = new Y.DataTable.Base({
- columnset: nestedCols,
- recordset: data,
- summary: "Train schedule",
+var table = new Y.DataTable({
+ columns: nestedCols,
+ data : data,
caption: "Table with nested column headers"
-}).render("#nested");
+}).render("#example3");
```
-<h3 id="data">Working with row data</h3>
-
-<p>
- Pass an array of data to the <code>recordset</code> attribute, and
- DataTable will create a <code>Recordset</code> of <code>Record</code>
- instances to populate the table. Note that you should only define columns
- for data you want to display -- all other data is not displayed.
-</p>
+<p>This code produces this table:</p>
+
+<div id="example3" class="yui3-skin-sam"></div>
+
+<script>
+YUI().use('datatable-base', function (Y) {
+var nestedCols = [
+ {
+ label: "Train Schedule",
+ children: [
+ "track",
+ {
+ label: "Route",
+ children: [ { key: "from" }, { key: "to" } ]
+ }
+ ]
+ }
+];
-```
-// Creates a Recordset with 3 records
var data = [
- { id: "ga-3475", name: "gadget", price: "$6.99", cost: "$5.99"},
- { id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25"},
- { id: "wi-0650", name: "widget", price: "$4.25", cost: "$3.75"}
+ { track: "1", from: "Paris", to: "Amsterdam" },
+ { track: "2", from: "Paris", to: "London" },
+ { track: "3", from: "Paris", to: "Zurich" }
];
-// Creates a DataTable with 3 columns and 3 rows ("cost" is not displayed)
-var table = new Y.DataTable.Base({
- columnset: [ "id", "name", "price" ],
- recordset: data
-}).render("#example");
-```
+var table = new Y.DataTable({
+ columns: nestedCols,
+ data : data,
+ caption: "Table with nested column headers"
+}).render("#example3");
+});
+</script>
+
+<h3 id="formatters">Formatting Cell Data</h3>
+
+<p>
+ It's highly recommended to keep the data in the underlying `data` ModelList
+ as pure data, free from presentational concerns. For example, use real
+ numbers, not numeric strings, and store link urls and labels either in
+ separate data fields or in a single data field, but as separate properties
+ of a value object. This allows the data to be used for calculations such
+ as sorting or averaging.
+</p>
<p>
- Data can be stored in one format but be displayed in a different format.
- For instance, prices can be stored as numbers but be displayed as "$2.99",
- and birthdays can be stored as date objects but be displayed as
- "12/9/2009". Simple formatting can be defined with a string template on the
- column definition.
+ In short, it is the role of the `data` attribute to hold data. It is the
+ role of the `columns` configuration to decide how to display it.
+</p>
+
+<p>
+ Out of the box, DataTable provides three primary ways to customize how your
+ data is formatted for display in the table cell: `formatter` strings,
+ `formatter` functions, and `nodeFormatter` functions. All are assigned in
+ the column configuration.
</p>
```
-var cols = [ "id", "name", { key: "price", formatter: "\${value}" } ];
+var cols = [
-var data = [
- { id: "ga-3475", name: "gadget", price: 6.99 },
- { id: "sp-9980", name: "sprocket", price: 3.75 },
- { id: "wi-0650", name: "widget", price: 4.25 }
-];
+ // It's ok to mix simple strings and configuration objects
+ 'id',
+ 'name',
+
+ {
+ label: 'formatter',
+ children: [
+
+ // 1. formatter strings
+ // mix the field value into the {value} placeholder
+ {
+ key: 'price',
+ label: 'string',
+
+ formatter: '${value}',
+
+ emptyCellValue: '(not set)'
+ },
+
+ // 2. formatter functions
+ // can provide alternate content, add cell classes, refer to other data
+ // fields, etc (more below)
+ {
+ key: 'price',
+ label: 'function',
+
+ formatter: function (o) {
+ if (o.value > 3) {
+ o.className += ' yellow-background';
+ o.value *= 0.75;
+ }
+
+ return o.value ? '$' + o.value.toFixed(2) : '(not set)';
+ }
+ },
-var table = new Y.DataTable.Base({
- columnset: cols,
- recordset: data,
- caption: "Data formatting with string template"
-}).render("#template");
+ // 3. nodeFormatter functions
+ // have access to the cell Node in the DOM, up to the <tbody> Node.
+ // Caveats apply; see below.
+ {
+ key: 'price',
+ label: 'nodeFormatter',
+
+ nodeFormatter: function (o) {
+ var content;
+
+ if (o.value > 4) {
+ // Add a class to the <tr>
+ o.cell.ancestor().addClass('red-text');
+ o.value *= 0.75;
+ }
+
+ content = o.value ? ('$' + o.value.toFixed(2)) : '(not set)';
+
+ o.cell.setContent(content);
+ }
+ }
+ }
+];
```
+<p>This code produces this table:</p>
+
+<div id="example4" class="yui3-skin-sam"></div>
+
+<script>
+YUI().use('datatable-base', function (Y) {
+ var cols = [
+ 'id',
+ 'name',
+ { label: 'formatter', children: [
+ { key: 'price', label: 'string',
+ formatter: '${value}', emptyCellValue: '(not set)' },
+ { key: 'price', label: 'function',
+ formatter: function (o) {
+ if (o.value > 3) {
+ o.className += ' yellow-background';
+ o.value *= 0.75;
+ }
+
+ return o.value ? '$' + o.value.toFixed(2) : '(not set)';
+ }
+ }]
+ },
+ {
+ key: 'price',
+ label: 'nodeFormatter',
+ nodeFormatter: function (o) {
+ var content;
+
+ if (o.value > 4) {
+ // Add a class to the <tr>
+ o.cell.ancestor().addClass('red-text');
+ o.value *= 0.75;
+ }
+
+ content = o.value ? ('$' + o.value.toFixed(2)) : '(not set)';
+
+ o.cell.setContent(content);
+ }
+ }
+ ];
+
+ var data = [
+ { id: "ga-3475", name: "gadget", price: 6.99 },
+ { id: "sp-9980", name: "sprocket", price: 3.75 },
+ { id: "wi-0650", name: "widget" },
+ { id: "nu-0001", name: "nut", price: 0.25 }
+ ];
+
+ var table = new Y.DataTable({
+ columns: cols,
+ data : data
+ }).render("#example4");
+});
+</script>
+
<p>
- When a calculation is needed, define a custom function that generates
- markup for the cell. The custom formatter function receives an object with
- the following properties:
+ Functions assigned as a column's `formatter` may either return a content
+ string to populate the cell, or update the `value` property on the object
+ that is passed as its argument. See <a href="#formatter-props">Appendix
+ B</a> for a list of all properties passed to `formatter` functions.
</p>
-<table>
-<thead>
- <tr>
- <th>Property</th>
- <th>Value</th>
- </tr>
-</thead>
-<tbody>
- <tr>
- <td><code>tbody</code></td>
- <td>The <code>&lt;tbody&gt;</code> node containing the cell.</td>
- </tr>
- <tr>
- <td><code>tr</code></td>
- <td>The <code>&lt;tr&gt;</code> node containing the cell.</td>
- </tr>
- <tr>
- <td><code>td</code></td>
- <td>The cell <code>&lt;td&gt;</code> node. As of 3.4.1, this property
- is <strong>not provided by default</strong>, but can be generated by the
- <a href="{{apiDocs}}/classes/DataTable.html#methods_createCell">createCell</a>
- method.</td>
- </tr>
- <tr>
- <td><code>value</code></td>
- <td>Usually the value stored in the <code>Record</code> for the column. This is the default content that will be displayed.</td>
- </tr>
- <tr>
- <td><code>record</code></td>
- <td>The <code>Record</code> instance containing the data for all cells in the row.</td>
- </tr>
- <tr>
- <td><code>data</code></td>
- <td>The raw data collection from the <code>Record</code> instance.</td>
- </tr>
- <tr>
- <td><code>rowindex</code></td>
- <td>The row number of the <code>&lt;tr&gt;</code> node containing the cell (zero based).</td>
- </tr>
- <tr>
- <td><code>column</code></td>
- <td>The <code>Column</code> instance for the cell's column.</td>
- </tr>
- <tr>
- <td><code>classnames</code></td>
- <td>The classname corresponding to the ID of the cell's column.</td>
- </tr>
- <tr>
- <td><code>headers</code></td>
- <td>The Array of IDs from all <code>&lt;th&gt;</code>s corresponding to the cell (mostly relevant to nested headers).</td>
- </tr>
-</tbody>
-</table>
+<p>
+ Functions assigned as a column's `nodeFormatter` must assign content to
+ the cell via the Node provided in the `cell` property of the object passed
+ as its argument. See <a href="#nodeformatter-props">Appendix C</a> for a
+ list of all properties passed to `nodeFormatter` functions.
+</p>
-```
-// The custom formatter function recieves an object
-var calculate = function (o) {
- var cost = o.record.getValue("cost"),
- price = o.record.getValue("price");
+<p>
+ <strong>`nodeFormatter`s should return `false`</strong>.
+ <a href="formatter-vs-nodeformatter">See below</a> for details.
+</p>
- return "$" + (price - cost).toFixed(2);
-};
+<h4 id="formatter-vs-nodeformatter">Why `formatter` and `nodeFormatter`?</h4>
-// Assign the custom formatter in the column definition
-var cols = [ "id", "name", { key: "profit", formatter: calculate } ];
+<p>
+ For good rendering performance and memory management, DataTable creates
+ table content by assembling `innerHTML` strings from templates, with
+ `{placeholder}` tokens replaced with your data. However, this means that
+ the Nodes don't exist yet when a column's `formatter`s are applied.
+</p>
-var data = [
- { id: "ga-3475", name: "gadget", price: 6.99, cost: 4.99 },
- { id: "sp-9980", name: "sprocket", price: 3.75, cost: 2.75 },
- { id: "wi-0650", name: "widget", price: 4.25, cost: 3.25 }
-];
+<p>
+ On the rare occasion that you <em>must</em> use Nodes to supply the cell
+ data, DataTable allows a second pass over the generated DOM elements once
+ the initial string concatenation has been completed and the full HTML
+ content created.
+</p>
-var table = new Y.DataTable.Base({
- columnset: cols,
- recordset: data,
- caption: "Data formatting with custom function"
-}).render("#function");
-```
+<p>
+ It is important to note that `nodeFormatters` will necessarily create a
+ Node instance for each cell in that column, which will increase the memory
+ footprint of your application. If the Node instance wrappers around the
+ DOM elements don't need to be maintained beyond the life of the
+ `nodeFormatter`, return `false` to remove them from the internal object
+ cache. <strong>This will not remove the rendered DOM, but it will remove
+ event subscriptions made on those Nodes</strong>.
+</p>
+
+<p>
+ In general, `nodeFormatter`s should only be used if absolutely necessary,
+ and should <em>always return `false`</em>. Event subscriptions should be
+ delegated from the DataTable's `boundingBox` or `contentBox`.
+</p>
+
+<h4 id="formatters-vs-empty">Formatters vs. `emptyCellValue`</h4>
+
+<p>
+ The `emptyCellValue` configuration is useful to provide fallback content in
+ the case of missing or empty column data, but it interacts with each type of
+ formatter differently.
+</p>
+
+<p>
+ String formatters will only be applied if the field data for that cell is
+ not `undefined`. This allows the `emptyCellValue` to populate the cell.
+</p>
+
+<p>
+ Function formatters are applied before the return value or (potentially
+ altered) `o.value` property is tested for `undefined` or the empty string.
+ In either of these cases, the `emptyCellValue` populates the cell.
+</p>
+
+<p>
+ The `emptyCellValue` configuration is ignored by columns configured with
+ `nodeFormatter`s. It is entirely the responsibility of the `nodeFormatter`
+ to populate the cell content.
+</p>
+
+
+<h2 id="data">Getting Row Data</h2>
+
+<!-- TODO: describe data as array, data as ModelList instance, assigned and dynamic recordTypes -->
<p>
Integrate with the <a href="../datasource/">DataSource</a> data abstraction
@@ -296,7 +513,7 @@ var table = new Y.DataTable.Base({
var cols = [
"Title",
"Phone",
- { key: "Rating.AverageRating", label: "Rating" }
+ "Rating"
];
var myDataSource = new Y.DataSource.Get({
@@ -306,12 +523,19 @@ var myDataSource = new Y.DataSource.Get({
myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
schema: {
resultListLocator: "query.results.Result",
- resultFields: [ "Title", "Phone", "Rating.AverageRating" ]
+ resultFields: [
+ "Title",
+ "Phone",
+ {
+ key: "Rating",
+ locator: "Rating.AverageRating"
+ }
+ ]
}
}),
-var table = new Y.DataTable.Base({
- columnset: cols,
+var table = new Y.DataTable({
+ columns: cols,
summary: "Pizza places near 98089"
});
@@ -358,8 +582,8 @@ myDataSource
max: 3
});
-var table = new Y.DataTable.Base({
- columnset: cols,
+var table = new Y.DataTable({
+ columns: cols,
summary: "Pizza places near 98089",
caption: "Table with JSON data from YQL"
});
@@ -397,8 +621,8 @@ myDataSource.plug(Y.Plugin.DataSourceXMLSchema, {
}
});
-var table = new Y.DataTable.Base({
- columnset: cols,
+var table = new Y.DataTable({
+ columns: cols,
summary: "Chinese restaurants near 98089",
caption: "Table with XML data from same-domain script"
});
@@ -422,10 +646,13 @@ myDataSource.setInterval(5000, {
<h3 id="sorting">Column sorting</h3>
<p>
- Column sorting functionality can be added with the DataTableSort plugin
- (provided by the <code>datatable-sort</code> module, or in the
- <code>datatable</code> rollup module). Indicate which columns are sortable
- by setting <code>sortable: true</code> in your column definitions.
+ Column sorting functionality can be added with the `datatable-sort` module
+ (included in the `datatable` rollup module).
+ Enable sorting for all columns by setting `sortable` to true during
+ instantiation. Alternately, pass `sortable` an array of column keys to
+ enable sortability of those specific columns, `false` to disable sorting,
+ or the string "auto" (the default) to determine which columns to make
+ sortable by reading the `sortable` property from the column configurations.
</p>
```
@@ -441,12 +668,13 @@ var data = [
{ Company: "Indutrial Industries", Phone: "408-555-5678", Contact: "Robin Smith"}
];
-var table = new Y.DataTable.Base({
- columnset: cols,
- recordset: data,
+// Alternately, include sortable: true or sortable: ["Company", "Contact"]
+// in the DataTable configuration
+var table = new Y.DataTable({
+ columns: cols,
+ data: data,
summary: "Contacts list",
- caption: "Table with simple column sorting",
- plugins: [ Y.Plugin.DataTableSort ]
+ caption: "Table with simple column sorting"
}).render("#sort");
```
@@ -458,13 +686,15 @@ var table = new Y.DataTable.Base({
</p>
<p>
- Scrolling functionality can be added with the DataTableScroll plugin
- (provided by the <code>datatable-scroll</code> module or in the
- <code>datatable</code> rollup module). Horizontal scrolling is enabled by
- setting a <code>width</code> attribute value; fixed header vertical
- scrolling is enabled by setting a <code>height</code> attribute value; and
- xy-scrolling is enabled by setting both <code>width</code> and
- <code>height</code> values.
+ Scrolling functionality can be added with the `datatable-scroll` module
+ (included in the `datatable` rollup module). Scrolling is enabled by the
+ `scrollable` attribute, which accepts values "x", "y", "xy", `true` (same
+ as "xy"), or `false` (the default).
+</p>
+
+<p>
+ Note, vertical scrolling also requires the table's `height` attribute to be
+ set, and horizontal scrolling requires the `width` to be set.
</p>
```
@@ -480,17 +710,12 @@ var data = [
{ Company: "Indutrial Industries", Phone: "408-555-5678", Contact: "Robin Smith"}
];
-var table = new Y.DataTable.Base({
- columnset: cols,
- recordset: data,
-});
-
-table
- .plug(Y.Plugin.DataTableScroll, {
- width: "300px",
- height: "200px"
- })
- .render("#scroll");
+var table = new Y.DataTable({
+ columns: cols,
+ data: data,
+ scrollable: "y",
+ height: "300px"
+}).render("#scroll");
```
<h2 id="knownissues">Known Issues</h2>
@@ -507,3 +732,188 @@ table
</li>
</ul>
+<h2 id="column-config">Appendix A: Column Configurations</h2>
+
+<p>
+ The properties below are supported in the column configuration objects
+ passed in the `columns` attribute array.
+</p>
+
+<div id="column-config-table" class="yui3-skin-sam">
+ <table>
+ <thead>
+ <tr>
+ <th scope="col">Configuration</th>
+ <th scope="col">Description</th>
+ <th scope="col">Module</th>
+ <th scope="col">readOnly</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>key</td>
+ <td></td>
+ <td>`datatable-base`</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td>name</td>
+ <td></td>
+ <td>`datatable-base`</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td>label</td>
+ <td></td>
+ <td>`datatable-base`</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td>children</td>
+ <td></td>
+ <td>`datatable-base`</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td>abbr</td>
+ <td></td>
+ <td>`datatable-base`</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td>formatter</td>
+ <td></td>
+ <td>`datatable-base`</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td>nodeFormatter</td>
+ <td></td>
+ <td>`datatable-base`</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td>emptyCellValue</td>
+ <td></td>
+ <td>`datatable-base`</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td>allowHTML</td>
+ <td></td>
+ <td>`datatable-base`</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td>className</td>
+ <td></td>
+ <td>`datatable-base`</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td>sortable</td>
+ <td></td>
+ <td>`datatable-sort`</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td>sortFn</td>
+ <td></td>
+ <td>`datatable-sort`</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td>sortDir</td>
+ <td></td>
+ <td>`datatable-sort`</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td>width</td>
+ <td></td>
+ <td>`datatable-column-widths`</td>
+ <td>no</td>
+ </tr>
+ <tr>
+ <td>_yuid</td>
+ <td></td>
+ <td>`datatable-base`</td>
+ <td>YES</td>
+ </tr>
+ <tr>
+ <td>_id</td>
+ <td></td>
+ <td>`datatable-base`</td>
+ <td>YES</td>
+ </tr>
+ <tr>
+ <td>_colspan</td>
+ <td></td>
+ <td>`datatable-base`</td>
+ <td>YES</td>
+ </tr>
+ <tr>
+ <td>_rowspan</td>
+ <td></td>
+ <td>`datatable-base`</td>
+ <td>YES</td>
+ </tr>
+ <tr>
+ <td>_parent</td>
+ <td></td>
+ <td>`datatable-base`</td>
+ <td>YES</td>
+ </tr>
+ <tr>
+ <td>_headers</td>
+ <td></td>
+ <td>`datatable-base`</td>
+ <td>YES</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+<h2 id="formatter-props">Appendix B: Formatter Argument Properties</h2>
+
+<p>
+ The properties below are found on the object passed to `formatter`
+ functions defined in a column configuration. See
+ <a href="#nodeformatter-props">Appendix C</a> for the object properties
+ passed to `nodeFormatter`s.
+</p>
+
+<div id="formatter-props-table" class="yui3-skin-sam">
+ <table>
+ <thead>
+ <tr>
+ <th scope="col">Property</th>
+ <th scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ </tbody>
+ </table>
+</div>
+
+<h2 id="nodeformatter-props">Appendix C: nodeFormatter Argument Properties</h2>
+
+<p>
+ The properties below are found on the object passed to `nodeFormatter`
+ functions defined in a column configuration. See
+ <a href="#formatter-props">Appendix B</a> for the object properties
+ passed to `formatter`s.
+</p>
+
+<div id="nodeformatter-props-table" class="yui3-skin-sam">
+ <table>
+ <thead>
+ <tr>
+ <th scope="col">Property</th>
+ <th scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ </tbody>
+ </table>
+</div>
View
35 src/datatable/docs/partials/datatable-dsio-source.mustache
@@ -1,19 +1,28 @@
<style scoped>
/* custom styles for this example */
-.dt-example {margin:1em;}
+.example .yui3-datatable {
+ margin-bottom: 1em;
+}
/* css to counter global site css */
-.dt-example th {text-transform:none;}
-.dt-example table {width:auto;}
-.dt-example caption {display:table-caption;}
+.example table {
+ width: auto;
+}
+.example caption {
+ display: table-caption;
+}
+.example th,
+.example td {
+ text-transform: none;
+ border: 0 none;
+}
</style>
<div id="chinese" class="dt-example"></div>
<script>
-YUI().use("datasource-io", "datasource-xmlschema","datatable-base","datatable-datasource", function (Y) {
- var cols = ["Title", "Phone", "Rating"];
- ds = new Y.DataSource.IO({
+YUI().use("datasource-io", "datasource-xmlschema", "datatable-datasource", function (Y) {
+ var ds = new Y.DataSource.IO({
source:"../assets/datatable/ylocal.xml?"})
.plug(Y.Plugin.DataSourceXMLSchema, {
schema: {
@@ -38,10 +47,14 @@ YUI().use("datasource-io", "datasource-xmlschema","datatable-base","datatable-da
]
}
}),
- dt = new Y.DataTable({columns:cols, summary:"Chinese restaurants near 98089", caption:"Table with XML data from same-domain script"})
- .plug(Y.Plugin.DataTableDataSource, {datasource:ds, initialRequest:"zip=94089&query=chinese"});
-
- dt.render("#chinese")}
+ dt = new Y.DataTable({
+ columns: ["Title", "Phone", "Rating"],
+ summary:"Chinese restaurants near 98089",
+ caption:"Table with XML data from same-domain script"
+ }).plug(Y.Plugin.DataTableDataSource, {
+ datasource: ds,
+ initialRequest:"zip=94089&query=chinese"
+ }).render("#chinese");
dt.datasource.load();
});
View
15 src/datatable/docs/partials/datatable-formatting-source.mustache
@@ -12,12 +12,10 @@ YUI().use("datatype-date", "datatable-base", function (Y) {
{id:"sp-9980", name:"sprocket", price:3.75},
{id:"wi-0650", name:"widget", price:4.25}
],
- dtTemplate = new Y.DataTable.Base({columnset:colsTemplate, recordset:dataTemplate,
+ dtTemplate = new Y.DataTable({columns:colsTemplate, data:dataTemplate,
caption:"Data formatting with string template"}).render("#template"),