Zach’s ugly mug (his face) Zach Leatherman

<table-saw> Web Component

September 29, 2023 Watch in 2 minutes

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

< Newer
resize-asaurus Web Component
Older >
Jamstack ZHUZH: a Roundtable Discussion on the future of the Jamstack Community

Zach Leatherman IndieWeb Avatar for a builder for the web at IndieWeb Avatar for He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

1 Repost

IndieWeb Avatar for
Shamelessly plug your related post

These are webmentions via the IndieWeb and

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)