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 |