A tasty JavaScript library which helps format data tables on small screens!
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!
table
can be responsive!table
, or leave as is to use its natural width
!table
which determines the look and feel!responsive-table.js
library in your code base:<script src="javascripts/responsive-table.js"></script>
ResponsiveTable()
object and set the parameters:<script>
var myTable = new ResponsiveTable('#my-table', 'list', '600px');
</script>
The first parameter is the unique id
of the table
. This id
needs to be applied to the root <table>
tag.
The second parameter determines the "flavour":
table
using the row headers as the link text. Only the associated table
row is visible while the others remain hidden!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.The third parameter is the desired break point for when the table
should change from the full width layout to the small screen layout. This parameter is optional. If left out, the break point will be set to the natural width of the table, and change when appropriate.
Each table
needs to conform to at least the following markup structure when applying either a "stack" or "window" theme:
<table id="unique-table-id">
<caption>Table Caption</caption>
<thead>
<tr>
<th scope="col">Heading 1</th>
<th scope="col">Heading 2</th>
<th scope="col">Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
When using the "list" theme, row headers are also required:
<tr>
<th scope="row">Cell 1</th>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
no-js
FallbackIt is recommended to wrap the table
within a <div class="responsive-table__wrapper"/>"
element. This way, if the JavaScript fails to load, the table will have a horizontal scroll available for smaller screens.
Try it out here! https://svinkle.github.io/responsive-table/
This project and its source code is licensed under the MIT license.