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% |