🍱 Responsive Table

Responsive Table is a tasty JavaScript library which helps format data tables on small screens! It does so by reordering items in the DOM while keeping HTML markup valid and assistive technology friendly!

Flavours

• 🔗 List – Generates a link list above the table using the row headers as the link text. Only the associated table row is visible while the others remain hidden!
• 🥞 Stack – Displays each row of content atop one another, like a stack of pankaces!
• 🏠 Window – The table remains as-is with a horizontal scroll available. A link to open the table in a new, full-width window appears at the desired breakpoint.

Usage

1. Include responsive-table.js at the bottom of your page
2. Create a new dataTable variable and assign it a new ResponsiveTable() instance
3. Pass ResponsiveTable() three paramaters:
   • The unique IDREF of the table
   • The type of table: list , stack , or window
   • The CSS breakpoint at which the table mutation should occur

<script src="js/responsive-table.js"></script>
<script>
  var dataTable = new ResponsiveTable('#data-table', 'list', '50em');
</script>