rename table to grid

CheckBox.js

@@ -4,20 +4,20 @@ return function(column){
 	// summary:
 	// 		Add a checkbox column
 	column.renderCell = function(data, cell){
-		var table = column.table;
-		if(!table._hasCheckBoxListener){
-			table._hasCheckBoxListener = true;
-			table.on(".dojoxGridxCheckBox:change", function(event){
+		var grid = column.grid;
+		if(!grid._hasCheckBoxListener){
+			grid._hasCheckBoxListener = true;
+			grid.on(".dojoxGridxCheckBox:change", function(event){
 				var checked = this.checked;
-				var id = table.row(event).id;
+				var id = grid.row(event).id;
 				if(column.field){
-					dojo.when(table.store.get(id), function(object){ 
+					dojo.when(grid.store.get(id), function(object){ 
 						object[column.field] = checked;
-						table.store.put(object);
+						grid.store.put(object);
 					});
 				}
 				if(column.selector){
-					table.selection.set(id, checked);
+					grid.selection.set(id, checked);
 				}
 			});
 		}

ColumnSet.js

@@ -1,12 +1,12 @@
-define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "dojo/query", "./Table","cssx/css!./css/columnset.css"], 
-	function(dojo, declare, listen, query, Table, cssx){
+define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "dojo/query", "./Grid","cssx/css!./css/columnset.css"], 
+	function(dojo, declare, listen, query, Grid, cssx){
 		//	summary:
 		//		This module provides column sets to isolate horizontal scroll of sets of 
 		// 		columns from each other. This mainly serves the purpose of allowing for
 		// 		column locking. 
 	var create = dojo.create;
 
-	return declare([Table], {
+	return declare([Grid], {
 		columns: [],
 		createRowCells: function(tag, each){
 			var row = create("table", {
@@ -36,7 +36,7 @@ define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "dojo/query", ".
 		},
 		renderHeader: function(){
 			// summary:
-			//		Setup the headers for the table
+			//		Setup the headers for the grid
 			this.inherited(arguments);
 			var columnSets = this.columnSets;
 			this.bodyNode.style.bottom = "17px";

Table.js → Grid.js

@@ -5,7 +5,7 @@ define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "./TextEdit", ".
 		columns: [],
 		createRowCells: function(tag, each){
 			// summary:
-			//		Generates the table for each row (used by renderHeader and and renderRow)
+			//		Generates the grid for each row (used by renderHeader and and renderRow)
 			var tr, row = create("table", {
 			});			
 			if(dojo.isIE < 8 || dojo.isQuirks){
@@ -77,11 +77,11 @@ define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "./TextEdit", ".
 		},
 		renderHeader: function(){
 			// summary:
-			//		Setup the headers for the table
+			//		Setup the headers for the grid
 			var grid = this;
 			var row = this.createRowCells("th", function(th, column){
 				th.setAttribute("role", "columnheader");
-				column.table = grid;
+				column.grid = grid;
 				var field = column.field = column.field;
 				if(column.editable){
 					column = TextEdit(column);
@@ -110,7 +110,7 @@ define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "./TextEdit", ".
 				if(this.getAttribute("sortable")){
 					var field = this.getAttribute("field");
 					// resort
-					var descending = table.sortOrder && table.sortOrder[0].attribute == field && !table.sortOrder[0].descending;
+					var descending = grid.sortOrder && grid.sortOrder[0].attribute == field && !grid.sortOrder[0].descending;
 					if(lastSortedArrow){
 						dojo.destroy(lastSortedArrow);
 					}

Keyboard.js

@@ -1,7 +1,7 @@
 define(["dojo/_base/declare", "dojo/listen", "dojo/query"], function(declare, listen, query){
 return declare([], {
 	// summary:
-	// 		Add keyboard navigation capability to a table
+	// 		Add keyboard navigation capability to a grid
 	postCreate: function(){
 		this.inherited(arguments);
 		this.on(".dojoxGridxRow:keydown", function(event){

List.js

@@ -117,7 +117,7 @@ define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "dojo/aspect", "
 		},
 		refreshContent: function(){
 			// summary:
-			//		refreshes the contents of the table
+			//		refreshes the contents of the grid
 			if(this.contentNode){
 				// remove the content so it can be recreated
 				this.contentNode.innerHTML = "";
@@ -141,7 +141,7 @@ define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "dojo/aspect", "
 		},
 		renderCollection: function(results, beforeNode, options){
 			// summary:
-			//		This renders an array or collection of objects as rows in the table, before the
+			//		This renders an array or collection of objects as rows in the grid, before the
 			//		given node. This will listen for changes in the collection if an observe method
 			//		is available (as it should be if it comes from an Observable data store).
 			options = options || {};
@@ -184,7 +184,7 @@ define(["dojo/_base/html", "dojo/_base/declare", "dojo/listen", "dojo/aspect", "
 		},
 		createRow: function(object, beforeNode, i, options){
 			// summary:
-			//		Renders a single row in the table
+			//		Renders a single row in the grid
 			var row = this.renderRow(object, options);
 			row.className = (row.className || "") + " ui-state-default dojoxGridxRow " + (i% 2 == 1 ? "dojoxGridxRowOdd" : "dojoxGridxRowEven");
 			// get the row id for easy retrieval

OnDemandGrid.js

@@ -0,0 +1,3 @@
+define(["dojo/_base/declare", "./Grid", "./OnDemandList"], function(declare, Grid, OnDemandList){
+	return declare([Grid, OnDemandList], {});
+});

OnDemandList.js

@@ -19,7 +19,7 @@ return declare([List], {
 		preloadNode = preloadNode || this.createNode("div", {
 			className: "preload"
 		}, this.contentNode);
-		// this preload node is used to represent the area of the table that hasn't been 
+		// this preload node is used to represent the area of the grid that hasn't been 
 		// downloaded yet
 		preloadNode.preload = true;
 		preloadNode.query = query;

README.md

@@ -1,5 +1,5 @@
 This project provides widgets for lists of data, including simple sets of scrolling rows,
-tables of data, on-demand lazy-loaded data, and various plugins for additional functionality. 
+grids of data, on-demand lazy-loaded data, and various plugins for additional functionality. 
 This project also provides touch scrolling
 for mobile devices with native style momentum, bouncing, and scrollbars. The 
 components are broken down into the following top level widget modules:
@@ -17,15 +17,15 @@ define(["d-list/List"], function(List){
 	... 
 </pre>
 
-<h2>Table</h2>
+<h2>Grid</h2>
 This extends List to provide tabular display of data in columns. The component will
 provide a header for each column that corresponds to columns within the scrollable
-grid of data. The columns of the table are defined by using columns property. The columns
+grid of data. The columns of the grid are defined by using columns property. The columns
 property should have an array of each column definition objects. The column definition object
 may have the following properties (all our optional):
 
-* field - This is the property from the object in the list to display in the body of the table.
-* name - This is the label to show in the header of the table.
+* field - This is the property from the object in the list to display in the body of the grid.
+* name - This is the label to show in the header of the grid.
 * sortable - This indicates whether or not you can sort on this column/field.
 * editable - This indicates whether or not to allow editing of the value (defaults to using the TextEdit plugin)
 * get - This can be a function that will retrieve the value to display from the object in the list.
@@ -34,8 +34,8 @@ may have the following properties (all our optional):
 * className - A DOM/CSS class to assign to the cells in the column. 
 
 The d-list components are designed to be highly CSS driven for optimal performance and organization, so visual styling should be controlled
-through CSS. The table creates classes based fields (or if you provided a className property) with
-the convention of "field-<field-name>". For example, you could define a table and CSS like:
+through CSS. The grid creates classes based fields (or if you provided a className property) with
+the convention of "field-<field-name>". For example, you could define a grid and CSS like:
 <pre>
 &lt;style>
 .field-age {
@@ -46,17 +46,17 @@ the convention of "field-<field-name>". For example, you could define a table an
 }
 &lt;/style>
 &lt;script>
-define(["d-list/Table"], function(Table){
-	table = new Table({
+define(["d-list/Grid"], function(Grid){
+	grid = new Grid({
 			columns: [ // define the columns
 				{name: 'Age', field: 'age'},
 				{name: 'Name', field: 'name'},
 				...
 			]});
-	table.renderCollection(someData);
+	grid.renderCollection(someData);
 &lt;/script>
 </pre>
-The Table class also provides a styleColumn(colId, css) method to programmatically
+The Grid class also provides a styleColumn(colId, css) method to programmatically
 style a column.
 
 <h2>OnDemandList</h2>
@@ -66,7 +66,7 @@ This provides a seamless, intuitive interface for viewing large sets of data in
 This also provides sorting delegation to the store. The OnDemandList requires a store
 property, and will call the query() method on the store to retrieve the data to be rendered.
 OnDemandList will can query() with start and count properties so as to only retrieve
-the necessary objects needed to render the visible rows. As the table is scrolled, more
+the necessary objects needed to render the visible rows. As the grid is scrolled, more
 query() calls will be made to retrieve additional rows. This class provides the following
 properties/methods:
 
@@ -75,20 +75,20 @@ properties/methods:
 performs this by calling store.query() with the sort attribute with the provided parameters.  
 * sortOrder - This holds the current sort order.
 
-<h2>OnDemandTable</h2>
-The composition of Table and OnDemandList. It is nothing more than Table.extend(OnDemandList).
+<h2>OnDemandGrid</h2>
+The composition of Grid and OnDemandList. It is nothing more than Grid.extend(OnDemandList).
 For example:
 <pre>
-define(["d-list/OnDemandTable"], function(Table){
+define(["d-list/OnDemandGrid"], function(Grid){
 	// attach to a DOM id
-	table = new Table({
+	grid = new Grid({
 			store: myStore, // a Dojo object store
 			columns: [ // define the columns
 				{name: 'Column 1', field: 'col1', editable: true, sortable: true},
 				{name: 'Column 2', field: 'col2'},
 				...
 			]
-		}, "table");	... 
+		}, "grid");	... 
 </pre>
 
 <h3>More List API</h3>
@@ -107,47 +107,47 @@ object has the following properties:
 * renderRow(value, options) - This can be overriden to provide a custom rendering of each row
 
 <h1>Plugins</h1>
-The following modules can be used as plugins to add extra functionality to a Table. To use
+The following modules can be used as plugins to add extra functionality to a Grid. To use
 these, simply add the module as a mixin. For example, to create a grid based on 
-OnDemandTable with the selection and keyboard handling plugins, we could do:
+OnDemandGrid with the selection and keyboard handling plugins, we could do:
 <pre>
-define(["dojo", "d-list/OnDemandTable", "d-list/Selection", "d-list/Keyboard"], function(dojo, Table, Selection, Keyboard){
-	// create a table based on plugins
-	MyTable = dojo.declare([Table, Selection, Keyboard]);
+define(["dojo", "d-list/OnDemandGrid", "d-list/Selection", "d-list/Keyboard"], function(dojo, Grid, Selection, Keyboard){
+	// create a grid based on plugins
+	MyGrid = dojo.declare([Grid, Selection, Keyboard]);
 	// instantiate it
-	table = new MyTable({
+	grid = new MyGrid({
 		store: myStore,
 		...
-	}, "table");
+	}, "grid");
 </pre>
 You can also do inline mixin and instantiation:
 <pre>
-	table = dojo.declare([Table, Selection, Keyboard])({
+	grid = dojo.declare([Grid, Selection, Keyboard])({
 		store: myStore,
 		...
-	}, "table");
+	}, "grid");
 </pre>
 Below are the plugins that are available:
 
 <h2>Selection</h2>
-Adds selection capability to a List/Table. The list instance will include a selection property
+Adds selection capability to a List/Grid. The list instance will include a selection property
 with an a Stateful (instance of dojo.Stateful) that represents the selected items. This
 plugin will also cause "select" and "deselect" events to be fired. For example:
 <pre>
-table = dojo.declare([Table, Selection])({
+grid = dojo.declare([Grid, Selection])({
 	selectionMode: "single",
 	...});
-table.on("select", function(event){
+grid.on("select", function(event){
 	// get the row that was just selected
-	var row = table.row(event);
-	for(var id in table.selection){
-		if(table.selection[id] === true){
+	var row = grid.row(event);
+	for(var id in grid.selection){
+		if(grid.selection[id] === true){
 			// iterate through all selected items
 		}
 	}
 });
-table.on("deselect", function(event){
-	var row = table.row(event);
+grid.on("deselect", function(event){
+	var row = grid.row(event);
 	// row was just deselected 
 });
 </pre>
@@ -175,8 +175,8 @@ used by creating an instance and using it was a column in the columns. For examp
 create a columns where the first column has a tree expander and the second column has
 a checkbox, we could do:
 <pre>
-define(["d-list/OnDemandTable", "d-list/Tree", "d-list/CheckBox"], function(Table, Tree, CheckBox){
-	table = new Table({
+define(["d-list/OnDemandGrid", "d-list/Tree", "d-list/CheckBox"], function(Grid, Tree, CheckBox){
+	grid = new Grid({
 			store: myHierarchicalStore, // a Dojo object store
 			columns: [ // define the columns
 				// first column will have a tree expander:
@@ -187,7 +187,7 @@ define(["d-list/OnDemandTable", "d-list/Tree", "d-list/CheckBox"], function(Tabl
 				{name:'Type', field:'type'},
 				...
 			]
-		}, "table");	... 
+		}, "grid");	... 
 </pre>
 
 <h2>Tree</h2>  
@@ -220,6 +220,6 @@ also use one of the the included skins/themes. There is a tundra.css and claro.c
 files in the css directory that can be used to included to skin the d-list to a particular
 look and feel.
 
-<h2>Table Structure for custom CSS Styling</h2>
+<h2>Grid Structure for custom CSS Styling</h2>
 TODO: Document the classes and structure. For now, looking at this in your debugger
 should get you by.