Customizable Tables

Fully Responsive

Content being provided by Contentful CMS.
Code:
github.com/AaronMullan/tables

Features:

  • Table Title
  • Can alternate columns or rows as gray
  • Footnote (can be left aligned)
  • Responsive Options:
    • "Regular" table can have first column sticky
    • "Comparison" table switches to dropdown-controlled 3 column view at tablet and mobile sizes

Cell Types:

  • Plain Text
  • Rich Text
  • Check Mark or X Mark
  • Progress Bar
  • "Out-of-five-stars" rating
  • Custom Image

Velvet Underground Comparison Table

Motorik Beat

Checkmarkfill="none" xmlns="http://www.w3.org/2000/svg">
Checkmarkfill="none" xmlns="http://www.w3.org/2000/svg">

12-Bar Blues

Previously known as "The Warlocks"

Checkmarkfill="none" xmlns="http://www.w3.org/2000/svg">
X

Table: Sports Themed (without sticky First Column)

Baseball

Soccer

Jai Alai

Ice Hockey

Tennis

Football

Hit Thing With Other Thing

Checkmarkfill="none" xmlns="http://www.w3.org/2000/svg">
X
Checkmarkfill="none" xmlns="http://www.w3.org/2000/svg">
Checkmarkfill="none" xmlns="http://www.w3.org/2000/svg">
Checkmarkfill="none" xmlns="http://www.w3.org/2000/svg">
X

Average Yelp Rating

Here's a left-aligned footnote.

Table: Sports Themed (with sticky first column)

Baseball

Soccer

Jai Alai

Ice Hockey

Tennis

Football

Hit Thing With Other Thing

Checkmarkfill="none" xmlns="http://www.w3.org/2000/svg">
X
Checkmarkfill="none" xmlns="http://www.w3.org/2000/svg">
Checkmarkfill="none" xmlns="http://www.w3.org/2000/svg">
Checkmarkfill="none" xmlns="http://www.w3.org/2000/svg">
X

Average Yelp Rating

here's a footnote