{"id":122,"date":"2023-08-25T17:32:47","date_gmt":"2023-08-25T17:32:47","guid":{"rendered":"\/\/api.jquerymobile.com\/1.3\/?p=122"},"modified":"2023-08-25T17:32:47","modified_gmt":"2023-08-25T17:32:47","slug":"table-columntoggle","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.3\/table-columntoggle\/","title":{"rendered":"Column-Toggle Table Widget"},"content":{"rendered":"<article id=\"table-columntoggle1\" class=\"entry widget\"><h2 class=\"section-title\">\n<span>Column-Toggle Table Widget<\/span><span class=\"version-details\">version added: 1.3<\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Creates a responsive table in column toggle mode<\/p>\n<section id=\"quick-nav\"><header><h2>QuickNav<a href=\"#entry-examples\">Examples<\/a>\n<\/h2><\/header><div class=\"quick-nav-section\">\n<h3>Options<\/h3>\n<div><a href=\"#option-classes.columnBtn\">classes.columnBtn<\/a><\/div>\n<div><a href=\"#option-classes.columnToggleTable\">classes.columnToggleTable<\/a><\/div>\n<div><a href=\"#option-classes.popup\">classes.popup<\/a><\/div>\n<div><a href=\"#option-classes.priorityPrefix\">classes.priorityPrefix<\/a><\/div>\n<div><a href=\"#option-columnBtnText\">columnBtnText<\/a><\/div>\n<div><a href=\"#option-columnBtnTheme\">columnBtnTheme<\/a><\/div>\n<div><a href=\"#option-columnPopupTheme\">columnPopupTheme<\/a><\/div>\n<\/div>\n<div class=\"quick-nav-section\">\n<h3>Methods<\/h3>\n<div><a href=\"#method-refresh\">refresh<\/a><\/div>\n<\/div>\n<div class=\"quick-nav-section\">\n<h3>Events<\/h3>\n<div><a href=\"#event-create\">create<\/a><\/div>\n<\/div><\/section><div class=\"longdesc\" id=\"entry-longdesc\">\n\t\t<p>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.<\/p>\n\n        <p>A user may choose to check as many columns as they want by tapping the &quot;Columns...&quot; button to open the column\n        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. <\/p>\n  \t\t<iframe src=\"\/1.3\/resources\/table\/example2.html\" style=\"width:100%;height:540px;border:0px\"><\/iframe>\n\n\t\t<h3>Applying column chooser mode to a table<\/h3>\n\n\t\t<p>The column chooser mode requires a <code>table<\/code> element with two attributes: <code>data-role=&quot;table&quot;<\/code> and <code>data-mode=&quot;columntoggle&quot;<\/code>. An <code>ID<\/code> attribute is also required on the table to associate it with the column chooser popup menu.<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;table&quot;<\/span> <span class=\"hljs-attr\">data-mode<\/span>=<span class=\"hljs-string\">&quot;columntoggle&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;my-table&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<h3>How column toggle mode works<\/h3>\n\n\t\t<p>The plugin automates a few key things: it injects the column chooser button, and generates the popup with check list of columns that can be hidden or shown by the user. The list of columns in the chooser menu is populated by parsing the values (or <code>abbr title<\/code>) of the first row of header (<code>TH<\/code>) elements. Only headers that have a <code>data-priority<\/code> attribute are included in the column chooser; headers without this attribute won&apos;t made available in the chooser to allow developers to identify critical columns that shouldn&apos;t be hidden. If columns are hidden via responsive media queries, these will be unchecked in the chooser to reflect the current column visibility.<\/p>\n\n\t\t<p>The automatic column hiding behavior is accomplished by CSS media queries that hide or show columns based on priority levels at various screen widths. Since each site will have different content and column configurations, we provide a simple media query block that you can copy, paste and customize for each project. This is explained in detail below.<\/p>\n\n\t\t<p>The priorities assigned to headers and media queries used to hide columns act as a sensible default for showing the most important columns that will fit on a device. The column chooser menu gives users the ability to override these defaults and choose which columns they want to see. These user preferences take precedence over the priority mappings so if a column is manually checked, it will remain visible across all screen widths until the page is refreshed. <\/p>\n\n\t\t<p>Because of the flexibility this plugin provides, it&apos;s possible for users to introduce horizontal scrolling if the data in each column is long or if many columns are selected to be shown on a smaller screen. <\/p>\n\n\t\t<h3>Setting column priority<\/h3>\n\n\t\t<p>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 <code>data-priority<\/code> 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. <\/p>\n\t\t<p>To make a column <em>persistent<\/em> so it&apos;s not available for hiding, omit the <code>data-priority<\/code> attribute. This will make the column visible at all widths and won&apos;t be available in the column chooser menu.<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>I&apos;m am critical and can&apos;t be removed<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span> <span class=\"hljs-attr\">data-priority<\/span>=<span class=\"hljs-string\">&quot;1&quot;<\/span>&gt;<\/span>I&apos;m very important<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span> <span class=\"hljs-attr\">data-priority<\/span>=<span class=\"hljs-string\">&quot;3&quot;<\/span>&gt;<\/span>I&apos;m somewhat<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span> <span class=\"hljs-attr\">data-priority<\/span>=<span class=\"hljs-string\">&quot;5&quot;<\/span>&gt;<\/span>I&apos;m less important<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>Behind the scenes, the plugin will apply classes to each cell that map to the priority set in the data attribute on the header. For example, if a table heading has a <code>data-priority=&quot;3&quot;<\/code> attribute, every cell in that column will assigned a <code>ui-table-priority-3<\/code> class once enhanced. These classes are then used in media queries to hide and show columns based on screen width (see below).<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-table-priority-3&quot;<\/span>&gt;<\/span>97%<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>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 <code>data-priority<\/code> attribute so even though we default to using a numeric system of 1-6, any naming convention is possible. <\/p>\n\n\t\t<p>For example, if a priority of <code>data-priority=&quot;critical&quot;<\/code> is added to the heading, a class of <code>ui-table-priority-critial<\/code> will be applied to each cell in that column. If a priority is assigned, the column will be made available for the toggling in the column menu and adds the classes to each cell, the rest of the styling and media query creation is up to you write in your custom stylesheet. <\/p>\n\n\t\t<p>It is important to note that you are required to wrap your table headers in a <code>&lt;thead&gt; ... &lt;\/thead&gt;<\/code> block, and the table body in a <code>&lt;tbody&gt; ... &lt;\/tbody&gt;<\/code> block, as shown in the <a href=\"#entry-examples\">full demo Example<\/a>.<\/p>\n\n\t\t<h3>Making the table responsive<\/h3>\n\n\t\t<p>The styles for the all priority columns (1-6) start as <code>display:none<\/code> in the structure stylesheet since we&apos;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.<\/p>\n\n\t\t<p>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.<\/p>\n\n\t\t<p>Media queries add the responsive behavior to show and hide columns by priority. Each media query is written using <code>min-width<\/code> widths so they build on top of each other. The widths are set in ems so they respond to font size changes. To calculate a pixel withs in em&apos;s, divide the target width by 16 (pixels) - it&apos;s that easy.<\/p>\n\n\t\t<p>Inside each media query, we override the <code>display:none<\/code> style properties set on all the priority columns in the basic styles to <code>display:table-cell<\/code> so they become visible again and act as a table.<\/p>\n\n\t\t<p>To customize the breakpoints, copy the following style block into your custom style overrides and adjust the <code>min-width<\/code> media query values for each priority level to specify where various priority columns should appear.<\/p>\n\n\t\t<p>In the example styles below for a <code>my-custom-class<\/code> class on the table, the priority 1 columns are shown first, at widths above <code>20em<\/code> (320px), then priority 2 kicks in above <code>30em<\/code> (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&apos;d like to use.<\/p>\n\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/* Show priority 1 at 320px (20em x 16px) *\/<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>@media screen and (min-width: 20em) {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>   .my-custom-<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">th<\/span>.<span class=\"hljs-title\">ui<\/span>-<span class=\"hljs-title\">table<\/span>-<span class=\"hljs-title\">priority<\/span>-1,<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>   .<span class=\"hljs-title\">my<\/span>-<span class=\"hljs-title\">custom<\/span>-<span class=\"hljs-title\">class<\/span> <span class=\"hljs-title\">td<\/span>.<span class=\"hljs-title\">ui<\/span>-<span class=\"hljs-title\">table<\/span>-<span class=\"hljs-title\">priority<\/span>-1 {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>     <span class=\"hljs-attr\">display<\/span>: table-cell;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>   }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/* Show priority 2 at 480px (30em x 16px) *\/<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>@media screen and (min-width: 30em) {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>   .my-custom-<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span>  <span class=\"hljs-title\">th<\/span>.<span class=\"hljs-title\">ui<\/span>-<span class=\"hljs-title\">table<\/span>-<span class=\"hljs-title\">priority<\/span>-2,<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>   .<span class=\"hljs-title\">my<\/span>-<span class=\"hljs-title\">custom<\/span>-<span class=\"hljs-title\">class<\/span> <span class=\"hljs-title\">td<\/span>.<span class=\"hljs-title\">ui<\/span>-<span class=\"hljs-title\">table<\/span>-<span class=\"hljs-title\">priority<\/span>-2 {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>     <span class=\"hljs-attr\">display<\/span>: table-cell;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>   }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>...more breakpoints...<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Due to CSS specificity, you will also need to include the class definitions for the hidden and visible states <em>after<\/em> the custom breakpoints in your custom stylesheet so be sure to include these as well:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/* Manually hidden *\/<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>.my-custom-<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">th<\/span>.<span class=\"hljs-title\">ui<\/span>-<span class=\"hljs-title\">table<\/span>-<span class=\"hljs-title\">cell<\/span>-<span class=\"hljs-title\">hidden<\/span>,<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>.<span class=\"hljs-title\">my<\/span>-<span class=\"hljs-title\">custom<\/span>-<span class=\"hljs-title\">class<\/span> <span class=\"hljs-title\">td<\/span>.<span class=\"hljs-title\">ui<\/span>-<span class=\"hljs-title\">table<\/span>-<span class=\"hljs-title\">cell<\/span>-<span class=\"hljs-title\">hidden<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">display<\/span>: none;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/* Manually shown *\/<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>.my-custom-<span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title\">th<\/span>.<span class=\"hljs-title\">ui<\/span>-<span class=\"hljs-title\">table<\/span>-<span class=\"hljs-title\">cell<\/span>-<span class=\"hljs-title\">visible<\/span>,<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>.<span class=\"hljs-title\">my<\/span>-<span class=\"hljs-title\">custom<\/span>-<span class=\"hljs-title\">class<\/span> <span class=\"hljs-title\">td<\/span>.<span class=\"hljs-title\">ui<\/span>-<span class=\"hljs-title\">table<\/span>-<span class=\"hljs-title\">cell<\/span>-<span class=\"hljs-title\">visible<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>   <span class=\"hljs-attr\">display<\/span>: table-cell;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>}<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<h3>Applying a preset breakpoint<\/h3>\n\n\t\t<p>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. <\/p>\n\n\t\t<p>These breakpoints can applied by adding a <code>class=&quot;ui-responsive&quot;<\/code> to the table element. Here is an example of a table with this class added:<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;table&quot;<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-responsive&quot;<\/span> <span class=\"hljs-attr\">data-mode<\/span>=<span class=\"hljs-string\">&quot;columntoggle&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;my-table&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>The six preset breakpoints 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: <\/p>\n\n\t\t<dl>\n\t\t\t<dt><code>data-priority=&quot;1&quot;<\/code><\/dt>\n<dd> Displays the column at 320px (20em) <\/dd>\n\t\t\t<dt><code>data-priority=&quot;2&quot;<\/code><\/dt>\n<dd> Displays the column at 480px (30em) <\/dd>\n\t\t\t<dt><code>data-priority=&quot;3&quot;<\/code><\/dt>\n<dd> Displays the column at 640px (40em) <\/dd>\n\t\t\t<dt><code>data-priority=&quot;4&quot;<\/code><\/dt>\n<dd> Displays the column at 800px (50em) <\/dd>\n\t\t\t<dt><code>data-priority=&quot;5&quot;<\/code><\/dt>\n<dd> Displays the column at 960px (60em) <\/dd>\n\t\t\t<dt><code>data-priority=&quot;6&quot;<\/code><\/dt>\n<dd> Displays the column at 1,120px (70em) <\/dd>\n\t\t<\/dl>\n\n\t\t<p>If these preset breakpoints don&apos;t work for your content and layout needs, we recommend that you create custom breakpoints to fine tune the styles. <\/p>\n\n\t\t<h3>Working with the column menu classes<\/h3>\n\n\t\t<p>When the column chooser menu opens, the column checkboxes will be checked or unchecked based on the visibility of each column based on the media queries so it accurately reflects what is being seen. These media queries to hide or show columns act as sensible defaults for what columns should be shown based on the developer&apos;s understanding of the column importance and data values. The chooser menu allows the user to have control of the table presentation so this takes precedence over the default display.<\/p>\n\n\t\t<p>If an unchecked column checkbox is checked by the user, they now take control of the column. Until the page is refreshed, the visibility of that column will now always be visible, even if the screen is re-sized. Behind the scenes, a class of <code>ui-table-cell-visible<\/code> is added to all the cells in that column to ensure they override any visibility set via media queries.<\/p>\n\n\t\t<p>The same idea applies when a column is unchecked: from then on, the column won&apos;t be seen at any width because the class of <code>ui-table-cell-hidden<\/code> is added to each of the cells in that column.<\/p>\n\n\t\t<h3>Styling the button and column chooser popup<\/h3>\n\n\t\t<p>The column chooser popup is opened via a button that is generated by the framework. The button&apos;s text is &quot;Columns...&quot; by default but can be set by adding the <code>data-column-btn-text<\/code> 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 <code>data-column-btn-theme<\/code> attribute to any swatch letter in your theme.<\/p>\n\n\t\t<p>This button is injected directly <em>before<\/em> the table element and has basic styles to align it to the right but you may want to further customize the appearance of this button. To style all these buttons across your site, key off the <code>ui-table-columntoggle-btn<\/code> structural class on this link. <\/p>\n\n\t\t<p>To target styles against only a specific button, use the unique <code>href<\/code> value that is generated to target a specific column chooser button. For example, a table with an <code>ID<\/code> of <code>movie-table<\/code> will generate a popup with an <code>ID<\/code> of <code>movie-table-popup<\/code> so a CSS selector of <code>a[href=&quot;#movie-table-popup&quot;]<\/code> will target only the column popup button for this specific table.<\/p>\n\n\t\t<p>The theme for the column chooser popup can be set by adding the <code>data-column-popup-theme<\/code> attribute to the table and specifying any swatch letter in your theme. For custom styles or scripting, all the column chooser popups can be targeted by using the <code>ui-table-columntoggle-popup<\/code> structural class added to these popups. To customize a single popup, use the generated <code>ID<\/code> based on the table <code>ID<\/code> that added to each specific popup (such as <code>#movie-table-popup<\/code>) to target a specific popup.<\/p>\n\n\t\t<h3>Working with grouped column headers<\/h3>\n\n\t\t<p>It&apos;s fairly common to need to logically group multiple columns together 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 (<code>TH<\/code>), with the first row containing simple <code>colspan<\/code> 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. <\/p>\n\n  \t<\/div>\n<section id=\"options\"><header><h2>Options<\/h2><\/header><div id=\"option-classes.columnBtn\" class=\"api-item first-item\">\n<h3>classes.columnBtn&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>&quot;ui-table-columntoggle-btn&quot;<\/code>\n<\/div>\n<div>Class assigned to the column toggle button.\n\t\t\t\t<p>Note: The reflow mode has one option, classes, which is only configurable via JavaScript because it expects an object literal value. The classes option has two properties that define the structural classnames that the plugin uses.<\/p>\n\t\t\t<\/div>\n<\/div>\n<div id=\"option-classes.columnToggleTable\" class=\"api-item\">\n<h3>classes.columnToggleTable&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>&quot;ui-table-columntoggle&quot;<\/code>\n<\/div>\n<div>Class assigned to the table.\n\t\t\t\t<p>Note: The reflow mode has one option, classes, which is only configurable via JavaScript because it expects an object literal value. The classes option has two properties that define the structural classnames that the plugin uses.<\/p>\n\t\t\t<\/div>\n<\/div>\n<div id=\"option-classes.popup\" class=\"api-item\">\n<h3>classes.popup&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>&quot;ui-table-columntoggle-popup&quot;<\/code>\n<\/div>\n<div>Class assigned to the column chooser popup.\n\t\t\t\t<p>Note: The reflow mode has one option, classes, which is only configurable via JavaScript because it expects an object literal value. The classes option has two properties that define the structural classnames that the plugin uses.<\/p>\n\t\t\t<\/div>\n<\/div>\n<div id=\"option-classes.priorityPrefix\" class=\"api-item\">\n<h3>classes.priorityPrefix&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>&quot;ui-table-priority-&quot;<\/code>\n<\/div>\n<div>Class prefix added to each cell in a column. This string is appended to the priority value set on the headers.\n\t\t\t\t<p>Note: The reflow mode has one option, classes, which is only configurable via JavaScript because it expects an object literal value. The classes option has two properties that define the structural classnames that the plugin uses.<\/p>\n\t\t\t<\/div>\n<\/div>\n<div id=\"option-columnBtnText\" class=\"api-item\">\n<h3>columnBtnText&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>default: &quot;Columns...&quot;<\/code>\n<\/div>\n<div>Sets the theme for the column chooser button. Set to any valid swatch letter in your theme.\n\t\t\t<p>This option is also exposed as a data attribute:<code>data-column-btn-text=&quot;Show columns&quot;<\/code>.<\/p>\n<\/div>\n<strong>Code examples:<\/strong><p>Initialize the table-columntoggle with the <code>columnBtnText<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).table-columntoggle({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">columnBtnText<\/span>: <span class=\"hljs-string\">&quot;Show columns&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>columnBtnText<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> columnBtnText = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).table-columntoggle( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;columnBtnText&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).table-columntoggle( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;columnBtnText&quot;<\/span>, <span class=\"hljs-string\">&quot;Show columns&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-columnBtnTheme\" class=\"api-item\">\n<h3>columnBtnTheme&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>null<\/code>\n<\/div>\n<div>Sets the theme for the column chooser button. Set to any valid swatch letter in your theme.\n\t\t\t<p>This option is also exposed as a data attribute:<code>data-column-btn-theme=&quot;b&quot;<\/code>.<\/p>\n<\/div>\n<strong>Code examples:<\/strong><p>Initialize the table-columntoggle with the <code>columnBtnTheme<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).table-columntoggle({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">columnBtnTheme<\/span>: <span class=\"hljs-string\">&quot;b&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>columnBtnTheme<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> columnBtnTheme = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).table-columntoggle( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;columnBtnTheme&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).table-columntoggle( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;columnBtnTheme&quot;<\/span>, <span class=\"hljs-string\">&quot;b&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-columnPopupTheme\" class=\"api-item\">\n<h3>columnPopupTheme&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>null<\/code>\n<\/div>\n<div>Sets the theme for the column chooser popup checkboxes. Set to any valid swatch letter in your theme.\n\t\t\t<p>This option is also exposed as a data attribute:<code>data-popup-theme=&quot;a&quot;<\/code>.<\/p>\n<\/div>\n<strong>Code examples:<\/strong><p>Initialize the table-columntoggle with the <code>columnPopupTheme<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).table-columntoggle({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">columnPopupTheme<\/span>: <span class=\"hljs-string\">&quot;a&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>columnPopupTheme<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> columnPopupTheme = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).table-columntoggle( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;columnPopupTheme&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).table-columntoggle( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;columnPopupTheme&quot;<\/span>, <span class=\"hljs-string\">&quot;a&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div><\/section><section id=\"methods\"><header><h2>Methods<\/h2><\/header><div id=\"method-refresh\"><div class=\"api-item first-item\">\n<h3>refresh()<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>Updates the labels in the cells.\n\t\t\t<\/div>\n<ul><li><div class=\"null-signature\">This method does not accept any arguments.<\/div><\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the refresh method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).table-columntoggle( <span class=\"hljs-string\">&quot;refresh&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/div><\/section><section id=\"events\"><header><h2>Events<\/h2><\/header><div id=\"event-create\" class=\"api-item first-item\">\n<h3>create( event, ui )<span class=\"returns\">Type: <code>tablecreate<\/code><\/span>\n<\/h3>\n<div>Since this plugin is written as an extension to the core table plugin, it binds to the tablecreate event but does not issue any additional events.\n\t\t\t<\/div>\n<ul>\n<li>\n<div><strong>event<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Event\">Event<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<li>\n<div><strong>ui<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<\/ul>\n<p><em>Note: The <code>ui<\/code> object is empty but included for consistency with other events.<\/em><\/p>\n<div>\n<strong>Code examples:<\/strong><p>Initialize the table-columntoggle with the create callback specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).table-columntoggle({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">create<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Bind an event listener to the tablecreate event:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).on( <span class=\"hljs-string\">&quot;tablecreate&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{} );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/section><section class=\"entry-examples\" id=\"entry-examples\"><header><h2>Example:<\/h2><\/header><div class=\"entry-example\" id=\"example-0\">\n<p>A basic example of a responsive table in column toggle mode.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n34\">34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n35\">35<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n36\">36<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n37\">37<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n38\">38<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n39\">39<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n40\">40<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n41\">41<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n42\">42<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n43\">43<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n44\">44<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n45\">45<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n46\">46<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n47\">47<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n48\">48<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n49\">49<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n50\">50<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n51\">51<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n52\">52<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n53\">53<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n54\">54<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n55\">55<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n56\">56<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n57\">57<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n58\">58<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n59\">59<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n60\">60<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n61\">61<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n62\">62<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n63\">63<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n64\">64<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n65\">65<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n66\">66<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n67\">67<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n68\">68<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n69\">69<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n70\">70<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n71\">71<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n72\">72<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n73\">73<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n74\">74<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n75\">75<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n76\">76<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n77\">77<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n78\">78<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n79\">79<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n80\">80<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n81\">81<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n82\">82<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n83\">83<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n84\">84<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n85\">85<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n86\">86<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n87\">87<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n88\">88<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n89\">89<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n90\">90<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n91\">91<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n92\">92<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n93\">93<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n94\">94<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n95\">95<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n96\">96<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n97\">97<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n98\">98<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n99\">99<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n100\">100<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n101\">101<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n102\">102<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n103\">103<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n104\">104<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n105\">105<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n106\">106<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">&quot;en&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">&quot;utf-8&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">&quot;viewport&quot;<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">&quot;width=device-width, initial-scale=1&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>table-columntoggle demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">&quot;stylesheet&quot;<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/mobile\/1.3.2\/jquery.mobile-1.3.2.min.css&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/jquery-1.9.1.min.js&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/mobile\/1.3.2\/jquery.mobile-1.3.2.min.js&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;page&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;page1&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;header&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>jQuery Mobile Example<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;content&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">table<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;table&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;table-column-toggle&quot;<\/span> <span class=\"hljs-attr\">data-mode<\/span>=<span class=\"hljs-string\">&quot;columntoggle&quot;<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-responsive table-stroke&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">thead<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span> <span class=\"hljs-attr\">data-priority<\/span>=<span class=\"hljs-string\">&quot;2&quot;<\/span>&gt;<\/span>Rank<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>Movie Title<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span> <span class=\"hljs-attr\">data-priority<\/span>=<span class=\"hljs-string\">&quot;3&quot;<\/span>&gt;<\/span>Year<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span> <span class=\"hljs-attr\">data-priority<\/span>=<span class=\"hljs-string\">&quot;1&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">abbr<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">&quot;Rotten Tomato Rating&quot;<\/span>&gt;<\/span>Rating<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">abbr<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span> <span class=\"hljs-attr\">data-priority<\/span>=<span class=\"hljs-string\">&quot;5&quot;<\/span>&gt;<\/span>Reviews<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">thead<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tbody<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>1<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;http:\/\/en.wikipedia.org\/wiki\/Citizen_Kane&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;external&quot;<\/span>&gt;<\/span>Citizen Kane<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>1941<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>100%<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>74<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>2<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;http:\/\/en.wikipedia.org\/wiki\/Casablanca_(film)&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;external&quot;<\/span>&gt;<\/span>Casablanca<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>1942<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>97%<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>64<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>3<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;http:\/\/en.wikipedia.org\/wiki\/The_Godfather&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;external&quot;<\/span>&gt;<\/span>The Godfather<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>1972<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>97%<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>87<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>4<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;http:\/\/en.wikipedia.org\/wiki\/Gone_with_the_Wind_(film)&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;external&quot;<\/span>&gt;<\/span>Gone with the Wind<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>1939<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>96%<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>87<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>5<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;http:\/\/en.wikipedia.org\/wiki\/Lawrence_of_Arabia_(film)&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;external&quot;<\/span>&gt;<\/span>Lawrence of Arabia<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>1962<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>94%<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>87<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>6<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;http:\/\/en.wikipedia.org\/wiki\/Dr._Strangelove&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;external&quot;<\/span>&gt;<\/span>Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>1964<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>92%<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>74<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>7<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;http:\/\/en.wikipedia.org\/wiki\/The_Graduate&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;external&quot;<\/span>&gt;<\/span>The Graduate<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>1967<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>91%<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>122<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>8<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;http:\/\/en.wikipedia.org\/wiki\/The_Wizard_of_Oz_(1939_film)&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;external&quot;<\/span>&gt;<\/span>The Wizard of Oz<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>1939<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>90%<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>72<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>9<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;http:\/\/en.wikipedia.org\/wiki\/Singin%27_in_the_Rain&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;external&quot;<\/span>&gt;<\/span>Singin&apos; in the Rain<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>1952<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>89%<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>85<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">th<\/span>&gt;<\/span>10<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">th<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;title&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;http:\/\/en.wikipedia.org\/wiki\/Inception&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;external&quot;<\/span>&gt;<\/span>Inception<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>2010<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>84%<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">td<\/span>&gt;<\/span>78<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">td<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tr<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">tbody<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">table<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\" data-height=\"550\"><\/div>\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Creates a responsive table in column toggle mode<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-122","post","type-post","status-publish","format-standard","hentry","category-widgets"],"_links":{"self":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts\/122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/comments?post=122"}],"version-history":[{"count":1,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts\/122\/revisions"}],"predecessor-version":[{"id":123,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts\/122\/revisions\/123"}],"wp:attachment":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/media?parent=122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/categories?post=122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/tags?post=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}