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