Since: DataTables 1.10

Column visibility event - fired when the visibility of a column changes.


This event is fired whenever a column's visibility is altered through the column().visible() method and can be useful for plug-ins which work with columns to identify changes in column visibility state and update their own state to take account of the change.

Responsive integration: If you are using the Responsive extension for DataTables for DataTables, it will affect the visibility of columns, but it does not use the DataTables column visibility options, so this event will not be triggered by Responsive showing or hiding columns. Instead, use the responsive-resize event.

Please note that, as with all DataTables emitted events, the event object has a DataTables API instance available on it (the first parameter). Additionally, the events are triggered with the dt namespace. As such, to listen for this event, you must also use the dt namespace by simply appending .dt to your event name, as shown in the example below.


function function( e, settings, column, state, recalc )



Notify when column visibility is changed:

let table = new DataTable('#myTable');

table.on('column-visibility.dt', function (e, settings, column, state) {
		'Column ' + column + ' has changed to ' + (state ? 'visible' : 'hidden')


The following options are directly related and may also be useful in your application development.