<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-complex-header" order="6">

<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />

<title>Complex headers with column visibility</title>
<js><![CDATA[

$(document).ready(function() {
	$('#example').DataTable( {
		"columnDefs": [ {
			"visible": false,
			"targets": -1
		} ]
	} );
} );

]]></js>

<info><![CDATA[

Complex headers (using `colspan` / `rowspan`) can be used to group columns of similar information in DataTables, creating a very powerful visual effect.

In addition to the basic behaviour, DataTables can also take `colspan` and `rowspan` into account when working with hidden columns. The `colspan` and `rowspan` attributes for each cell are automatically calculated and rendered on the page for you. This allows the `dt-init columns.visible` option and `dt-api column().visible()` method to take into account `rowspan` / `colspan` cells, drawing the header correctly.

Note that each column must have at least one unique cell (i.e. a cell without `colspan`) so DataTables can use that cell to detect the column and use it to apply ordering.

The example below shows a header spanning multiple cells over the contact information, with one of the columns that the span covers being hidden.

]]></info>

</dt-example>
