var myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnDefs, myDataSource);

Straight from the docs. No no no!

Instead, you should pass in an unattached DOM node instead of a string!

Try this code on for size:

var myDataTable = new YAHOO.widget.DataTable(document.createElement('div'), myColumnDefs, myDataSource); 
myDataTable.subscribe('initEvent',function() {
    var d = document.getElementById('myContainer'); // CHANGE THIS -- match the id of the container you want.
    while(d.firstChild) { d.removeChild(d.firstChild); }; // remove previous DataTables
    d.appendChild(this._elContainer); });
}

This method adds an extra row to the YUI DataTable when a row is selected, below the selected row. This allows the developer to add additional content that might not be applicable to the column constraints of a typical datatable or grid and allow that content be displayed more fluidly inside a single row spanning all of the viewable columns.

I know you’re anxious for an example, so let’s see some screenshots of a simple YUI DataTable:

Turns into this when a row is selected:

Click any of the above images for a live example.

Any HTML can be added. You can make an AJAX call and put the result into the newly inserted row (that will be left as an exercise for the reader [you]).

I know you’re asking yourself, how the hell do I add this to my YUI DataTable? WHERE IS THE DAMN SOURCE CODE? Calm down, you know I’m getting to it.

How To

1. Include the ymod-tableExtension-2.3.0.js file.
2. Create your DataTable. If you don’t know how to do this, go to the official documentation for help and examples.
3. Make sure your DataTable has the selectionMode parameter set to ‘single’. This can be achieved by passing in { selectionMode: 'single' } in as the 4th argument to the DataTable constructor.
4. Use the following code to setup your table extension:

// myDataTable is your DataTable object
YAHOO.ymod.tableExtension.setup( myDataTable, function( contentDiv )
{
    var myContent = '';
    var selectedRows = this.getSelectedRows();
    if( selectedRows.length > 0 )
    {
        myContent += 'Do something based on<br />the row that is selected!';
    }
    contentDiv.innerHTML = myContent;
} );

The setup function is basically a convenience method to add the event listeners. You can just as easily do this yourself manually:

// myDataTable is your DataTable object.
myDataTable.subscribe( 'headerRowMousedownEvent', YAHOO.ymod.tableExtension.cleanUp );
myDataTable.subscribe( 'rowClickEvent', YAHOO.ymod.tableExtension.selectRow, function( contentDiv ) { /* same as function appears above */ } );

CSS

Here’s some CSS hooks to do some styling. The expanded row will include the yui-dt-selected class by default.

/* The original table row clicked on */
tr.ymod-expanded {}
/* Row containing the expanded content */
tr.ymod-expandedData {}
/* Div containing the expanded content inside the row */
tr.ymod-expandedData div.ymod-expandedDataContent { background-color: navy; padding: 2px 6px; }

Limitations

– Resorting removes the expanded content. Otherwise it was messing with the sort.
– It only works with single row selection mode, which allows only one row to be selected at a time. This is not the default (standard), which allows multiple rows to be selected with SHIFT or CTRL. Feel free to modify this to work with other modes!

Download ymod-tableExtension-2.3.0.js

Do you want to fit more content onto your DataTable, but don’t know how? Do you wish that you had fewer columns, or more horizontal screen-estate? Well now you can enlarge your table easily with these simple functions! Instead of adding more information into additional columns, we have used our patented method of not actually patenting anything to bring you a secret formula that will allow you to dynamically insert rows into your table, designed for holding additional, non-constrained customizable content!

Do you mean to tell me that your formula will give that special lady in your life the DataTable that she has always wanted?

Of course! In fact, we guarantee this DataTable to satisfy all of the women you know and don’t know in the world or we’ll give you a full refund of the purchase price!

Wow! How does it work?

When you click on a row in the DataTable, it inserts a child row beneath the row with an HTML string passed in to populate the dynamic content. When you click on the parent row or the new row that was inserted, the content disappears! It’s that easy! You don’t have to apply any gross awful smelling creams, or take any large horse-sized pills for this to work! You literally only use the following code to do it:

Usage Code:

var myDataTable = new YAHOO.widget.DataTable("myContainer",myColumnSet,myDataSource);  
myDataTable.subscribe("cellClickEvent", myDataTable.onEventSelectRow); // make sure you're firing the row selection event
myDataTable.subscribe("cellClickEvent", function( e ) {
   var myCustomHtml = 'Hello, this is my expanded content.<br />:-)<br />'; // generate the string, could use an ajax call if you wanted.
   YAHOO.ymod.datatable.clickAndExpand.call( this, e, myCustomHtml ); // if you do use an ajax call, this function returns a reference to the newly created div that you can put the ajax results into.
} );

Library Code:

YAHOO.namespace( 'YAHOO.ymod.datatable' );
YAHOO.ymod.datatable.clickAndExpand = function( e, expandedHtml )
{
	var selectedRows = this.getSelectedRows();
	if( selectedRows.length > 0 )
	{
		if( YAHOO.util.Dom.hasClass( selectedRows[ 0 ], 'ymod-expandedData' ) )
		{
			YAHOO.util.Dom.removeClass( selectedRows[ 0 ].previousSibling, 'expanded' );
			selectedRows[ 0 ].parentNode.removeChild( selectedRows[ 0 ] );
		} else if( !YAHOO.util.Dom.hasClass( selectedRows[ 0 ], 'ymod-expanded' ) ) {
			var newRow = document.createElement( 'tr' );
			var newCell = document.createElement( 'td' );
			var newDiv = document.createElement( 'div' );
			YAHOO.util.Dom.addClass( newDiv, 'ymod-expandedDataContent' );
			if( expandedHtml != null ) newDiv.innerHTML = expandedHtml;
			newCell.appendChild( newDiv );
			newCell.colSpan = selectedRows[ 0 ].childNodes.length;
			newRow.appendChild( newCell );		
			YAHOO.util.Dom.addClass( newRow, 'ymod-expandedData' );
			if( YAHOO.util.Dom.hasClass( selectedRows[ 0 ], 'yui-dt-odd' ) ) YAHOO.util.Dom.addClass( newRow, 'yui-dt-odd' );
			else if( YAHOO.util.Dom.hasClass( selectedRows[ 0 ], 'yui-dt-even' ) ) YAHOO.util.Dom.addClass( newRow, 'yui-dt-even' );
			YAHOO.util.Dom.addClass( selectedRows[ 0 ], 'ymod-expanded' );
			selectedRows[ 0 ].parentNode.insertBefore( newRow, selectedRows[ 0 ].nextSibling );
			YAHOO.util.Event.addListener( newRow, 'click', function( e )
			{
				YAHOO.ymod.datatable.collapseRow( this );
				YAHOO.util.Event.stopEvent( e );
			} );
			YAHOO.util.Dom.removeClass( selectedRows[ 0 ], 'yui-dt-selected' );
			YAHOO.util.Event.stopEvent( e );
			return newDiv;
		} else {
			selectedRows[ 0 ].parentNode.removeChild( selectedRows[ 0 ].nextSibling );
			YAHOO.util.Dom.removeClass( selectedRows[ 0 ], 'ymod-expanded' );
			YAHOO.util.Dom.removeClass( selectedRows[ 0 ], 'yui-dt-selected' );
			YAHOO.util.Event.stopEvent( e );
		}
	}
};
 
// pass in the expanded content, NOT the parent row.
YAHOO.ymod.datatable.collapseRow = function( row )
{
	YAHOO.util.Dom.removeClass( row.previousSibling, 'ymod-expanded' );
	YAHOO.util.Dom.removeClass( row.previousSibling, 'yui-dt-selected' );
	row.parentNode.removeChild( row );
};

Customize the CSS, if desired.

.yui-dt-table tr.ymod-expandedData { background-color: #bdcede; cursor: pointer; }
.yui-dt-table tr.ymod-expandedData td { padding-right: 5px; padding-bottom: 5px; white-space: normal; overflow: visible; }
.yui-dt-table tr.ymod-expanded { background-color: #bdcede; }
.yui-dt-table tr.ymod-expanded td { border-bottom: 0; }
.yui-dt-table div.ymod-expandedDataContent { background-color: #f4f4f4; border: 1px inset #aaa; padding: 2px 5px; white-space: normal; zoom: 1; overflow: hidden; }

You might even want to put a little + and – into the first column of each row to give a visual cue that there is more information for display available on click.

Earlier I published an article entitled Problems with the YUI DataTable. Now we’re going to work out those problems together, through better communication and more effective problem solving techniques. We’re going to save your marriage.

Earlier I had stated that there were a few problems with the DataTable, in its current form. Let’s review (but not play the blame game).

• Bug #1: Table headers weren’t lining up correctly in Firefox (personal ignorance on Box Models)
• Bug #2: Single Select bug where multiple rows were being selected when column was sorted (All browsers, Sortable and SingleSelect Tables)
• Bug #3: Header displayed out of document flow when the window was resized (IE6, Scrollable Tables)
• Bug #4: Content was being displayed approximately 60-70 pixels inside the bottom table boundary. (Firefox, Scrollable Tables) Note the position of the ‘Top’ links in the test document below.
• Bug #5: More of a limitation than a bug, the DataTable does not allow a fixed width table with horizontal overflow. Say you have a table that you have fixed column widths for, but if the width of the real estate available for the table is less than this minimum, the table should overflow with a scroll bar, but at the same time showing the column headers if you scroll vertically. A picture is better:
  

See the following test document for relevant table tests. (Note that for the purposes of testing, I’ve decided to test all combinations of the Top 3 DataTable features: scrolling, nested table headers, and sorting)

Just like your favorite professor, now I’m going to post the Solutions:

Bug #1: What is your Box Model?

Use the following JavaScript code to tell if you’re in Standards Mode or Quirks Mode:

alert( document.compatMode=='CSS1Compat' ? 'Standards Mode' : 'Quirks Mode' );

Standards mode forces your document into using the W3C Box Model, which is currently the standard. The W3C Box Model means any width declarations you make in your CSS code will not include padding, border, or margins. So if you put padding on your table cells and headers, it will need to be added on separately to the total width of your table.

Bug #2: Someone has posted the solution on the Sourceforge Bug Tracker here. (This is included in the DataTable javascript file below)

Bug #3, #4, and #5: I have produced an alternate DataTable file that fixes these bugs using JavaScript code. All lines that were added or changed are commented with //ADDED or //CHANGED

Developed in and last tested with YUI version 2.2.2.

Download it here:
Full (169 KB): ymod-datatable-beta.js
Minimized using JSMIN (67 KB): ymod-datatable-beta-min.js

The original and minimized YUI DataTable files are 166 KB and 66 KB respectively.

See the fluid width DataTables in action here.

A few notes on doing a fixed width DataTable using the code provided above. The total width of the table body must be 16px less than the width of the header, if you have vertical scrolling (to account for the scrollbar). So, if the total width of your header is 800px, the total width of your body must be 784px (put the last table cell as 16px smaller).

Here’s the CSS to go along with a horizontal scrolling DataTable:

.yui-dt-table th, .yui-dt-table td { padding: 2px 0 2px 5px; vertical-align: top; }
.yui-dt-table th, .yui-dt-table tr.yui-dt-first td { width: 100px; } /* table header and only the first row (for drag and drop) */
.ymod-scrollingBody .yui-dt-table tr.yui-dt-first td.yui-dt-last { width: 84px; } /* last table cell (for crappy scrollbar problem) */
.yui-dt-table .yui-dt-even {background-color:#fff;}
.yui-dt-table .yui-dt-odd {background-color:#e0dfe0;}
.yui-dt-table .yui-dt-selected {background-color:#bdcede;}
.yui-dt-table thead {background-color:#933;color:#fff;}
.yui-dt-table th a {color:#fff ! important;}
.ymod-scrollingHeader {
	width: 100%;
	height: 20px;
	overflow: hidden;
	position: relative;
}
.ymod-nestedHeaders {
	height: 40px; /* gotta set this manually, unfortunately */
}
.ymod-scrollingHeader table {
	position: absolute;
	top: 0;
	left: 0;
}
.ymod-scrollingBody {
	width: 100%;
	overflow: auto;
	height: 160px;
}
.ymod-scrollingHeader table { width: 800px; } /* Set your widths! */
.ymod-scrollingBody table { width: 784px; }

Minimum Feature Set:

• Client-Side Sorting: I don’t want it to do an XMLHttpRequest to sort the data, I want it to be done all clientside.
• Simple inline editing: Edit a field in the table right there on the table. I hadn’t established what types of data I would need to edit yet.
• Data Sources: load from a native JavaScript array or a XMLHttpRequest returning XML or JSON.
• Data Type Sort Algorithms: at the very minimum different sorting algorithms for numeric columns and string columns.
• Hierarchical Columns: group column headers together under a parent header.
• Easily customizable: must be able to customize the look and feel of the grid easily using CSS and not by editing Javascript.
• Header Freeze: If I have overflow on my table vertically causing a scroll bar, I want the table headers to remain shown at the top of the table while I scroll from top to bottom.
• Custom Cell Rendering: I have the data I’m loading, but I want to change how it looks when it is rendered to the table. Common for date formatting.

Luxury Feature Set:

• Resizeable Columns: change the width of a column by dragging on the column header’s right border.
• Movable Columns: dragging a column will cause it to be moved on the table (TIBCO General Interface supports this).
• Custom Sort Algorithm: write my own algorithm to specify how data is sorted, or provide a way to do multi-column sorting (sort within one column, ties are sorted by another column, and so on).
• Dynamic Paging (don’t make me click numbered links, load the data automatically when I scroll) both on the client (dynamically insert only what I’m looking at and remove what I’ve scrolled past) and using the server (load more data through an XMLHttpRequest)
• Column Freeze: if the table is going to scroll horizontally, allow the developer to freeze a column or multiple columns so that they are shown when scrolling from left to right.

Evaluation of Options: How does the YUI DataTable stack up?

Basic Items: Client-Side Sorting, Simple inline editing, Data Sources, Data Type Sort Algorithms (stock types not yet implemented out of the box), Hierarchical Columns, Header Freeze (buggy), Custom Cell Rendering, and is easily customizable with CSS.

Luxury Items: Resizeable Columns, Movable Columns (not supported), Custom Sort Algorithms are supported (you can right your own Data Type Sort Algorithms with this feature), Dynamic Paging (manually, not dynamic), Column Freeze (not supported)

Problems:

• Any sort of fixed width table is going to be problematic. Putting a fixed width on the table causes the table headers to be misaligned with the associated table data. It’s a mess. The only viable option here is to let the table do it’s own width calculations. You can’t even set the column widths manually using the {width} variable as suggested when using a fixed width table.
• Data Type Sort Algorithms supposedly work from the column type, but this feature is documented in the code as being a TODO. All columns are sorted by a string datatype, meaning that if your column is numeric and you had the following rows: { 3, 7, 40 }, the sort result would be { 3, 40, 7 }.
• Header Freeze was problematic. Implementing the {scrollable=true} feature as recommended by the documentation causes the table headers to be misaligned with the data in a fixed width table.
• Paging uses the old school numbers method. This wasn’t a deal breaker, since I classified this feature as a luxury item.

Granted, the DataTable in it’s current form is a beta component, but that 0.5 MB ExtJS hit is looking pretty nice right now.

Minor Update: to do a fixed width table that will overflow horizontally, this is the method you can use:

div#dataTableId { /* change this to whatever id you're using to hold the dataTable */
	width:520px; /* put in your own fixed width */
	overflow-x:auto;
	overflow-y:hidden;
}
.yui-dt-headtext, .yui-dt-headcontainer {
	position: static; /* without this declaration, the headers weren't horizontally scrolling with the data in IE6 */
}