Luke Smith lsmith

We couldn’t find that file to show.

DataTable design overview

These are my early thoughts on how to structure DataTable in 3.5.0. Feedback is welcome in the comments.

new Y.DataTable({...});
new Y.DataTable.Base({...});

	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Test Page</title>
	<style>
	.yui3-skin-sam .yui3-datatable .yui3-datatable-data .yui3-datatable-editing {
	position: relative;
	padding: 0;
	}

	// Right now, Y.DataTable is only a namespace. But I want to be able to say new Y.DataTable({...});
	// We can do it. We have the technology.

	// Step 1. Capture all the properties of the Y.DataTable namespace
	// Y.merge creates a shallow copy of an object, and since Y.DataTable is just a namespace object,
	// this works like a champ. You could now say new Stuff.Base({...}) to create a DataTable.Base
	// instance.
	var Stuff = Y.merge(Y.DataTable);

	// Step 2. Replace the Y.DataTable namespace with a working DataTable.Base subclass

	// For Y.Foo

	// Class extensions that will be used in the base class
	function ExtA() {}
	...
	Y.namespace('Foo').ExtA = ExtA;

	// Base Class definition
	function FooBase() {}
	...

	YUI.add('event-multi-defaultFn', function (Y) {

	// FIXME: publish() needs to be patched to support allowing this to be called before
	// publish(). Today, the publish() call will clobber the AOP wrapper.

	Y.EventTarget.prototype.addEventBehavior = function (type, fn, when) {
	var event = this.getEvent(type),
	method = when === 'before' ? 'before' : 'after',
	handle;

	// Add support for table.getColumn( node )
	Y.DataTable.prototype.getColumn = (function (original) {
	return function (seed) {
	var cell;

	if (Y.instanceof(seed, Y.Node)) {
	cell = this.getCell(seed);

	seed = cell && (cell.get('className').match(
	new RegExp(this.getClassName('col', '(\\w+)'))) \|\| [])[1];

	/*
	This code should allow users to tab to the first row in the table, which will "select" it by
	adding a class to it and storing a reference to the row node. Alternately, users can click
	on a row to select it. Selection can be shifted to the next or previous row with the up and down arrow keys. The 'enter' key will fire a 'rowAction' custom event.
	*/
	table.getRow(0).setAttribute('tabindex', table.get('tabIndex') \|\| 0);

	table.delegate('keydown', function (e) {
	var selected = this._selectedRow,
	tbody = this._tbodyNode,

	// Include this after the table's render()
	// CAVEAT: this is NOT compatible with nodeFormatters
	table.body._afterDataChange = function (e) {
	var type = (e.type.match(/:(add\|remove\|change)$/) \|\| [])[1],
	odd = ['yui3-datatable-odd', 'yui3-datatable-even'],
	even = ['yui3-datatable-even', 'yui3-datatable-odd'],
	row, index;

	switch (type) {
	case 'change':

	// Class extension to DataTable ...

	Y.DataTable.Selection = function () {}

	Y.DataTable.Selection.ATTRS = {
	// selectionMode: for supporting multiple selection could be its own extension

	selectionType: {
	value: null, // Feature should not change base behavior by default
	validator: '_validateSelectionType'