JSFiddle - React, Tailwind, and code Playground

by seefeld

HTML

<div data-role="page" class="type-interior">

      <div data-role="header" data-theme="f">
      <h1>Table: Column Toggle</h1>
      <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
      <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
   </div><!-- /header -->

   <div data-role="content">
			<div class="content-primary">
    <h2>Column toggle table mode</h2>
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="table-column-toggle.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
				<li><a href="toggle-options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="toggle-methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="toggle-events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>

         <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>
      
        <p>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. </p>
  
    
         <table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
              <thead>
                <tr>
                  <th data-priority="2">Rank</th>
                  <th>Movie Title</th>
                  <th data-priority="3">Year</th>
                  <th data-priority="1"><abbr title="Rotten Tomato...

CSS

d:b