<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide-index" table-class="stripe row-border order-column" order="12">

<css lib="datatables fixedcolumns">
	/* Ensure that the demo table scrolls */
	th, td { white-space: nowrap; }
	div.dataTables_wrapper {
		width: 800px;
		margin: 0 auto;
	}

	/* Styling for the index columns */
	th.index,
	td.index {
		background-color: white !important;
		border-top: 1px solid white !important;
		border-bottom: none !important;
	}
	div.DTFC_LeftHeadWrapper table {
		border-bottom: 1px solid white !important;
	}
	div.DTFC_LeftHeadWrapper th {
		border-bottom: 1px solid white !important;
	}
	div.DTFC_LeftBodyWrapper {
		border-right: 1px solid black;
	}
	div.DTFC_LeftFootWrapper th {
		border-top: 1px solid white !important;
	}
</css>
<js lib="jquery datatables fixedcolumns">
<![CDATA[
$(document).ready(function() {
	var table = $('#example').DataTable( {
		scrollY:        "300px",
		scrollX:        true,
		scrollCollapse: true,
		paging:         false,
		columnDefs: [ {
			sortable: false,
			"class": "index",
			targets: 0
		} ],
		order: [[ 1, 'asc' ]],
		fixedColumns: true
	} );

	table.on( 'order.dt search.dt', function () {
		table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
			cell.innerHTML = i+1;
		} );
	} ).draw();
} );
]]>
</js>

<title lib="FixedColumns">Index column</title>

<info><![CDATA[

A typical interaction to want to perform with a fixed column, is an index column. A method for how this can be achieved with FixedColumns is shown in this example, building on the [index column](http://datatables.net/examples/api/counter_column) example for DataTables. Also shown in this example is how the fixed column can be styled with CSS to show it more prominently.

]]></info>

</dt-example>
