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

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

<title>Show / hide columns dynamically</title>
<js><![CDATA[

$(document).ready(function() {
	var table = $('#example').DataTable( {
		"scrollY": "200px",
		"paging": false
	} );

	$('a.toggle-vis').on( 'click', function (e) {
		e.preventDefault();

		// Get the column API object
		var column = table.column( $(this).attr('data-column') );

		// Toggle the visibility
		column.visible( ! column.visible() );
	} );
} );

]]></js>

<info><![CDATA[

This example shows how you can make use of the `dt-api column().visible()` API method to dynamically show and hide columns in a table. Also included here is scrolling, just to show it enabled with this API method, although it's not required for the API function to work.

In addition, groups of columns can be shown and hidden at the same time using the `dt-api columns()` method to select multiple columns and then using the `dt-api columns().visible()` method to set their state.

If you are looking for a more complete column visibility interaction controls, the [Buttons extension for DataTables](https://datatables.net/extras/buttons) provides a comprehensive module for column visibility control.

]]></info>

<demo-html>
	<div>
		Toggle column:
		<a class="toggle-vis" data-column="0">Name</a> - 
		<a class="toggle-vis" data-column="1">Position</a> -
		<a class="toggle-vis" data-column="2">Office</a> -
		<a class="toggle-vis" data-column="3">Age</a> -
		<a class="toggle-vis" data-column="4">Start date</a> -
		<a class="toggle-vis" data-column="5">Salary</a>
	</div>
</demo-html>

</dt-example>
