This example is designed to re-implement the visual effect of the DataTables row grouping example with a fixed column. It is alternative row grouping style to that presented in the row grouping by height example.
| Browser | Rendering engine | Platform(s) | Engine version | CSS grade | 
|---|---|---|---|---|
| Internet Explorer 4.0 | Trident | Win 95+ | 4 | X | 
| Internet Explorer 5.0 | Trident | Win 95+ | 5 | C | 
| Internet Explorer 5.5 | Trident | Win 95+ | 5.5 | A | 
| Internet Explorer 6 | Trident | Win 98+ | 6 | A | 
| Internet Explorer 7 | Trident | Win XP SP2+ | 7 | A | 
| AOL browser (AOL desktop) | Trident | Win XP | 6 | A | 
| Firefox 1.0 | Gecko | Win 98+ / OSX.2+ | 1.7 | A | 
| Firefox 1.5 | Gecko | Win 98+ / OSX.2+ | 1.8 | A | 
| Firefox 2.0 | Gecko | Win 98+ / OSX.2+ | 1.8 | A | 
| Firefox 3.0 | Gecko | Win 2k+ / OSX.3+ | 1.9 | A | 
| Camino 1.0 | Gecko | OSX.2+ | 1.8 | A | 
| Camino 1.5 | Gecko | OSX.3+ | 1.8 | A | 
| Netscape 7.2 | Gecko | Win 95+ / Mac OS 8.6-9.2 | 1.7 | A | 
| Netscape Browser 8 | Gecko | Win 98SE+ | 1.7 | A | 
| Netscape Navigator 9 | Gecko | Win 98+ / OSX.2+ | 1.8 | A | 
| Mozilla 1.0 | Gecko | Win 95+ / OSX.1+ | 1 | A | 
| Mozilla 1.1 | Gecko | Win 95+ / OSX.1+ | 1.1 | A | 
| Mozilla 1.2 | Gecko | Win 95+ / OSX.1+ | 1.2 | A | 
| Mozilla 1.3 | Gecko | Win 95+ / OSX.1+ | 1.3 | A | 
| Mozilla 1.4 | Gecko | Win 95+ / OSX.1+ | 1.4 | A | 
| Mozilla 1.5 | Gecko | Win 95+ / OSX.1+ | 1.5 | A | 
| Mozilla 1.6 | Gecko | Win 95+ / OSX.1+ | 1.6 | A | 
| Mozilla 1.7 | Gecko | Win 98+ / OSX.1+ | 1.7 | A | 
| Mozilla 1.8 | Gecko | Win 98+ / OSX.1+ | 1.8 | A | 
| Seamonkey 1.1 | Gecko | Win 98+ / OSX.2+ | 1.8 | A | 
| Epiphany 2.20 | Gecko | Gnome | 1.8 | A | 
| Safari 1.2 | Webkit | OSX.3 | 125.5 | A | 
| Safari 1.3 | Webkit | OSX.3 | 312.8 | A | 
| Safari 2.0 | Webkit | OSX.4+ | 419.3 | A | 
| Safari 3.0 | Webkit | OSX.4+ | 522.1 | A | 
| OmniWeb 5.5 | Webkit | OSX.4+ | 420 | A | 
| iPod Touch / iPhone | Webkit | iPod | 420.1 | A | 
| S60 | Webkit | S60 | 413 | A | 
| Opera 7.0 | Presto | Win 95+ / OSX.1+ | - | A | 
| Opera 7.5 | Presto | Win 95+ / OSX.2+ | - | A | 
| Opera 8.0 | Presto | Win 95+ / OSX.2+ | - | A | 
| Opera 8.5 | Presto | Win 95+ / OSX.2+ | - | A | 
| Opera 9.0 | Presto | Win 95+ / OSX.3+ | - | A | 
| Opera 9.2 | Presto | Win 88+ / OSX.3+ | - | A | 
| Opera 9.5 | Presto | Win 88+ / OSX.3+ | - | A | 
| Opera for Wii | Presto | Wii | - | A | 
| Nokia N800 | Presto | N800 | - | A | 
| Nintendo DS browser | Presto | Nintendo DS | 8.5 | C/A | 
| Konqureror 3.1 | KHTML | KDE 3.1 | 3.1 | C | 
| Konqureror 3.3 | KHTML | KDE 3.3 | 3.3 | A | 
| Konqureror 3.5 | KHTML | KDE 3.5 | 3.5 | A | 
| Internet Explorer 4.5 | Tasman | Mac OS 8-9 | - | X | 
| Internet Explorer 5.1 | Tasman | Mac OS 7.6-9 | 1 | C | 
| Internet Explorer 5.2 | Tasman | Mac OS 8-X | 1 | C | 
| NetFront 3.1 | Misc | Embedded devices | - | C | 
| NetFront 3.4 | Misc | Embedded devices | - | A | 
| Dillo 0.8 | Misc | Embedded devices | - | X | 
| Links | Misc | Text only | - | X | 
| Lynx | Misc | Text only | - | X | 
| IE Mobile | Misc | Windows Mobile 6 | - | C | 
| PSP browser | Misc | PSP | - | C | 
| All others | Other browsers | - | - | U | 
$(document).ready( function () {
	var oTable = $('#example').dataTable( {
		"sScrollY": "300px",
		"sScrollX": "100%",
		"sScrollXInner": "150%",
		"bScrollCollapse": true,
		"bPaginate": false,
		"aaSortingFixed": [ [1, 'asc'] ],
		"aoColumnDefs": [
			{ "bVisible": false, "aTargets": [1] }
		]
	} );
	new FixedColumns( oTable, {
		"fnDrawCallback": function ( left, right ) {
			var oSettings = oTable.fnSettings();
			if ( oSettings.aiDisplay.length == 0 )
			{
				return;
			}
			var nGroup, nCell, iIndex, sGroup;
			var sLastGroup = "", iCorrector=0;
			var nTrs = $('#example tbody tr');
			var iColspan = nTrs[0].getElementsByTagName('td').length;
			for ( var i=0 ; i<nTrs.length ; i++ )
			{
				iIndex = oSettings._iDisplayStart + i;
				sGroup = oSettings.aoData[ oSettings.aiDisplay[iIndex] ]._aData[1]			;
				
				if ( sGroup != sLastGroup )
				{
					/* Cell to insert into main table */
					nGroup = document.createElement( 'tr' );
					nCell = document.createElement( 'td' );
					nCell.colSpan = iColspan;
					nCell.className = "group";
					nCell.innerHTML = " ";
					nGroup.appendChild( nCell );
					nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );
					/* Cell to insert into the frozen columns */
					nGroup = document.createElement( 'tr' );
					nCell = document.createElement( 'td' );
					nCell.className = "group";
					nCell.innerHTML = sGroup;
					nGroup.appendChild( nCell );
					$(nGroup).insertBefore( $('tbody tr:eq('+(i+iCorrector)+')', left.body)[0] );
					iCorrector++;
					sLastGroup = sGroup;
				}
			}
		}
	} );
} );