Responsive example Automatic column hiding

Responsive will automatically detect which columns have breakpoint class names assigned to them for visibility control. If no breakpoint class is found for a column, Responsive will determine automatically if the column should be shown or not at any particular viewport width. This is done by removing columns which cause the table to overflow the viewport, with the columns being removed from the right.

This example shows that simple case. On a desktop browser resize the window horizontally to see columns added and removed on-the-fly. On a tablet or mobile browser, change the screen's orientation.

The Javascript shown below is used to initialise the table shown in this example:

?
1
2
3
$(document).ready(function() {
    $('#example').DataTable();
} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

Other examples

Basic initialisation

Styling

Display control

Child rows

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extras and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2014
DataTables is licensed under the MIT license.