Basic example
ColVis is a plug-in for DataTables which presents a list of all columns to a user and allows them to select which ones they wish to be visible. Click the "three bars" button to be presented with a list of columns in the table, and click the buttons to show and hide them as you wish. ColVis is added to a DataTable by specifying the C option for dom.
Name Position Age Start date Salary Actions
Tiger Nixon System Architect 61 2011/04/25 $320,800
Garrett Winters Accountant 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer 22 2012/03/29 $433,060
Airi Satou Accountant 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist 55 2010/10/14 $97,900
Colleen Hurst Javascript Developer 39 2009/09/15 $405,500
Sonya Frost Software Engineer 23 2008/12/13 $103,600
Jena Gaines Office Manager 30 2008/12/19 $90,560
Quinn Flynn Support Lead 22 2013/03/03 $342,000
Charde Marshall Regional Director 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer 43 2012/12/18 $113,500
Tatyana Fitzpatrick Regional Director 19 2010/03/17 $385,750
Exclude columns
It can at times be useful to exclude columns from being in the 'show / hide' list (for example if you have hidden information that the end user shouldn't be able to make visible. This can be done by the exclude ColVis configuration parameter when creating the DataTable. This is simply an array of integers, indicating which columns should be excluded. This example shows the first column being excluded.
Name Position Age Start date Salary Actions
Tiger Nixon System Architect 61 2011/04/25 $320,800
Garrett Winters Accountant 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer 22 2012/03/29 $433,060
Airi Satou Accountant 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist 55 2010/10/14 $97,900
Colleen Hurst Javascript Developer 39 2009/09/15 $405,500
Sonya Frost Software Engineer 23 2008/12/13 $103,600
Jena Gaines Office Manager 30 2008/12/19 $90,560
Quinn Flynn Support Lead 22 2013/03/03 $342,000
Charde Marshall Regional Director 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer 43 2012/12/18 $113,500
Tatyana Fitzpatrick Regional Director 19 2010/03/17 $385,750
Button ordering
The list of columns that ColVis displays has two options for the order in which they are displayed. The default mode of operation is to show the buttons in the same order as they appear in the HTML table, but the second mode of operation is to show the buttons in alphabetical order. This is done by specifying the order option, set to alpha. Alphabetical button ordering is shown in this example.
Name Position Age Start date Salary Actions
Tiger Nixon System Architect 61 2011/04/25 $320,800
Garrett Winters Accountant 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer 22 2012/03/29 $433,060
Airi Satou Accountant 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist 55 2010/10/14 $97,900
Colleen Hurst Javascript Developer 39 2009/09/15 $405,500
Sonya Frost Software Engineer 23 2008/12/13 $103,600
Jena Gaines Office Manager 30 2008/12/19 $90,560
Quinn Flynn Support Lead 22 2013/03/03 $342,000
Charde Marshall Regional Director 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer 43 2012/12/18 $113,500
Tatyana Fitzpatrick Regional Director 19 2010/03/17 $385,750
Mouseover activation
The default activation (showing the columns list) for ColVis is for the user to click the button. This can be altered to a mouseover activation by making use of the activate initialisation option and setting it to mouseover. This parameter denotes how the dropdown list of columns can be activated by the end user. Its value should be either mouseover or click.
Name Position Age Start date Salary Actions
Tiger Nixon System Architect 61 2011/04/25 $320,800
Garrett Winters Accountant 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer 22 2012/03/29 $433,060
Airi Satou Accountant 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist 55 2010/10/14 $97,900
Colleen Hurst Javascript Developer 39 2009/09/15 $405,500
Sonya Frost Software Engineer 23 2008/12/13 $103,600
Jena Gaines Office Manager 30 2008/12/19 $90,560
Quinn Flynn Support Lead 22 2013/03/03 $342,000
Charde Marshall Regional Director 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer 43 2012/12/18 $113,500
Tatyana Fitzpatrick Regional Director 19 2010/03/17 $385,750