Download
The Stack Table stacks the table headers to a two column layout with headers on the left when the viewport width is less than 40em (640px). If you only want to use the Stack Table and don’t want all the extra features (save yourself some bytes), Tablesaw provides a Stack-Only version. To opt-out of inline label creation (the table header cell text that shows at small breakpoints) on a per-table basis, use <table data-tablesaw-no-labels>; on a per-row basis, use <tr data-tablesaw-no-labels>; on a per-cell basis, use <td data-tablesaw-no-labels>. When the table cell is empty, use <table data-tablesaw-hide-empty> to hide the header when stacked. The Column Toggle Table allows the user to select which columns they want to be visible. The user always has the option to select all columns. If the table gets too wide for the viewport, it can overflow and cause a page-level scrollbar.
Features
- Tablesaw provides a Stack-Only version
- Allows the user to select which columns they want to be visible
- The user always has the option to select all columns
- Allows the user to sort the table data by clicking on the table headers
- Data options on table headers can be used to control which columns are sortable
- Tablesaw can be loaded on an as-needed basis
Project Samples
