title: Should I use JS events or CSS media queries for responsive tables with React?
body: <p>I wish to make stacked responsive tables with React. To avoid horizontal scrolling in a small screen, each row is displayed as mini-tables; please see included images.</p>
  
  <p>For my use case, content in <code>td</code> (and maybe <code>th</code>) tags may be string, number or rich nodes.</p>
  
  <p>I want to implement the same in React, since no library exists yet for this. What is a good approach?</p>
  
  <hr>
  
  <p>I have examined two approaches.</p>
  
  <ol>
  <li><p>First one is Javascript-based, like jQuery-based <a href="https://github.com/johnpolacek/stacktable.js/blob/master/stacktable.js" rel="noreferrer">StackTable</a>, from where I included the images. It turns the table into a table+card tables combination, and then uses provided media query to show <strong>either</strong> the table or card table. The cardtable function traverses the table and generates two-column key value <strong>tables</strong> from each row.</p>
  
  <p>This seems easy in react: render the table and card table and use media query to show either one. But <strong>is rendering same node (as opposed to strings) at multiple places safe</strong>? A Every <code>th</code> element will be rendered for actual table header and for every single row. </p></li>
  <li><p>Second one uses pure CSS, such as this one from <a href="https://css-tricks.com/responsive-data-tables/" rel="noreferrer">CSS Tricks</a>.</p>
  
  <pre><code>/* if media query */
  table, thead, tbody, th, td, tr { 
      display: block; 
  }
  td:nth-of-type(1):before { content: "First Name"; }
  td:nth-of-type(2):before { content: "Last Name"; }
  td:nth-of-type(3):before { content: "Job Title"; }
  </code></pre>
  
  <p>The "content" thing seems iffy though, we have to maintain a copy-paste atrocity of contents in an otherwise DRY codebase. But I hope this will be easier with React.</p></li>
  </ol>
  
  <hr>
  
  <p>Example of a stacked responsive table:</p>
  
  <p>Full table:</p>
  
  <p><a href="https://i.stack.imgur.com/z69MC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/z69MC.png" alt="enter image description here"></a></p>
  
  <p>Responsive:</p>
  
  <p><a href="https://i.stack.imgur.com/V5u56.png" rel="noreferrer"><img src="https://i.stack.imgur.com/V5u56.png" alt="enter image description here"></a></p>