`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 breakpoint attribute 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 ratio attribute to override the small viewport column ratio (default: 1/2).
Use zero-padding attribute to remove small viewport padding on table cells.
Use text-align attribute 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/table-saw@1.0.2/table-saw.js"></script>

<!-- 3rd party CDN, not recommended for production use -->
<script type="module" src="https://esm.sh/@zachleat/table-saw@1.0.2"></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

License

Bestlike/table-saw

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages