title: How can you make a table scrollable in Semantic-UI-React? Using Next.js
body: <p>I have a wide table, when I use the Grid component and giving it width of 16 on mobile I get a weird result</p>
  
  <p>I will provide a url of my work in process, please ignore the website details, it is not importatnt, the important thing is that every component is responsive in the mobile view except the table which is stretched.  Please look at it on mobile and zoom it to understand what I mean:</p>
  
  <p><a href="https://exodia-client-oatx5x9ug.now.sh/" rel="nofollow noreferrer">https://exodia-client-oatx5x9ug.now.sh/</a></p>
  
  <p>The result I would like to achive is for the table to fit into the mobile view just like the other components and be scrollable (the user will make a right and left swipe motion to see more details).</p>
  
  <p>The perfect result will be like in this website:</p>
  
  <p><a href="https://coingecko.com" rel="nofollow noreferrer">https://coingecko.com</a></p>
  
  <p>you can see that everything is responsive there and that the table is scroll able.</p>
  
  <p>I imagine there is a way to so with Semantic-UI-React by somehow utilizing augmentation </p>
  
  <pre><code> import { Table } from "semantic-ui-react";
  
   Table as={*some sort of styled div} 
  </code></pre>
  
  <p>But I tried a couple of styled divs without success for example:</p>
  
  <pre><code>style={{overflow: 'auto'}}
  </code></pre>