##

Demos

Menu Search

# Table: Column Toggle

The column toggle table mode selectively hides columns at narrower widths as a sensible default but also offers a menu to let users manually control which columns they want to see.

## Column toggle basics

This table mode automatically hides less important columns at narrower widths and surfaces a button to open a menu that allows the user to choose what columns they want to see. In this mode, the author attempts to define which columns are most important to show across various widths by assigning a priority to each column.

A user may choose to check as many columns as they want by tapping the "Columns..." button to open the column chooser popup. The popup contains a dynamically generated list of columns based on the table markup that can be checked and unchecked to adjust the visible columns.

Rank | Movie Title | Year | Rating | Reviews
--- | --- | --- | --- | ---
1 | Citizen Kane | 1941 | 100% | 74
2 | Casablanca | 1942 | 97% | 64
3 | The Godfather | 1972 | 97% | 87
4 | Gone with the Wind | 1939 | 96% | 87
5 | Lawrence of Arabia | 1962 | 94% | 87
6 | Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb | 1964 | 92% | 74
7 | The Graduate | 1967 | 91% | 122
8 | The Wizard of Oz | 1939 | 90% | 72
9 | Singin' in the Rain | 1952 | 89% | 85
10 | Inception | 2010 | 84% | 78

## Applying column chooser mode to a table

The column chooser mode requires a `table` element with two attributes: `data-role="table"` and `data-mode="columntoggle"`. An `ID` attribute is also required on the table to associate it with the column chooser popup menu.

    <table data-role="table" data-mode="columntoggle" id="my-table">

## Setting column priority

The table works by hiding and showing columns based on two inputs: available screen width or by the user checking and unchecking which columns to display in a column picker popup. Add `data-priority` attributes to each of the table headers of columns you want to responsively display and assign a priority (1 = highest, 6 = lowest). Any table header given a priority will be available in the column picker menu.

To make a column persistent so it's not available for hiding, omit the `data-priority` attribute. This will make the column visible at all widths and won't be available in the column chooser menu.

    <th>I'm critical and can't be removed</th>
    <th data-priority="1">I'm very important</th>
    <th data-priority="3">I'm somewhat</th>
    <th data-priority="5">I'm less important</th>

You may use any priority naming convention and assign as many (or few) levels of priority for the columns. The plugin simply generates class names based on the values in the `data-priority` attribute so even though we default to using a numeric system of 1-6, any naming convention is possible.

For example, if a priority of `data-priority="critical"` is added to the heading, a class of `ui-table-priority-critial` will be applied to each cell in that column. If a priority is assigned, the column will be made available for toggling in the column menu and the class will be added to each cell. The rest of the styling and media query creation is up to you to write in your custom stylesheet.

## Theme & customization

The column chooser popup is opened via a button that is generated by the framework. The button's text is "Columns..." by default but can be set by adding the `data-column-btn-text` attribute to the table to the text string you want in the button. The button will inherit the theme from the content area, just like all buttons, but the theme can be set manually by adding the `data-column-btn-theme` attribute to any swatch letter in your theme.

The table background is themed by adding `class="ui-body-d"` to the table element. The table header is given a themed appearance by adding the `class="ui-bar-d"` to the header row. The striped rows are created by adding the `table-stripe` class to the table element.

Rank | Movie Title | Year | Rating | Reviews
--- | --- | --- | --- | ---
1 | Citizen Kane | 1941 | 100% | 74
2 | Casablanca | 1942 | 97% | 64
3 | The Godfather | 1972 | 97% | 87
4 | Gone with the Wind | 1939 | 96% | 87
5 | Lawrence of Arabia | 1962 | 94% | 87
6 | Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb | 1964 | 92% | 74
7 | The Graduate | 1967 | 91% | 122
8 | The Wizard of Oz | 1939 | 90% | 72
9 | Singin' in the Rain | 1952 | 89% | 85
10 | Inception | 2010 | 84% | 78

## Making the table responsive

The styles for all columns that have priorities assigned (1-6) start as `display:none` in the structure stylesheet since we're taking a mobile-first approach to our styles. This means that only columns that should be persistent are visible in the styles to start.

The framework does not automatically include the the media queries to progressively display columns at wider widths. We do this to make it easier for developers to customize the media query widths for each priority level.

Media queries add the responsive behavior to show and hide columns by priority. Each media query is written using `min-width` widths so they build on top of each other. The widths are set in em units so they respond to font size changes. To calculate a pixel withs in em units, divide the target width by 16 (pixels) - it's that easy.

Inside each media query, we override the `display:none` style properties set on all the priority columns in the basic styles to `display:table-cell` so they become visible again and act as a table.

To customize the breakpoints, copy the following style block into your custom style overrides and adjust the `min-width` media query values for each priority level to specify where various priority columns should appear.

In the example styles below for a `my-custom-class` class on the table, the priority 1 columns are shown first, at widths above `20em` (320px), then priority 2 kicks in above `30em` (480px) and so on up to wide desktop widths with priority 6. Feel free to change these breakpoints in your stylesheet and choose how many priority levels you'd like to use.

    /* Show priority 1 at 320px (20em x 16px) */
    @media screen and (min-width: 20em) {
       .my-custom-class th.ui-table-priority-1,
       .my-custom-class td.ui-table-priority-1 {
         display: table-cell;
       }
    }
    /* Show priority 2 at 480px (30em x 16px) */
    @media screen and (min-width: 30em) {
       .my-custom-class  th.ui-table-priority-2,
       .my-custom-class td.ui-table-priority-2 {
         display: table-cell;
       }
    }
    ...more breakpoints...

Due to CSS specificity, you will also need to include the class definitions for the hidden and visible states after the custom breakpoints in your custom stylesheet so be sure to include these as well:

    /* Manually hidden */
    .my-custom-class th.ui-table-cell-hidden,
    .my-custom-class td.ui-table-cell-hidden {
      display: none;
    }

    /* Manually shown */
    .my-custom-class th.ui-table-cell-visible,
    .my-custom-class td.ui-table-cell-visible {
       display: table-cell;
    }

## Applying a preset breakpoint

Even though we strongly encourage you to write custom breakpoints yourself, the framework includes a set of pre-configured breakpoints for each of the six priority levels that you can use if they happen work well for your content.

These breakpoints can be applied by adding a `class="ui-responsive"` to the table element. Here is an example of a table with this class added:

    <table data-role="table" class="ui-responsive" data-mode="columntoggle" id="my-table">

The six preset breakpoint classes included in the column toggle stylesheet use regular increments of 10em (160 pixels). Here is a summary of the breakpoints assigned to each priority in the preset styles:

`data-priority="1"`
  Displays the column at 320px (20em)
`data-priority="2"`
  Displays the column at 480px (30em)
`data-priority="3"`
  Displays the column at 640px (40em)
`data-priority="4"`
  Displays the column at 800px (50em)
`data-priority="5"`
  Displays the column at 960px (60em)
`data-priority="6"`
  Displays the column at 1,120px (70em)

If these preset breakpoints don't work for your content and layout needs, we recommend that you create custom breakpoints to fine tune the styles.

## Grouped column headers

It's fairly common to need to logically group multiple columns under a heading group for financial or scientific data. The framework can support the most simple version of this by allowing for two rows of table headers (`TH`), with the first row containing simple `colspan` attributes to group the columns below. In this configuration, the framework will parse the first row only for the priority and expose these heading groups as the options in the column chooser popup. In this configuration, the second heading will not be exposed as columns that can be hidden or shown independently of the groupings in the chooser.

- Home
- Introduction
- Buttons
- Button widget

- ### Checkboxradio widget click to expand contents

  - Checkboxes
  - Radio buttons

- ### Collapsible (set) widget click to expand contents

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Controlgroup widget click to expand contents

  - Controlgroup
  - Dynamic controlgroups
- Datepicker

- ### Events click to expand contents

  - Swipe list items
  - Swipe page navigation
- Filterable widget
- Flipswitch widget

- ### Forms click to expand contents

  - Forms
  - Hide labels
  - Field containers
  - Forms disabled
  - Forms gallery

- ### Grids click to expand contents

  - Grids
  - Buttons in grids
  - Custom responsive grids
- Grouping and dividing content

- ### Icons click to expand contents

  - Icons
  - Grunticon loader

- ### Listview widget click to expand contents

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Nested Listviews
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid
- Loader widget
- Navbar widget

- ### Navigation click to expand contents

  - Navigation
  - Linking pages
  - Hash processing demo
  - Page Navigation Events

- ### Pages click to expand contents

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Panel widget click to expand contents

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popup widget click to expand contents

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page
- Rangeslider widget
- Responsive Web Design

- ### Selectmenu widget click to expand contents

  - Selectmenu
  - Custom select menu
  - Custom select menu with filter

- ### Slider widget click to expand contents

  - Slider
  - Slider flip toggle switch
  - Slider tooltip

- ### Table widget click to expand contents

  - Table Column Toggle
  - Table Column Toggle demo
  - Table Column Toggle heading groups
  - Table Column Toggle options
  - Table Reflow
  - Table Reflow heading groups
  - Table Reflow stripes and strokes
  - Table Reflow custom styles
- Tabs widget
- Textinput widget

- ### Theming click to expand contents

  - Default theme
  - Classic theme

- ### Toolbar widget click to expand contents

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - Ajax optimized toolbars
  - Form in toolbar
- Transitions

- ### 3rd party API demos click to expand contents

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle

- Home
- Introduction
- Buttons
- Button widget

- ### Checkboxradio widget click to expand contents

  - Checkboxes
  - Radio buttons

- ### Collapsible (set) widget click to expand contents

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Controlgroup widget click to expand contents

  - Controlgroup
  - Dynamic controlgroups
- Datepicker

- ### Events click to expand contents

  - Swipe list items
  - Swipe page navigation
- Filterable widget
- Flipswitch widget

- ### Forms click to expand contents

  - Forms
  - Hide labels
  - Field containers
  - Forms disabled
  - Forms gallery

- ### Grids click to expand contents

  - Grids
  - Buttons in grids
  - Custom responsive grids
- Grouping and dividing content

- ### Icons click to expand contents

  - Icons
  - Grunticon loader

- ### Listview widget click to expand contents

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Nested Listviews
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid
- Loader widget
- Navbar widget

- ### Navigation click to expand contents

  - Navigation
  - Linking pages
  - Hash processing demo
  - Page Navigation Events

- ### Pages click to expand contents

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Panel widget click to expand contents

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popup widget click to expand contents

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page
- Rangeslider widget
- Responsive Web Design

- ### Selectmenu widget click to expand contents

  - Selectmenu
  - Custom select menu
  - Custom select menu with filter

- ### Slider widget click to expand contents

  - Slider
  - Slider flip toggle switch
  - Slider tooltip

- ### Table widget click to expand contents

  - Table Column Toggle
  - Table Column Toggle demo
  - Table Column Toggle heading groups
  - Table Column Toggle options
  - Table Reflow
  - Table Reflow heading groups
  - Table Reflow stripes and strokes
  - Table Reflow custom styles
- Tabs widget
- Textinput widget

- ### Theming click to expand contents

  - Default theme
  - Classic theme

- ### Toolbar widget click to expand contents

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - Ajax optimized toolbars
  - Form in toolbar
- Transitions

- ### 3rd party API demos click to expand contents

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle