Zach’s ugly mug (his face) Zach Leat­herman

<table-saw> Web Component

Watch in 2 minutes September 29, 2023
Pinned on GitHub@zachleat/table-saw

A small web component for responsive <table> elements.

Demo GitHub338 npm IndieWeb Avatar for https://npmx.dev/npmx All🚾 1.3%
Popularity
npm60k Monthly downloads sparkline for @zachleat/table-saw, ranging 3k to 7k cdn7k Monthly jsDelivr CDN hits sparkline for @zachleat/table-saw, ranging 332 to 1k
Versions
Monthly publishes sparkline for @zachleat/table-saw, ranging 0 to 4 8 versions in
1.0.7
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: Visual Edit a Responsive HTML Table

Tags: Project Web Components

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 86 talks in nine different countries at events like Beyond Tellerrand, State of the Browser, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Learn more about Zach »