Skip to content

Latest commit

 

History

History
84 lines (62 loc) · 2.74 KB

README.md

File metadata and controls

84 lines (62 loc) · 2.74 KB
Raw

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):

  1. Install via npm: npm install @zachleat/table-saw
  2. Download the source manually from GitHub into your project.
  3. 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