New web component for responsive HTML tables

When you're adding a large table to your website, a common problem that you'll see is content either getting clipped or overflowing horizontally. It can happen when you have a small viewport of that table and the table attempts to render on that small view.

We have a nice, easy solution for this — a new web component called <table-saw>, which detects your viewport and renders the table accordingly. The full repo is available at https://github.com/zachleat/table-saw/; you can also check out a container query example of this on https://zachleat.github.io/table-saw/demo.html

As you’ll see in the demo, if we resize this container, it will re-render the table in a two column layout, repeating the table headers and pairing them up with every single cell in the body of the table.

We’ve already deployed it live to the CloudCannon website. Depending on your viewport size, you’ll see either the original tables rendering or a two-column layout; we’ve set a specific breakpoint for that swap.

Within the CloudCannon CMS, any content author can easily add this responsive table to their own page or blog post, just by adding a Snippet (a.k.a. an Eleventy shortcode). This will lets editors build tables with a familiar table layout, with inline editing of the headers and data cells.

How to add responsive tables on CloudCannon

To add <table-saw> as a Snippet on CloudCannon with our Bookshop component management system, I’ve added the tablesaw.bookshop.yml and tablesaw.eleventy.liquid files to our markdown component library: these establish the parameters of the component and define its structure, as well as calling the table-saw.js script and styling the table itself.

# Metadata about this component, to be used in the CMS
spec:
  label: "Responsive Table"
  description:
  icon: table
  tags: []

# Defines the structure of this component, as well as the default values
blueprint:
  content_markdown: ""

# Overrides any fields in the blueprint when viewing this component in the component browser
preview:

# Any extra CloudCannon inputs configuration to apply to the blueprint
_inputs: 

<script type="module" src="/js/table-saw.js"></script>
<div><table-saw zero-padding text-align>{{ content_markdown }}</table-saw></div> 

In order to access the new ‘Responsive Table’ Snippet in the toolbar, I’ve also added the following under _snippets in my cloudcannon.config.yml file:

 tablesaw:
    template: eleventy_liquid_bookshop_component
    inline: false
    preview:
      text: Responsive Table
    definitions:
      component_name: markdown/tablesaw
      named_args:
        - editor_key: content_markdown
          type: string 

Installing the responsive tables component for local development

You have a few options to install table-saw:

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 third-party CDN (not recommended for production use)