You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/08/11 07:41:30 UTC

[royale-asjs] branch develop updated: initial changes for selection in table

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new 7ac0a5f  initial changes for selection in table
7ac0a5f is described below

commit 7ac0a5f87aa3f6a925a96b9b9172a008a91cd068
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Sat Aug 11 09:41:26 2018 +0200

    initial changes for selection in table
---
 .../src/main/royale/DateComponentsPlayGround.mxml  |  16 +-
 .../src/main/royale/TablePlayGround.mxml           |  27 ++-
 .../projects/Jewel/src/main/resources/defaults.css |  18 +-
 .../projects/Jewel/src/main/royale/JewelClasses.as |   1 +
 .../main/royale/org/apache/royale/jewel/Table.as   | 114 ++++++++++--
 .../controllers/DateChooserMouseController.as      |   2 +-
 .../TableCellSelectionMouseController.as           | 183 +++++++++++++++++++
 .../TableItemRendererFactoryForCollectionView.as   |  75 +++++---
 .../royale/jewel/beads/models/DateChooserModel.as  |   9 +-
 .../apache/royale/jewel/beads/models/TableModel.as |  23 +++
 .../royale/jewel/beads/views/DateChooserView.as    |  18 +-
 .../apache/royale/jewel/beads/views/TableView.as   |  61 +++++--
 .../jewel/itemRenderers/TableItemRenderer.as       |  19 +-
 .../jewel/supportClasses/table/TBodyContentArea.as | 195 +++++++++++++++++++++
 .../src/main/sass/components/_datechooser.sass     |   1 +
 .../Jewel/src/main/sass/components/_table.sass     |  33 ++--
 16 files changed, 713 insertions(+), 82 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml
index 21db5b1..9014595 100644
--- a/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/DateComponentsPlayGround.mxml
@@ -26,14 +26,14 @@ limitations under the License.
 		<![CDATA[
 			private function dateChooserChanged():void
 			{
-				dateChooserSelectedDate.text = "DateChooser selected date: " + dateChooser.selectedDate;
-				//dateField.selectedDate = dateChooser.selectedDate;
+				dateChooserSelectedDate.html = "<strong>DateChooser selected date:</strong> " + dateChooser.selectedDate;
+				dateField.selectedDate = dateChooser.selectedDate;
 			}
 			
 			private function dateFieldChanged():void
 			{
-				dateFieldSelectedDate.text = "DateField selected date: " + dateField.selectedDate;
-				//dateChooser.selectedDate = dateField.selectedDate;
+				dateFieldSelectedDate.html = "<strong>DateField selected date:</strong> " + dateField.selectedDate;
+				dateChooser.selectedDate = dateField.selectedDate;
 			}
 			
 			private function toToday():void
@@ -42,8 +42,8 @@ limitations under the License.
 			}
 			private function dateChooserInit():void
 			{
-				dateChooser.model.firstDayOfWeek = 1;
-				dateChooser.model.dayNames = ['S','M','T','W','T','F','S'];
+				//dateChooser.model.firstDayOfWeek = 1;
+				//dateChooser.model.dayNames = ['S','M','T','W','T','F','S'];
 			}
 		]]>
 	</fx:Script>
@@ -55,13 +55,13 @@ limitations under the License.
 	<j:Card>
 		<html:H3 text="Jewel DateChooser"/>
 		<j:DateChooser id="dateChooser" change="dateChooserChanged()" initComplete="dateChooserInit()"/>
-		<j:Label id="dateChooserSelectedDate" text="DateChooser selected date: "/>
+		<j:Label id="dateChooserSelectedDate" multiline="true" html="&lt;strong>DateChooser selected date:&lt;/strong> "  width="275"/>
 	</j:Card>
 	
 	<j:Card width="400">
 		<html:H3 text="Jewel DateField"/>
 		<j:DateField id="dateField" change="dateFieldChanged()"/>
-		<j:Label id="dateFieldSelectedDate" text="DateField selected date: "/>
+		<j:Label id="dateFieldSelectedDate" multiline="true" html="&lt;strong>DateField selected date:&lt;/strong> "/>
 		<j:Button text="Today!" click="toToday()"/>
 	</j:Card>
 	
diff --git a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
index 7256ac1..d367956 100644
--- a/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TablePlayGround.mxml
@@ -175,7 +175,7 @@ limitations under the License.
 	<j:Card >
 		<html:H3 text="Jewel Table"/>
 
-		<j:Table width="440">
+		<j:Table id="table" width="440" change="onChange(event)">
 			<j:TableColumn dataField="guitarrist" label="Guitarrist"/>
 			<j:TableColumn dataField="album" label="Album" align="center"/>
 			<j:TableColumn dataField="year" label="Release Year" align="right"
@@ -187,6 +187,31 @@ limitations under the License.
 									destinationPropertyName="dataProvider" />
 			</j:beads>
 		</j:Table>
+
+		<j:Button click="clearTable()" text="Clear Table"/>
 		
+		<j:Label id="selected"/>
 	</j:Card>
+
+	<fx:Script>
+		<![CDATA[
+			import org.apache.royale.collections.ArrayList;
+
+			private function onChange(event:Event):void {
+                selected.text = "Selected: " + table.model.selectedCellItem;
+            }
+
+			private function clearTable():void
+			{
+				table.dataProvider = new ArrayList([
+					{guitarrist: "Ssi", album: "Paasadasdssion & Warfare", year: "1990"},
+					{guitarrist: "Steve Morse", album: "Southern Steel", year: "1991"},
+					{guitarrist: "Yngwie Malmsteen", album: "sfsdf Force", year: "2984"},
+					{guitarrist: "Joe sf", album: "Surfing With The Alien", year: "1987"},
+					{guitarrist: "Mark Knopfler", album: "Local sf", year: "1983"}
+				]);
+			}
+		]]>
+	</fx:Script>
+
 </j:SectionContent>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 2c1a2ad..7743e68 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -2840,6 +2840,19 @@ j|Slider {
 .jewel.table .jewel.tablecell > * {
   padding: 12px;
 }
+.jewel.table.fixedHeader {
+  table-layout: fixed;
+}
+.jewel.table.fixedHeader .jewel.tbody {
+  display: block;
+  overflow: auto;
+}
+.jewel.table.fixedHeader .jewel.tbody .jewel.tablerow {
+  display: block;
+}
+.jewel.table.fixedHeader .jewel.tablecell {
+  display: inline-block;
+}
 
 j|Table {
   IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.TableLayout");
@@ -2847,8 +2860,11 @@ j|Table {
   IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TableModel");
   IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
   IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.TableItemRenderer");
-  IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController");
+  IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.TableCellSelectionMouseController");
   IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.TableItemRendererFactoryForCollectionView");
+  IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport");
+  IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
+  IContentView: ClassReference("org.apache.royale.jewel.supportClasses.table.TBodyContentArea");
 }
 
 .jewel.tableitem {
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index f103b9e..bf716a9 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -42,6 +42,7 @@ package
         import org.apache.royale.jewel.beads.controllers.AlertController; AlertController;
         import org.apache.royale.jewel.beads.controllers.ItemRendererMouseController; ItemRendererMouseController;
         import org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController; ListSingleSelectionMouseController;
+        import org.apache.royale.jewel.beads.controllers.TableCellSelectionMouseController; TableCellSelectionMouseController;
         
         import org.apache.royale.jewel.beads.views.ImageView; ImageView;
         import org.apache.royale.jewel.beads.views.SliderView; SliderView;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
index 914b426..d78ceca 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Table.as
@@ -23,6 +23,8 @@ package org.apache.royale.jewel
 	import org.apache.royale.core.ISelectionModel;
 	import org.apache.royale.events.Event;
 	import org.apache.royale.jewel.beads.models.TableModel;
+	import org.apache.royale.utils.ClassSelectorList;
+	import org.apache.royale.utils.IClassSelectorListSupport;
 
 	COMPILE::JS
     {
@@ -68,7 +70,7 @@ package org.apache.royale.jewel
 	 *  @playerversion AIR 2.6
 	 *  @productversion Royale 0.9.3
 	 */
-	public class Table extends DataContainerBase
+	public class Table extends DataContainerBase implements IClassSelectorListSupport
 	{
 		/**
 		 *  constructor.
@@ -83,8 +85,17 @@ package org.apache.royale.jewel
 			super();
 			
 			typeNames = "jewel table";
+			classSelectorList = new ClassSelectorList(this);
 		}
 
+		protected var classSelectorList:ClassSelectorList;
+
+        COMPILE::JS
+        override protected function setClassName(value:String):void
+        {
+            classSelectorList.addNames(value);
+        }
+
 		/**
 		 *  The list of TableColumn objects displayed by this table. 
 		 *  Each column selects different data provider item properties to display.
@@ -105,7 +116,7 @@ package org.apache.royale.jewel
 			TableModel(model).columns = value;
 		}
 
-		// private var _fixedHeader:Boolean;
+		private var _fixedHeader:Boolean;
 		/**
 		 *  Makes the header of the table fixed so the data rows will scroll
 		 *  behind it.
@@ -117,16 +128,16 @@ package org.apache.royale.jewel
 		 *  @playerversion AIR 2.6
 		 *  @productversion Royale 0.9.3
 		 */
-		// public function get fixedHeader():Boolean
-		// {
-		// 	return _fixedHeader;
-		// }
-		// public function set fixedHeader(value:Boolean):void
-		// {
-		// 	_fixedHeader = value;
+		public function get fixedHeader():Boolean
+		{
+			return _fixedHeader;
+		}
+		public function set fixedHeader(value:Boolean):void
+		{
+			_fixedHeader = value;
 
-		// 	// toggleClass("fixedHeader", _fixedHeader);
-		// }
+			toggleClass("fixedHeader", _fixedHeader);
+		}
 
 		// private var _tableDataHeight:Boolean;
 		/**
@@ -223,5 +234,86 @@ package org.apache.royale.jewel
         {
             return addElementToWrapper(this, 'table');
         }
+
+		/**
+         * Add a class selector to the list.
+         * 
+         * @param name Name of selector to add.
+         * 
+         * @langversion 3.0
+         * @playerversion Flash 10.2
+         * @playerversion AIR 2.6
+         * @productversion Royale 0.9.3
+         */
+        public function addClass(name:String):void
+        {
+            COMPILE::JS
+            {
+            classSelectorList.add(name);
+            }
+        }
+
+        /**
+         * Removes a class selector from the list.
+         * 
+         * @param name Name of selector to remove.
+         *
+         * @royaleignorecoercion HTMLElement
+         * @royaleignorecoercion DOMTokenList
+         * 
+         * @langversion 3.0
+         * @playerversion Flash 10.2
+         * @playerversion AIR 2.6
+         * @productversion Royale 0.9.3
+         */
+        public function removeClass(name:String):void
+        {
+            COMPILE::JS
+            {
+            classSelectorList.remove(name);
+            }
+        }
+
+        /**
+         * Add or remove a class selector to/from the list.
+         * 
+         * @param name Name of selector to add or remove.
+         * @param value True to add, False to remove.
+         * 
+         * @langversion 3.0
+         * @playerversion Flash 10.2
+         * @playerversion AIR 2.6
+         * @productversion Royale 0.9.3
+         */
+        public function toggleClass(name:String, value:Boolean):void
+        {
+            COMPILE::JS
+            {
+            classSelectorList.toggle(name, value);
+            }
+        }
+
+        /**
+		 *  Search for the name in the element class list 
+		 *
+         *  @param name Name of selector to find.
+         *  @return return true if the name is found or false otherwise.
+         * 
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function containsClass(name:String):Boolean
+        {
+            COMPILE::JS
+            {
+            return classSelectorList.contains(name);
+            }
+            COMPILE::SWF
+            {//not implemented
+            return false;
+            }
+        }
     }
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateChooserMouseController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateChooserMouseController.as
index b62ec8a..863a8e5 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateChooserMouseController.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DateChooserMouseController.as
@@ -81,7 +81,7 @@ package org.apache.royale.jewel.beads.controllers
         private function tableHandler(event:Event):void
         {
             var table:DateChooserTable = event.target as DateChooserTable;
-            model.selectedDate = table.selectedItem as Date;
+            model.selectedDate = table.selectedItem[table.model.labelField] as Date;
         }
 
 		/**
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/TableCellSelectionMouseController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/TableCellSelectionMouseController.as
new file mode 100644
index 0000000..bfeb988
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/TableCellSelectionMouseController.as
@@ -0,0 +1,183 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.controllers
+{
+	import org.apache.royale.core.IBeadController;
+	import org.apache.royale.core.IItemRendererParent;
+	import org.apache.royale.core.IRollOverModel;
+	import org.apache.royale.core.ISelectableItemRenderer;
+	import org.apache.royale.core.ISelectionModel;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.core.IBeadView;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.events.IEventDispatcher;
+	import org.apache.royale.events.ItemAddedEvent;
+	import org.apache.royale.events.ItemClickedEvent;
+	import org.apache.royale.events.ItemRemovedEvent;
+	import org.apache.royale.jewel.beads.views.TableView;
+    import org.apache.royale.html.supportClasses.DataItemRenderer;
+    import  org.apache.royale.jewel.beads.models.TableModel;
+
+    /**
+     *  The TableCellSelectionMouseController class is a controller for
+     *  org.apache.royale.jewel.Table.  Controllers
+     *  watch for events from the interactive portions of a View and
+     *  update the data model or dispatch a semantic event.
+     *  This controller watches for events from the item renderers
+     *  and updates an ISelectionModel (which only supports single
+     *  selection).  Other controller/model pairs would support
+     *  various kinds of multiple selection.
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9
+     */
+	public class TableCellSelectionMouseController implements IBeadController
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9
+         */
+		public function TableCellSelectionMouseController()
+		{
+		}
+		
+        /**
+         *  The model.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9
+         */
+		protected var model:ISelectionModel;
+
+        /**
+         *  The view.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9
+         */
+        protected var view:TableView;
+
+        /**
+         *  The parent of the item renderers.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9
+         */
+        protected var dataGroup:IItemRendererParent;
+
+		private var _strand:IStrand;
+		
+        /**
+         *  @copy org.apache.royale.core.IBead#strand
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9
+         *  @royaleignorecoercion org.apache.royale.core.ISelectionModel
+         *  @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+         *  @royaleignorecoercion org.apache.royale.core.IListView
+         */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			model = value.getBeadByType(ISelectionModel) as ISelectionModel;
+			view = value.getBeadByType(IBeadView) as TableView;
+			IEventDispatcher(_strand).addEventListener("itemAdded", handleItemAdded);
+			IEventDispatcher(_strand).addEventListener("itemRemoved", handleItemRemoved);
+		}
+		
+        /**
+         * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+         */
+		protected function handleItemAdded(event:ItemAddedEvent):void
+		{
+			IEventDispatcher(event.item).addEventListener("itemClicked", selectedHandler);
+			IEventDispatcher(event.item).addEventListener("itemRollOver", rolloverHandler);
+			IEventDispatcher(event.item).addEventListener("itemRollOut", rolloutHandler);
+		}
+		
+        /**
+         * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+         */
+		protected function handleItemRemoved(event:ItemRemovedEvent):void
+		{
+			IEventDispatcher(event.item).removeEventListener("itemClicked", selectedHandler);
+			IEventDispatcher(event.item).removeEventListener("itemRollOver", rolloverHandler);
+			IEventDispatcher(event.item).removeEventListener("itemRollOut", rolloutHandler);
+		}
+		
+		protected function selectedHandler(event:ItemClickedEvent):void
+        {
+            var renderer:DataItemRenderer = event.currentTarget as DataItemRenderer;
+			// if (renderer) {
+			// 	trace(renderer.rowIndex + ", " + renderer.columnIndex + " :: " + renderer.dataField + ", " + renderer.labelField);
+			// }
+			(model as TableModel).selectedCellRenderer = renderer;
+            model.labelField = renderer.labelField;
+			(model as TableModel).selectedCellItem = event.data[model.labelField];
+            trace("model.labelField: " + model.labelField);
+            model.selectedIndex = event.index;
+            trace(model.selectedIndex);
+			model.selectedItem = event.data;
+
+            trace(model.selectedItem);
+            view.host.dispatchEvent(new Event("change"));
+        }
+		
+		/**
+		 * @royaleemitcoercion org.apache.royale.core.ISelectableItemRenderer
+         * @royaleignorecoercion org.apache.royale.core.IRollOverModel
+		 */
+		protected function rolloverHandler(event:Event):void
+		{
+			var renderer:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+			if (renderer) {
+				IRollOverModel(model).rollOverIndex = renderer.index;
+			}
+		}
+		
+		/**
+		 * @royaleemitcoercion org.apache.royale.core.ISelectableItemRenderer
+         * @royaleignorecoercion org.apache.royale.core.IRollOverModel
+		 */
+		protected function rolloutHandler(event:Event):void
+		{
+			var renderer:ISelectableItemRenderer = event.currentTarget as ISelectableItemRenderer;
+			if (renderer) {
+				renderer.hovered = false;
+				renderer.down = false;
+				IRollOverModel(model).rollOverIndex = -1;
+			}
+		}
+	
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableItemRendererFactoryForCollectionView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableItemRendererFactoryForCollectionView.as
index 2d3c13c..2c2ea26 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableItemRendererFactoryForCollectionView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/itemRenderers/TableItemRendererFactoryForCollectionView.as
@@ -20,6 +20,7 @@ package org.apache.royale.jewel.beads.itemRenderers
 {
     import org.apache.royale.collections.ICollectionView;
     import org.apache.royale.core.IChild;
+    import org.apache.royale.core.IParent;
 	import org.apache.royale.core.IBeadModel;
 	import org.apache.royale.core.IListPresentationModel;
 	import org.apache.royale.core.SimpleCSSStyles;
@@ -36,9 +37,10 @@ package org.apache.royale.jewel.beads.itemRenderers
 	import org.apache.royale.jewel.supportClasses.table.TableCell;
 	import org.apache.royale.jewel.supportClasses.table.TableHeaderCell;
 	import org.apache.royale.jewel.supportClasses.table.TableRow;
-	import org.apache.royale.jewel.supportClasses.table.TBody;
 	import org.apache.royale.jewel.supportClasses.table.THead;
 	import org.apache.royale.jewel.supportClasses.table.TableColumn;
+	import org.apache.royale.jewel.supportClasses.table.TBodyContentArea;
+	import org.apache.royale.html.supportClasses.DataItemRenderer;
 
     /**
 	 * This class creates itemRenderer instances from the data contained within an ICollectionView
@@ -53,6 +55,12 @@ package org.apache.royale.jewel.beads.itemRenderers
 			super(target);
 		}
 
+        protected var view:TableView;
+        protected var model:TableModel;
+        protected var table:Table;
+
+		private var tbody:TBodyContentArea;
+
         /**
 		 *  initialize bead
 		 *
@@ -66,19 +74,12 @@ package org.apache.royale.jewel.beads.itemRenderers
 		override protected function initComplete(event:Event):void
 		{
             view = _strand.getBeadByType(IListView) as TableView;
-            tbody = view.tbody;
             model = _strand.getBeadByType(IBeadModel) as TableModel;
             table = _strand as Table;
 
 			super.initComplete(event);
 		}
 
-        protected var view:TableView;
-        protected var model:TableModel;
-        protected var table:Table;
-
-        private var tbody:TBody;
-
         /**
 		 * @private
 		 * @royaleignorecoercion org.apache.royale.collections.ICollectionView
@@ -88,6 +89,7 @@ package org.apache.royale.jewel.beads.itemRenderers
 		 */
 		override protected function dataProviderChangeHandler(event:Event):void
 		{
+			// -- 1) CLEANING PHASE
             if (!dataProviderModel)
 				return;
 			var dp:ICollectionView = dataProviderModel.dataProvider as ICollectionView;
@@ -101,32 +103,28 @@ package org.apache.royale.jewel.beads.itemRenderers
 			dped.addEventListener(CollectionEvent.ITEM_UPDATED, itemUpdatedHandler);
 			
             // THEAD - remove header items
-			dataGroup.removeAllItemRenderers();
-
-            // TBody - remove data items
-			if(tbody != null)
-			{
-				while (tbody.numElements > 0) {
-					var child:IChild = tbody.getElementAt(0);
-					tbody.removeElement(child);
-				}
-			}
+			removeElements(view.thead);
+			
+            // TBodyContentArea - remove data items
+			tbody = dataGroup as TBodyContentArea;
+			//tbody.removeAllItemRenderers(); -- this doesn't work since we 're wrappint IR in other pieces
+			removeElements(tbody);
+			
+			// -- 2) CREATION PHASE
 
             // -- add the header
             createHeader();
 			
 			var presentationModel:IListPresentationModel = _strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
-			labelField = dataProviderModel.labelField;
+			//labelField = dataProviderModel.labelField;
 			
-            // -- add the data items
-            table.addElement(tbody);
-
             var row:TableRow;
             var column:TableColumn;
             var tableCell:TableCell;
             var ir:ITextItemRenderer;
 
 			var n:int = dp.length;
+			var index:int = 0;
 			for (var i:int = 0; i < n; i++)
 			{
                 row = new TableRow();
@@ -141,20 +139,27 @@ package org.apache.royale.jewel.beads.itemRenderers
                         ir = column.itemRenderer.newInstance() as ITextItemRenderer;
                     } else
                     {
-                        ir = itemRendererFactory.createItemRenderer(dataGroup) as ITextItemRenderer;
+                        ir = itemRendererFactory.createItemRenderer(tbody) as ITextItemRenderer;
                     }
 
                     tableCell.addElement(ir);
                     row.addElement(tableCell);
 
-                    ir.labelField = column.dataField;
+					labelField =  column.dataField;
+                    // ir.labelField = labelField;
                     var item:Object = dp.getItemAt(i);
-                    fillRenderer(i, item, ir, presentationModel);
+                    fillRenderer(index++, item, ir, presentationModel);
+
+                    (ir as DataItemRenderer).dataField = labelField;
+					(ir as DataItemRenderer).rowIndex = i;
+					(ir as DataItemRenderer).columnIndex = j;
                     
                     if(column.align != "")
                     {
                         ir.align = column.align;
                     }
+
+					tbody.dispatchItemAdded(ir);
                 }
                 tbody.addElement(row);
 			}
@@ -163,6 +168,19 @@ package org.apache.royale.jewel.beads.itemRenderers
             table.dispatchEvent(new Event("layoutNeeded"));
         }
 
+		public function removeElements(container: IParent):void
+		{
+			if(container != null)
+			{
+				trace(container);
+				trace(" removing all");
+				while (container.numElements > 0) {
+					var child:IChild = container.getElementAt(0);
+					container.removeElement(child);
+				}
+			}
+		}
+
         /**
 		 * @private
 		 * @royaleignorecoercion org.apache.royale.core.UIBase
@@ -172,9 +190,9 @@ package org.apache.royale.jewel.beads.itemRenderers
 										itemRenderer:ITextItemRenderer,
 										presentationModel:IListPresentationModel):void
 		{
-			// dataGroup.addItemRendererAt(itemRenderer, index);
+			// tbody.addItemRendererAt(itemRenderer, index);
 			
-			// itemRenderer.labelField = labelField;
+			itemRenderer.labelField = labelField;
 			
 			if (presentationModel) {
 				var style:SimpleCSSStyles = new SimpleCSSStyles();
@@ -204,7 +222,8 @@ package org.apache.royale.jewel.beads.itemRenderers
 
             if (createHeaderRow) 
             {
-                view.thead = new THead();
+				if(view.thead == null)
+                	view.thead = new THead();
 				var thead:THead = view.thead;
 				var headerRow:TableRow = new TableRow();
 				
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DateChooserModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DateChooserModel.as
index d975af8..48d241a 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DateChooserModel.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/DateChooserModel.as
@@ -265,17 +265,24 @@ package org.apache.royale.jewel.beads.models
          */
         public function getIndexForSelectedDate():Number
         {
+			trace("getIndexForSelectedDate");
             if (!_selectedDate) return -1;
+			trace("getIndexForSelectedDate 1");
 
             var str:String = _selectedDate.toDateString();
+			trace("getIndexForSelectedDate 2");
 
             for(var i:int=0; i < _days.length; i++) {
+				trace("getIndexForSelectedDate - i");
                 var test:Date = _days[i] as Date;
 				
 				if (test && test.toDateString() == str)
+				{
+					trace("getIndexForSelectedDate - index: " + i);
 					return i;
-
+				}
             }
+			trace("getIndexForSelectedDate 3");
             return -1;
 		}
 	}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TableModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TableModel.as
index 6c5b7d8..5444181 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TableModel.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/TableModel.as
@@ -19,6 +19,7 @@
 package org.apache.royale.jewel.beads.models
 {
 	import org.apache.royale.jewel.beads.models.ArrayListSelectionModel;
+	import org.apache.royale.html.supportClasses.DataItemRenderer;
 	
 	public class TableModel extends ArrayListSelectionModel
 	{
@@ -36,5 +37,27 @@ package org.apache.royale.jewel.beads.models
 		{
 			_columns = value;
 		}
+
+		private var _selectedCellItem:Object;
+		public function get selectedCellItem():Object
+		{
+			return _selectedCellItem;
+		}
+		public function set selectedCellItem(value:Object):void
+		{
+			_selectedCellItem = value;
+		}
+
+		private var _selectedCellRenderer:DataItemRenderer;
+		public function get selectedCellRenderer():DataItemRenderer
+		{
+			return _selectedCellRenderer;
+		}
+		public function set selectedCellRenderer(value:DataItemRenderer):void
+		{
+			_selectedCellRenderer = value;
+		}
+
+		
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as
index 628c82d..42b63f4 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/DateChooserView.as
@@ -23,6 +23,7 @@ package org.apache.royale.jewel.beads.views
 	import org.apache.royale.core.IBeadModel;
 	import org.apache.royale.core.IBeadView;
 	import org.apache.royale.core.IStrand;
+	import org.apache.royale.core.IBeadController;
 	import org.apache.royale.core.UIBase;
 	import org.apache.royale.events.Event;
 	import org.apache.royale.events.IEventDispatcher;
@@ -36,6 +37,8 @@ package org.apache.royale.jewel.beads.views
 	import org.apache.royale.jewel.supportClasses.table.TableHeaderCell;
 	import org.apache.royale.jewel.supportClasses.table.TableColumn;
 	import org.apache.royale.utils.loadBeadFromValuesManager;
+	// import org.apache.royale.jewel.beads.controllers.TableCellSelectionMouseController;
+	// import org.apache.royale.jewel.beads.controllers.DateChooserTableCellSelectionMouseController;
 
 	/**
 	 * The DateChooserView class is a view bead for the DateChooser.
@@ -166,6 +169,9 @@ package org.apache.royale.jewel.beads.views
 			_daysTable.percentWidth = 100;
 			}
 			getHost().addElement(_daysTable, false);
+			// var controller:TableCellSelectionMouseController = _daysTable.getBeadByType(IBeadController) as TableCellSelectionMouseController;
+			// _daysTable.removeBead(controller);
+			// _daysTable.addBead(new DateChooserTableCellSelectionMouseController());
 			
 			IEventDispatcher(_daysTable).dispatchEvent( new Event("itemsCreated") );
 			model.addEventListener("selectedDateChanged", selectionChangeHandler);
@@ -224,6 +230,7 @@ package org.apache.royale.jewel.beads.views
 		 */
 		private function updateDisplay():void
 		{
+			trace("updateDisplay");
 			_monthLabel.text = model.monthNames[model.displayedMonth] + " " + String(model.displayedYear);
 
 			var len:int = columns.length;
@@ -234,8 +241,7 @@ package org.apache.royale.jewel.beads.views
 			}
 
 			_daysTable.columns = columns;
-
-
+			
 			var currrentMonth:Array = [];
 			var dayIndex:int = 0;
 			for(var i:int = 0; i < model.days.length/7; i++)
@@ -248,13 +254,11 @@ package org.apache.royale.jewel.beads.views
 				}
 			}
 			_daysTable.dataProvider = new ArrayList(currrentMonth);
-			_daysTable.dispatchEvent( new Event("tableComplete") );
-
-			_daysTable.selectedIndex = model.getIndexForSelectedDate();
 			
 			var view:TableView = _daysTable.getBeadByType(IBeadView) as TableView;
 			view.thead.addElementAt(buttonsRow, 0, false);
 			
+			_daysTable.selectedIndex = model.getIndexForSelectedDate();
 		}
 
 		/**
@@ -262,10 +266,11 @@ package org.apache.royale.jewel.beads.views
 		 */
 		private function selectionChangeHandler(event:Event):void
 		{
+			trace("*selectionChangeHandler*");
 			updateDisplay();
 
 			getHost().dispatchEvent(new Event("selectedDateChanged"));
-			getHost().dispatchEvent( new Event("change") );
+			getHost().dispatchEvent(new Event("change"));
 		}
 
 		/**
@@ -273,6 +278,7 @@ package org.apache.royale.jewel.beads.views
 		 */
 		private function handleModelChange(event:Event):void
 		{
+			trace("*handleModelChange*");
 			updateDisplay();
 		}
 	}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as
index 2397621..3c3435c 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/TableView.as
@@ -21,10 +21,13 @@ package org.apache.royale.jewel.beads.views
 	import org.apache.royale.html.beads.DataContainerView;
 	import org.apache.royale.core.UIBase;
 	import org.apache.royale.core.IStrand;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.core.ISelectableItemRenderer;
 	import org.apache.royale.jewel.beads.views.ListView;
-	import org.apache.royale.jewel.supportClasses.table.TBody;
 	import org.apache.royale.jewel.supportClasses.table.THead;
 	import org.apache.royale.jewel.supportClasses.table.TFoot;
+	import org.apache.royale.jewel.supportClasses.table.TBodyContentArea;
+	import  org.apache.royale.jewel.beads.models.TableModel;
 	
 	/**
 	 *  The TableView class creates the visual elements of the org.apache.royale.jewel.Table component.
@@ -62,32 +65,70 @@ package org.apache.royale.jewel.beads.views
 		override public function set strand(value:IStrand):void
 		{
 			super.strand = value;
-
-			createChildren();
 		}
 
+		protected var model:TableModel;
+
 		/**
-		 * @royalesuppresspublicvarwarning
+		 * @private
+		 * @royaleignorecoercion org.apache.royale.core.ISelectionModel
 		 */
-		public var thead:THead;
+		override protected function handleInitComplete(event:Event):void
+		{
+			model = _strand.getBeadByType(TableModel) as TableModel;
+			model.addEventListener("selectedIndexChanged", selectionChangeHandler);
+			model.addEventListener("rollOverIndexChanged", rollOverIndexChangeHandler);
+
+			super.handleInitComplete(event);
+		}
 
 		/**
 		 * @royalesuppresspublicvarwarning
 		 */
-		public var tbody:TBody;
-		
+		public var thead:THead;
+
 		/**
 		 * @royalesuppresspublicvarwarning
 		 */
 		public var tfoot:TFoot;
 
+		public var lastSelectedRenderer:ISelectableItemRenderer;
+
 		/**
 		 * @private
+		 * @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
 		 */
-		private function createChildren():void
+		override protected function selectionChangeHandler(event:Event):void
 		{
-			tbody = new TBody();
-			(_strand as UIBase).addElement(tbody);
+			trace("selectionChangeHandler 1");
+			if(lastSelectedRenderer)
+				lastSelectedRenderer.selected = false;
+
+			// var tbody:TBodyContentArea = contentView as TBodyContentArea;
+			// var renderers:Array = tbody.itemRenderers;
+			
+			var ir:ISelectableItemRenderer = model.selectedCellRenderer as ISelectableItemRenderer;
+			trace(ir);
+			if(ir)
+				ir.selected = true;
+
+			lastSelectedRenderer = ir;
+			trace(lastSelectedRenderer);
+			// trace(event);
+			// trace("lastSelectedIndex: " + lastSelectedIndex);
+
+			// // var ir:ISelectableItemRenderer = dataGroup.getItemRendererForIndex(lastSelectedIndex) as ISelectableItemRenderer;
+			// var ir:ISelectableItemRenderer = renderers[lastSelectedIndex] as ISelectableItemRenderer;
+			// trace(ir);
+			// if(ir)
+			// 	ir.selected = false;
+			// // ir = dataGroup.getItemRendererForIndex(listModel.selectedIndex) as ISelectableItemRenderer;
+			// ir = renderers[listModel.selectedIndex] as ISelectableItemRenderer;
+			// trace(ir);
+			// if(ir)
+			// 	ir.selected = true;
+
+			// lastSelectedIndex = listModel.selectedIndex;
 		}
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TableItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TableItemRenderer.as
index 6ef2345..39ebc4b 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TableItemRenderer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/TableItemRenderer.as
@@ -183,12 +183,27 @@ package org.apache.royale.jewel.itemRenderers
         COMPILE::JS
         override protected function createElement():WrappedHTMLElement
         {
-			return addElementToWrapper(this,'div');
+			addElementToWrapper(this,'div');
+
+			if(MXMLDescriptor == null)
+			{
+				textNode = document.createTextNode('') as Text;
+				element.appendChild(textNode);
+			}
             // itemRenderers should provide something for the background to handle
             // the selection and highlight
             // backgroundView = element;
-            // return element;
+            return element;
         }
 
+		/**
+		 * @private
+		 */
+		override public function updateRenderer():void
+		{
+            toggleClass("selected", selected);
+			
+		}
+
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TBodyContentArea.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TBodyContentArea.as
new file mode 100644
index 0000000..40bbf85
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/table/TBodyContentArea.as
@@ -0,0 +1,195 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.supportClasses.table
+{
+    import org.apache.royale.core.IChild;
+    import org.apache.royale.core.IItemRenderer;
+    import org.apache.royale.core.IItemRendererParent;
+	import org.apache.royale.events.IEventDispatcher;
+	import org.apache.royale.events.ItemAddedEvent;
+	import org.apache.royale.events.ItemRemovedEvent;
+	import org.apache.royale.html.supportClasses.ContainerContentArea;
+	import org.apache.royale.html.supportClasses.DataItemRenderer;
+
+    COMPILE::JS
+    {
+        import org.apache.royale.core.WrappedHTMLElement;
+		import org.apache.royale.html.util.addElementToWrapper;
+    }
+
+	/**
+	 *  The TBodyContentArea class is a building block of Jewel SimpleTable and Table components, 
+	 *  is used in TableView and represents an HTML <tbody> element
+	 *  
+     *  @toplevel
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.3
+	 */
+	public class TBodyContentArea extends ContainerContentArea implements IItemRendererParent
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function TBodyContentArea()
+		{
+			super();
+
+			typeNames = "jewel tbody";
+		}
+		
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+			return addElementToWrapper(this, 'tbody');
+        }
+
+		public var itemRenderers:Array = [];
+
+		/*
+		* IItemRendererParent
+		*/
+		
+		/**
+		 * @copy org.apache.royale.core.IItemRendererParent#addItemRenderer()
+		 * @private
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.8
+		 */
+		public function addItemRenderer(renderer:IItemRenderer, dispatchAdded:Boolean):void
+		{
+			// var tableCell:TableCell = new TableCell();
+			// tableCell.addElement(renderer);
+			// addElement(tableCell, dispatchAdded);
+			// dispatchItemAdded(renderer);
+		}
+		
+		/**
+		 * @copy org.apache.royale.core.IItemRendererParent#addItemRendererAt()
+		 * @private
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 */
+		public function addItemRendererAt(renderer:IItemRenderer, index:int):void
+		{
+			// var tableCell:TableCell = new TableCell();
+			// tableCell.addElement(renderer);
+			// addElementAt(tableCell, index, true);
+			// dispatchItemAdded(renderer);
+		}
+		
+		/**
+		 * @royaleignorecoercion org.apache.royale.events.IEventDispatcher
+		 */
+		public function dispatchItemAdded(renderer:IItemRenderer):void
+		{
+			itemRenderers.push(renderer);
+
+			var newEvent:ItemAddedEvent = new ItemAddedEvent("itemAdded");
+			newEvent.item = renderer;
+			
+			(host as IEventDispatcher).dispatchEvent(newEvent);
+		}
+		
+		/**
+		 * @copy org.apache.royale.core.IItemRendererParent#removeItemRenderer()
+		 * @private
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.8
+		 */
+		public function removeItemRenderer(renderer:IItemRenderer):void
+		{
+			// removeElement(renderer, true);
+			
+			// var newEvent:ItemRemovedEvent = new ItemRemovedEvent("itemRemoved");
+			// newEvent.item = renderer;
+			
+			// (host as IEventDispatcher).dispatchEvent(newEvent);
+		}
+		
+		/**
+		 * @copy org.apache.royale.core.IItemRendererParent#removeAllItemRenderers()
+		 * @private
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.8
+		 */
+		public function removeAllItemRenderers():void
+		{
+			while (numElements > 0) {
+				var child:IChild = getElementAt(0);
+				removeItemRenderer(child as IItemRenderer);
+			}
+		}
+		
+		/**
+		 *  @copy org.apache.royale.core.IItemRendererParent#getItemRendererForIndex()
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.8
+		 */
+		public function getItemRendererForIndex(index:int):IItemRenderer
+		{
+			if (index < 0 || index >= numElements) return null;
+			// return getElementAt(index) as IItemRenderer;
+			return itemRenderers[index] as IItemRenderer;
+		}
+		
+		/**
+		 *  Refreshes the itemRenderers. Useful after a size change by the data group.
+		 *
+		 *  @copy org.apache.royale.core.IItemRendererParent#updateAllItemRenderers()
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.8
+		 */
+		public function updateAllItemRenderers():void
+		{
+			var n:Number = numElements;
+			for (var i:Number = 0; i < n; i++)
+			{
+				var renderer:DataItemRenderer = getItemRendererForIndex(i) as DataItemRenderer;
+				if (renderer) {
+					renderer.setWidth(this.width,true);
+					renderer.adjustSize();
+				}
+			}
+		}
+    }
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
index 51dd8cb..3ed41a8 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_datechooser.sass
@@ -49,6 +49,7 @@ j|DateChooser
     IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateChooserMouseController")
 
 j|DateChooserTable
+    // IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateChooserTableCellSelectionMouseController")
     // IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.ListItemRenderer")
     // IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView")
     // IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_table.sass b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
index 6e9cd18..80b7c87 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_table.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_table.sass
@@ -84,16 +84,22 @@ $tableitem-min-height: 34px
         > *
             padding: 12px
         
-    // &.fixedHeader
-    //     table-layout: fixed
-
-    //     .jewel.thead tr
-    //         display: block
-
-    //     .jewel.tbody
-    //         display: block
-    //         overflow: auto
-    //         width: 100%
+    &.fixedHeader
+        table-layout: fixed
+
+        // .jewel.thead tr
+        //     display: block
+
+        .jewel.tbody
+            display: block
+            overflow: auto
+            // width must be table width
+            
+            .jewel.tablerow
+                display: block
+            
+        .jewel.tablecell
+            display: inline-block
 
 j|Table
     IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.TableLayout")
@@ -101,10 +107,11 @@ j|Table
     IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TableModel")
     IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory")
     IItemRenderer: ClassReference("org.apache.royale.jewel.itemRenderers.TableItemRenderer")
-    IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.ListSingleSelectionMouseController")
+    IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.TableCellSelectionMouseController")
     IDataProviderItemRendererMapper: ClassReference("org.apache.royale.jewel.beads.itemRenderers.TableItemRendererFactoryForCollectionView")
-    // IViewport: ClassReference("org.apache.royale.html.supportClasses.scrollbar.ScrollingViewport")
-    // IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
+    IViewport: ClassReference("org.apache.royale.jewel.supportClasses.scrollbar.ScrollingViewport")
+    IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel")
+    IContentView: ClassReference("org.apache.royale.jewel.supportClasses.table.TBodyContentArea")
 
 
 .jewel.tableitem