Basic example
The column visibility plug-in for Buttons provides a set of buttons that can be used to easily give the end user the ability to set the visibility of columns. The primary button type for column visibility controls is the
colvis
type which adds a collection (collection
) of buttons, one for each of the columns in the table, with the end user having the ability to toggle these columns.
First Name | Last Name | Job Title | DOB | Status | Salary |
---|---|---|---|---|---|
Marth | Enright | Traffic Court Referee | 22 Jun 1972 | Active | $85,600 |
Jackelyn | Weible | Airline Transport Pilot | 3 Oct 1981 | Inactive | $106,450 |
Aura | Hard | Business Services Sales Representative | 19 Apr 1969 | Suspended | $237,500 |
Nathalie | Pretty | Drywall Stripper | 13 Dec 1977 | Pending | $198,500 |
Sharan | Leland | Aviation Tactical Readiness Officer | 30 Dec 1991 | Inactive | $470,600 |
Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Pending | $90,560 |
Sylvia | Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Suspended | $103,600 |
Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended | $205,500 |
Kennedy | Haley | Senior Marketing Designer | 18 Dec 1960 | Active | $137,500 |
Chantal | Nailor | Technical Services Librarian | 10 Jan 1980 | Inactive | $372,000 |
Delma | Bonds | Lead Brand Manager | 21 Dec 1968 | Pending | $162,700 |
Roland | Salmos | Senior Program Developer | 5 Jun 1986 | Inactive | $433,060 |
Coy | Wollard | Customer Service Operator | 12 Oct 1982 | Active | $86,000 |
Maxwell | Maben | Regional Representative | 25 Feb 1988 | Suspended | $130,500 |
Cicely | Sigler | Senior Research Officer | 15 Mar 1960 | Pending | $159,000 |
Multi-column layout
The
collection
button has a collectionLayout
option that can be used to control the layout of the buttons shown in the collection. As the colvis
button extends the collection button, this option is also available for the column visibility controls. This example shows a fixed, two column layout. Please see the collectionLayout
option in the collection
button documentation for the full list of options.
First Name | Last Name | Job Title | DOB | Status | Salary |
---|---|---|---|---|---|
Marth | Enright | Traffic Court Referee | 22 Jun 1972 | Active | $85,600 |
Jackelyn | Weible | Airline Transport Pilot | 3 Oct 1981 | Inactive | $106,450 |
Aura | Hard | Business Services Sales Representative | 19 Apr 1969 | Suspended | $237,500 |
Nathalie | Pretty | Drywall Stripper | 13 Dec 1977 | Pending | $198,500 |
Sharan | Leland | Aviation Tactical Readiness Officer | 30 Dec 1991 | Inactive | $470,600 |
Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Pending | $90,560 |
Sylvia | Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Suspended | $103,600 |
Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended | $205,500 |
Kennedy | Haley | Senior Marketing Designer | 18 Dec 1960 | Active | $137,500 |
Chantal | Nailor | Technical Services Librarian | 10 Jan 1980 | Inactive | $372,000 |
Delma | Bonds | Lead Brand Manager | 21 Dec 1968 | Pending | $162,700 |
Roland | Salmos | Senior Program Developer | 5 Jun 1986 | Inactive | $433,060 |
Coy | Wollard | Customer Service Operator | 12 Oct 1982 | Active | $86,000 |
Maxwell | Maben | Regional Representative | 25 Feb 1988 | Suspended | $130,500 |
Cicely | Sigler | Senior Research Officer | 15 Mar 1960 | Pending | $159,000 |
Restore column visibility
The
colvisRestore
provides a single click button that will restore the table's column visibility to the same as when the DataTable was initialised. This example shows the colvis
button collection augmented with the colvisRestore
button type through the postfixButtons
option to add the restore button to the end of the column visibility collection.
First Name | Last Name | Job Title | DOB | Status | Salary |
---|---|---|---|---|---|
Marth | Enright | Traffic Court Referee | 22 Jun 1972 | Active | $85,600 |
Jackelyn | Weible | Airline Transport Pilot | 3 Oct 1981 | Inactive | $106,450 |
Aura | Hard | Business Services Sales Representative | 19 Apr 1969 | Suspended | $237,500 |
Nathalie | Pretty | Drywall Stripper | 13 Dec 1977 | Pending | $198,500 |
Sharan | Leland | Aviation Tactical Readiness Officer | 30 Dec 1991 | Inactive | $470,600 |
Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Pending | $90,560 |
Sylvia | Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Suspended | $103,600 |
Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended | $205,500 |
Kennedy | Haley | Senior Marketing Designer | 18 Dec 1960 | Active | $137,500 |
Chantal | Nailor | Technical Services Librarian | 10 Jan 1980 | Inactive | $372,000 |
Delma | Bonds | Lead Brand Manager | 21 Dec 1968 | Pending | $162,700 |
Roland | Salmos | Senior Program Developer | 5 Jun 1986 | Inactive | $433,060 |
Coy | Wollard | Customer Service Operator | 12 Oct 1982 | Active | $86,000 |
Maxwell | Maben | Regional Representative | 25 Feb 1988 | Suspended | $130,500 |
Cicely | Sigler | Senior Research Officer | 15 Mar 1960 | Pending | $159,000 |
State saving
Button's column visibility module works seamlessly with DataTables' state saving option (
stateSave
). All you need to do is enable both the column visibility buttons and state saving, as shown in this example. To demonstrate this ability, simple hide a few columns and then refresh the table. The columns you selected to be hidden will remain hidden and the button states will reflect this.
First Name | Last Name | Job Title | DOB | Status | Salary |
---|---|---|---|---|---|
Marth | Enright | Traffic Court Referee | 22 Jun 1972 | Active | $85,600 |
Jackelyn | Weible | Airline Transport Pilot | 3 Oct 1981 | Inactive | $106,450 |
Aura | Hard | Business Services Sales Representative | 19 Apr 1969 | Suspended | $237,500 |
Nathalie | Pretty | Drywall Stripper | 13 Dec 1977 | Pending | $198,500 |
Sharan | Leland | Aviation Tactical Readiness Officer | 30 Dec 1991 | Inactive | $470,600 |
Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Pending | $90,560 |
Sylvia | Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Suspended | $103,600 |
Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended | $205,500 |
Kennedy | Haley | Senior Marketing Designer | 18 Dec 1960 | Active | $137,500 |
Chantal | Nailor | Technical Services Librarian | 10 Jan 1980 | Inactive | $372,000 |
Delma | Bonds | Lead Brand Manager | 21 Dec 1968 | Pending | $162,700 |
Roland | Salmos | Senior Program Developer | 5 Jun 1986 | Inactive | $433,060 |
Coy | Wollard | Customer Service Operator | 12 Oct 1982 | Active | $86,000 |
Maxwell | Maben | Regional Representative | 25 Feb 1988 | Suspended | $130,500 |
Cicely | Sigler | Senior Research Officer | 15 Mar 1960 | Pending | $159,000 |
Column groups
When working with column visibility you may wish to present a control to the end use that provides the ability to set various columns to both show and hide at the same time - allowing grouping to occur. The
colvisGroup
button type provides this ability for Buttons. The show
and hide
parameters of this button are both column-selector
types defining the columns in the table that should be shown or hidden respectively.
First Name | Last Name | Job Title | DOB | Status | Salary |
---|---|---|---|---|---|
Marth | Enright | Traffic Court Referee | 22 Jun 1972 | Active | $85,600 |
Jackelyn | Weible | Airline Transport Pilot | 3 Oct 1981 | Inactive | $106,450 |
Aura | Hard | Business Services Sales Representative | 19 Apr 1969 | Suspended | $237,500 |
Nathalie | Pretty | Drywall Stripper | 13 Dec 1977 | Pending | $198,500 |
Sharan | Leland | Aviation Tactical Readiness Officer | 30 Dec 1991 | Inactive | $470,600 |
Maxine | Woldt | Business Services Sales Representative | 17 Oct 1987 | Pending | $90,560 |
Sylvia | Mcgaughy | Hemodialysis Technician | 11 Nov 1983 | Suspended | $103,600 |
Lizzee | Goodlow | Technical Services Librarian | 1 Nov 1961 | Suspended | $205,500 |
Kennedy | Haley | Senior Marketing Designer | 18 Dec 1960 | Active | $137,500 |
Chantal | Nailor | Technical Services Librarian | 10 Jan 1980 | Inactive | $372,000 |
Delma | Bonds | Lead Brand Manager | 21 Dec 1968 | Pending | $162,700 |
Roland | Salmos | Senior Program Developer | 5 Jun 1986 | Inactive | $433,060 |
Coy | Wollard | Customer Service Operator | 12 Oct 1982 | Active | $86,000 |
Maxwell | Maben | Regional Representative | 25 Feb 1988 | Suspended | $130,500 |
Cicely | Sigler | Senior Research Officer | 15 Mar 1960 | Pending | $159,000 |