FixedColumns example - basic initialisation

Preamble

When displaying a table which scrolls along the x-axis, it can sometimes be useful to the end user for the left most column to be fixed in place, if it shows grouping, index or similar information. This is basically the same idea as 'freeze columns' in Excel. This can be achieved with the FixedColumns plug-in for DataTables, as shown below.

Note that FixedColumns is suitable only for use with the scrolling features in DataTables. If you want to achieve a similar effect without scrolling enabled, please checkout FixedHeader, also for DataTables.

Live example

Rendering engine
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
Gecko
KHTML
KHTML
KHTML
Misc
Misc
Misc
Misc
Misc
Misc
Misc
Other browsers
Presto
Presto
Presto
Presto
Presto
Presto
Presto
Presto
Presto
Presto
Tasman
Tasman
Tasman
Trident
Trident
Trident
Trident
Trident
Trident
Webkit
Webkit
Webkit
Webkit
Webkit
Webkit
Webkit
Rendering engine
BrowserPlatform(s)Engine versionCSS grade
Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
Firefox
1.5
Win 98+ / OSX.2+ 1.8 A
Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Camino 1.0 OSX.2+ 1.8 A
Camino 1.5 OSX.3+ 1.8 A
Netscape 7.2 Win 95+ / Mac OS 8.6-9.2 1.7 A
Netscape Browser 8 Win 98SE+ 1.7 A
Netscape Navigator 9 Win 98+ / OSX.2+ 1.8 A
Mozilla 1.0 Win 95+ / OSX.1+ 1 A
Mozilla 1.1 Win 95+ / OSX.1+ 1.1 A
Mozilla 1.2 Win 95+ / OSX.1+ 1.2 A
Mozilla 1.3 Win 95+ / OSX.1+ 1.3 A
Mozilla 1.4 Win 95+ / OSX.1+ 1.4 A
Mozilla 1.5 Win 95+ / OSX.1+ 1.5 A
Mozilla 1.6 Win 95+ / OSX.1+ 1.6 A
Mozilla 1.7 Win 98+ / OSX.1+ 1.7 A
Mozilla 1.8 Win 98+ / OSX.1+ 1.8 A
Seamonkey 1.1 Win 98+ / OSX.2+ 1.8 A
Epiphany 2.20 Gnome 1.8 A
Konqureror 3.1 KDE 3.1 3.1 C
Konqureror 3.3 KDE 3.3 3.3 A
Konqureror 3.5 KDE 3.5 3.5 A
NetFront 3.1 Embedded devices - C
NetFront 3.4 Embedded devices - A
Dillo 0.8 Embedded devices - X
Links Text only - X
Lynx Text only - X
IE Mobile Windows Mobile 6 - C
PSP browser PSP - C
All others - - U
Opera 7.0 Win 95+ / OSX.1+ - A
Opera 7.5 Win 95+ / OSX.2+ - A
Opera 8.0 Win 95+ / OSX.2+ - A
Opera 8.5 Win 95+ / OSX.2+ - A
Opera 9.0 Win 95+ / OSX.3+ - A
Opera 9.2 Win 88+ / OSX.3+ - A
Opera 9.5 Win 88+ / OSX.3+ - A
Opera for Wii Wii - A
Nokia N800 N800 - A
Nintendo DS browser Nintendo DS 8.5 C/A
Internet Explorer 4.5 Mac OS 8-9 - X
Internet Explorer 5.1 Mac OS 7.6-9 1 C
Internet Explorer 5.2 Mac OS 8-X 1 C
Internet Explorer 4.0 Win 95+ 4 X
Internet Explorer 5.0 Win 95+ 5 C
Internet Explorer 5.5 Win 95+ 5.5 A
Internet Explorer 6 Win 98+ 6 A
Internet Explorer 7 Win XP SP2+ 7 A
AOL browser (AOL desktop) Win XP 6 A
Safari 1.2 OSX.3 125.5 A
Safari 1.3 OSX.3 312.8 A
Safari 2.0 OSX.4+ 419.3 A
Safari 3.0 OSX.4+ 522.1 A
OmniWeb 5.5 OSX.4+ 420 A
iPod Touch / iPhone iPod 420.1 A
S60 S60 413 A
BrowserPlatform(s)Engine versionCSS grade
Showing 1 to 57 of 57 entries

Initialisation code

$(document).ready( function () {
	var oTable = $('#example').dataTable( {
		"sScrollX": "100%",
		"sScrollXInner": "150%",
		"bScrollCollapse": true
	} );
	new FixedColumns( oTable );
} );

Documentation

Basic examples

Advanced examples