FooTable - Responsive Tables

Setup

The minimum requirements for a functional FooTable are as follows:

<table class="footable table">
    <thead>
      <tr>
        <th data-toggle="true">Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1</td>
        <td><a href="#">Row 1 Col 1</a></td>
        <td><a href="#">Row 1 Col 2</a></td>
        <td><a href="#">Row 1 Col 3</a></td>
      </tr>
      <tr>
        <td>Row 2</td>
        <td><a href="#">Row 2 Col 1</a></td>
        <td><a href="#">Row 2 Col 2</a></td>
        <td><a href="#">Row 2 Col 3</a></td>
      </tr>
      <tr>
       <td>Row 3</td>
        <td><a href="#">Row 3 Col 1</a></td>
        <td><a href="#">Row 3 Col 2</a></td>
        <td><a href="#">Row 3 Col 3</a></td>
      </tr>
    </tbody>
  </table>

Breakpoints For Mobile Devices

The breakpoints for the <th data-hide="*"> attribute are initialized via global.js (Line:25). They are set as:

                
                  breakpoints: {
                    tiny: 480, //phone
                    medium: 1024, //tablet
                    big: 1200 //Desktop (all)
                  }
Column Data Attribute Shown on Desktop Shown on Tablet Shown on Phone
Name [none] yes yes yes
Job Title data-hide="phone" yes yes no
Status data-hide="phone,tablet" yes no no
Description data-hide="all" no no no

FooTable Examples

Basic FooTable

Name Website URL Twitter Handle Facebook Youtube
Children's Trust Fund ctf4kids.org/ @missourictf FB Youtube
Department of Conservation mdc.mo.gov @MDC_online FB Youtube
MO State Parks mostateparks.com @mostateparks FB Youtube 
<table class="footable table">
  <thead>
    <tr>
      <th data-toggle="true">Name</th>
      <th>Website URL</th>
      <th data-hide="phone,tablet">Twitter Handle</th>
      <th data-hide="phone,tablet">Facebook</th>
      <th data-hide="phone">Youtube</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Children in Nature</td>
      <td><a href="http://childreninnature.mo.gov">childreninnature.mo.gov</a></td>
      <td><a href="https://twitter.com/GetOutandPlayMO">@GetOutandPlayMO</a></td>
      <td><a href="https://www.facebook.com/pages/Missouri-Children-in-Nature-Challenge/110681062308158">FB</a></td>
      <td><a href="https://www.youtube.com/user/ChildrenInNature">Youtube</a></td>
    </tr>
    <tr>
      <td>Department of Conservation</td>
      <td><a href="http://mdc.mo.gov">mdc.mo.gov</a></td>
      <td><a href="https://twitter.com/MDC_online">@MDC_online</a></td>
      <td><a href="https://www.facebook.com/moconservation/">FB</a></td>
      <td><a href="https://www.youtube.com/user/moconservation">Youtube</a></td>
    </tr>
    <tr>
      <td>MO State Parks</td>
      <td><a href="https://mostateparks.com">mostateparks.com</a></td>
      <td><a href="https://twitter.com/mostateparks">@mostateparks</a></td>
      <td><a href="https://www.facebook.com/mostateparks">FB</a></td>
      <td><a href="https://www.youtube.com/user/MissouriStateParks">Youtube</a></td>
    </tr>
  </tbody>
</table>

Basic FooTable - Medium Toggle Icon

Name Website URL Twitter Handle Facebook Youtube
Children's Trust Fund ctf4kids.org/ @missourictf FB Youtube
Department of Conservation mdc.mo.gov @MDC_online FB Youtube
MO State Parks mostateparks.com @mostateparks FB Youtube 
<table class="footable table toggle-medium">
  <thead>
    <tr>
      <th data-toggle="true">Name</th>
      <th>Website URL</th>
      <th data-hide="phone">Twitter Handle</th>
      <th data-hide="phone">Facebook</th>
      <th data-hide="phone,tablet">Youtube</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Children in Nature</td>
      <td><a href="http://childreninnature.mo.gov">childreninnature.mo.gov</a></td>
      <td><a href="https://twitter.com/GetOutandPlayMO">@GetOutandPlayMO</a></td>
      <td><a href="https://www.facebook.com/pages/Missouri-Children-in-Nature-Challenge/110681062308158">FB</a></td>
      <td><a href="https://www.youtube.com/user/ChildrenInNature">Youtube</a></td>
    </tr>
    <tr>
      <td>Department of Conservation</td>
      <td><a href="https://mdc.mo.gov">mdc.mo.gov</a></td>
      <td><a href="https://twitter.com/MDC_online">@MDC_online</a></td>
      <td><a href="https://www.facebook.com/moconservation/">FB</a></td>
      <td><a href="https://www.youtube.com/user/moconservation">Youtube</a></td>
    </tr>
    <tr>
      <td>MO State Parks</td>
      <td><a href="https://mostateparks.com">mostateparks.com</a></td>
      <td><a href="https://twitter.com/mostateparks">@mostateparks</a></td>
      <td><a href="https://www.facebook.com/mostateparks">FB</a></td>
      <td><a href="https://www.youtube.com/user/MissouriStateParks">Youtube</a></td>
    </tr>
  </tbody>
</table>

Basic FooTable - Alternative Circle Toggle Icon

Name Website URL Twitter Handle Facebook Youtube
Children's Trust Fund ctf4kids.org/ @missourictf FB Youtube
Department of Conservation mdc.mo.gov @MDC_online FB Youtube
MO State Parks mostateparks.com @mostateparks FB Youtube 
<table class="footable table toggle-circle">
  <thead>
    <tr>
      <th data-toggle="true">Name</th>
      <th>Website URL</th>
      <th data-hide="phone,tablet">Twitter Handle</th>
      <th data-hide="phone,tablet">Facebook</th>
      <th data-hide="phone">Youtube</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Children in Nature</td>
      <td><a href="http://childreninnature.mo.gov">childreninnature.mo.gov</a></td>
      <td><a href="https://twitter.com/GetOutandPlayMO">@GetOutandPlayMO</a></td>
      <td><a href="https://www.facebook.com/pages/Missouri-Children-in-Nature-Challenge/110681062308158">FB</a></td>
      <td><a href="https://www.youtube.com/user/ChildrenInNature">Youtube</a></td>
    </tr>
    <tr>
      <td>Department of Conservation</td>
      <td><a href="mdc.mo.gov">mdc.mo.gov</a></td>
      <td><a href="https://twitter.com/MDC_online">@MDC_online</a></td>
      <td><a href="https://www.facebook.com/moconservation/">FB</a></td>
      <td><a href="https://www.youtube.com/user/moconservation">Youtube</a></td>
    </tr>
    <tr>
      <td>MO State Parks</td>
      <td><a href="https://mostateparks.com">mostateparks.com</a></td>
      <td><a href="https://twitter.com/mostateparks">@mostateparks</a></td>
      <td><a href="https://www.facebook.com/mostateparks">FB</a></td>
      <td><a href="https://www.youtube.com/user/MissouriStateParks">Youtube</a></td>
    </tr>
  </tbody>
</table>