Table Column toggle: Customization options

This table illustrates the standard customization options for a column toggle table. The table has a custom theme and label text for the column chooser button, and a theme set on the popup.

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.

Top Movies

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

No Button

You can prevent the table widget from generating a button by adding the data-column-button="false" attribute to the table element. The popup will still be created, and it will have an ID that is equal to the ID of the table plus the suffix "-popup", so you can manually add an anchor that will open the popup.

Quarters Q1 2012 Q2 2012 Q3 2012 Q4 2012 YTD Totals
Store Income Profit Change Income Profit Change Income Profit Change Income Profit Change Income Profit Change
Boston 2,898 739 -5.8% 3,647 1,354 +5.8% 4,981 2,246 +13.4% 3,457 1,259 -3.9% 12,463 6,234 +5.9%
Chicago 2,898 739 -5.8% 3,647 1,354 +5.8% 4,981 2,246 +13.4% 3,457 1,259 -3.9% 12,463 6,234 +5.9%
NYC 2,898 739 -5.8% 3,647 1,354 +5.8% 4,981 2,246 +13.4% 3,457 1,259 -3.9% 12,463 6,234 +5.9%