Skip to content

zachleat/table-saw

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
October 4, 2023 09:07
September 28, 2023 13:16
October 4, 2023 11:32
October 28, 2023 20:20
October 4, 2023 14:22

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 force-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/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