table-saw
A small structural-only zero-dependency Web Component for responsive <table> elements. Heavily inspired by Filament Group’s Tablesaw Stack jQuery plugin.
Demo
Examples
<!-- Note: requires `type="module"` -->
<script type="module" src="table-saw.js"></script>
<!-- stacks below 640px viewport -->
<table-saw>
<table><!-- some HTML omitted for brevity --></table>
</table-saw>
<!-- stacks below 400px viewport -->
<table-saw breakpoint="(max-width: 24.9375em)">
<table><!-- … --></table>
</table-saw>
<!-- stack columns are 50% and 50% width -->
<table-saw ratio="1/1">
<table><!-- … --></table>
</table-saw>
<!-- Remove left/right padding on table cells when stacked -->
<table-saw zero-padding>
<table><!-- … --></table>
</table-saw>
<!-- Force left-aligned text when stacked -->
<table-saw text-align>
<table><!-- … --></table>
</table-saw>
<!-- Use your own text-align value when stacked -->
<table-saw text-align="right">
<table><!-- … --></table>
</table-saw>- Use
breakpointattribute to set the breakpoint (default:(max-width: 39.9375em)). - Use
type="container"attribute to use container queries instead of viewport-based media queries (default:type="media"). - Use
ratioattribute to override the small viewport column ratio (default:1/2). - Use
zero-paddingattribute to remove small viewport padding on table cells. - Use
force-alignattribute to force column text alignment at small viewport.
Installation
You have a few options (choose one of these):
- Install via npm:
npm install @zachleat/table-saw - Download the source manually from GitHub into your project.
- Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)
Usage
Make sure you include the <script> in your project (choose one of these):
<!-- Host yourself -->
<script type="module" src="table-saw.js"></script><!-- 3rd party CDN, not recommended for production use -->
<script type="module" src="https://www.unpkg.com/@zachleat/[email protected]/table-saw.js"></script><!-- 3rd party CDN, not recommended for production use -->
<script type="module" src="https://esm.sh/@zachleat/[email protected]"></script>Features
- Supports one or many
<table>child elements. - Works with viewport media queries or container queries.
- Uses CSS grid for small viewport alignment.
- Falls back to regular table before or without JavaScript.
- Cuts the mustard on
CSSStyleSheet.prototype.replaceSync