<table-saw> Web Component

Watch in 2 minutes September 29, 2023

@zachleat/table-saw

A small web component for responsive <table> elements.

Popularity: npm56k cdn7k
Versions: 8 versions in 28 Sep 2023

1.0.7
16 Dec 2025
Audit: 0 reports
0 deps
Issues: 1
2
PRs: 0
3

A lightweight structural-only zero-dependency web component wrapper for <table> to render wide tables in small viewports. Automatically creates a two-column layout at small screens with table headers repeated throughout.

Works with Container Queries or Media Queries. Easily customize the ratio of the two-column layout in markup.

Heavily inspired by Filament Group’s Tablesaw Stack jQuery plugin (I also worked on that project). Read the August 2014 post: Tablesaw: A Flexible Tool for Responsive Tables.

Update: here’s a bonus video on how we use it on CloudCannon:

Watch on YouTube: table-saw Web Component

Tags: Project Web Components

< Older
Newer >

Zach Leatherman is a builder for the web at Font Awesome and the creator of Build Awesome (née Eleventy/11ty), an award-winning open source website generator. He measures website performance with speedlify and at one point became too fixated on web fonts. He has given 89 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

1 Repost

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.