Building the Perfect Data Table in Squarespace

Intro

Table can be the bane of a coder’s existence. They take a little bit of understanding in order for them to look right. Below are my first efforts to create a interactive, sortable table.

Squarespace Default Table — Table 1

This table is taken from the mtcars dataset in R and is the first five rows to conserve vertical space. In R, the table is produced using the xtable function and then print with code set to “html”. The output from the console is copy and pasted into the Squarespace code block. Needless to say, the Squarespace default styling is sparse and spacing makes the table difficult to comprehend.

model mpg cyl disp hp drat wt qsec vs am gear carb
Mazda RX4 21.00 6.00 160.00 110.00 3.90 2.62 16.46 0.00 1.00 4.00 4.00
Mazda RX4 Wag 21.00 6.00 160.00 110.00 3.90 2.88 17.02 0.00 1.00 4.00 4.00
Datsun 710 22.80 4.00 108.00 93.00 3.85 2.32 18.61 1.00 1.00 4.00 1.00
Hornet 4 Drive 21.40 6.00 258.00 110.00 3.08 3.21 19.44 1.00 0.00 3.00 1.00
Hornet Sportabout 18.70 8.00 360.00 175.00 3.15 3.44 17.02 0.00 0.00 3.00 2.00

Static HTML Table — Table 2

Styling a table can improve its appearances quickly. There was a Squarespace page devoted to addressing this issue here. The tips on formatting were helpful, and the styling was borrowed but the colors were changed. There was very few lines of code and it improved the appearance dramatically.

model mpg cyl disp hp drat wt qsec vs am gear carb
Mazda RX4 21.00 6.00 160.00 110.00 3.90 2.62 16.46 0.00 1.00 4.00 4.00
Mazda RX4 Wag 21.00 6.00 160.00 110.00 3.90 2.88 17.02 0.00 1.00 4.00 4.00
Datsun 710 22.80 4.00 108.00 93.00 3.85 2.32 18.61 1.00 1.00 4.00 1.00
Hornet 4 Drive 21.40 6.00 258.00 110.00 3.08 3.21 19.44 1.00 0.00 3.00 1.00
Hornet Sportabout 18.70 8.00 360.00 175.00 3.15 3.44 17.02 0.00 0.00 3.00 2.00

/*The .css below is what was used to produce the above table */
#my_tables {
   border: 3px solid #404040;
   background-color: white;
 
   th {
     padding: 10px;
     height:40px;
     color: #eeeeee;
     background-color: #404040;
     }
 
   td {
       padding: 6px;
       border:1px solid #F0F0F0;
   }
 
   tr:nth-child(odd){background-color: #F0F0F0
  }

Static HTML Table with “overflow-x” — Table 3

Static .html tables aren’t very interesting and take up too much vertical space for large tables. The second suggestion was to include the CSS overflow property. There is an excellent discussion of the topic here at W3schools. The mtcars data set was again included, but all 32 models this time. The overflow-x proper was set to allow for scrolling. The tables feels interactive in that it moves but really it’s only the limited window above it.

model mpg cyl disp hp drat wt qsec vs am gear carb
Mazda RX4 21.00 6.00 160.00 110.00 3.90 2.62 16.46 0.00 1.00 4.00 4.00
Mazda RX4 Wag 21.00 6.00 160.00 110.00 3.90 2.88 17.02 0.00 1.00 4.00 4.00
Datsun 710 22.80 4.00 108.00 93.00 3.85 2.32 18.61 1.00 1.00 4.00 1.00
Hornet 4 Drive 21.40 6.00 258.00 110.00 3.08 3.21 19.44 1.00 0.00 3.00 1.00
Hornet Sportabout 18.70 8.00 360.00 175.00 3.15 3.44 17.02 0.00 0.00 3.00 2.00
Valiant 18.10 6.00 225.00 105.00 2.76 3.46 20.22 1.00 0.00 3.00 1.00
Duster 360 14.30 8.00 360.00 245.00 3.21 3.57 15.84 0.00 0.00 3.00 4.00
Merc 240D 24.40 4.00 146.70 62.00 3.69 3.19 20.00 1.00 0.00 4.00 2.00
Merc 230 22.80 4.00 140.80 95.00 3.92 3.15 22.90 1.00 0.00 4.00 2.00
Merc 280 19.20 6.00 167.60 123.00 3.92 3.44 18.30 1.00 0.00 4.00 4.00
Merc 280C 17.80 6.00 167.60 123.00 3.92 3.44 18.90 1.00 0.00 4.00 4.00
Merc 450SE 16.40 8.00 275.80 180.00 3.07 4.07 17.40 0.00 0.00 3.00 3.00
Merc 450SL 17.30 8.00 275.80 180.00 3.07 3.73 17.60 0.00 0.00 3.00 3.00
Merc 450SLC 15.20 8.00 275.80 180.00 3.07 3.78 18.00 0.00 0.00 3.00 3.00
Cadillac Fleetwood 10.40 8.00 472.00 205.00 2.93 5.25 17.98 0.00 0.00 3.00 4.00
Lincoln Continental 10.40 8.00 460.00 215.00 3.00 5.42 17.82 0.00 0.00 3.00 4.00
Chrysler Imperial 14.70 8.00 440.00 230.00 3.23 5.34 17.42 0.00 0.00 3.00 4.00
Fiat 128 32.40 4.00 78.70 66.00 4.08 2.20 19.47 1.00 1.00 4.00 1.00
Honda Civic 30.40 4.00 75.70 52.00 4.93 1.61 18.52 1.00 1.00 4.00 2.00
Toyota Corolla 33.90 4.00 71.10 65.00 4.22 1.83 19.90 1.00 1.00 4.00 1.00
Toyota Corona 21.50 4.00 120.10 97.00 3.70 2.46 20.01 1.00 0.00 3.00 1.00
Dodge Challenger 15.50 8.00 318.00 150.00 2.76 3.52 16.87 0.00 0.00 3.00 2.00
AMC Javelin 15.20 8.00 304.00 150.00 3.15 3.44 17.30 0.00 0.00 3.00 2.00
Camaro Z28 13.30 8.00 350.00 245.00 3.73 3.84 15.41 0.00 0.00 3.00 4.00
Pontiac Firebird 19.20 8.00 400.00 175.00 3.08 3.85 17.05 0.00 0.00 3.00 2.00
Fiat X1-9 27.30 4.00 79.00 66.00 4.08 1.94 18.90 1.00 1.00 4.00 1.00
Porsche 914-2 26.00 4.00 120.30 91.00 4.43 2.14 16.70 0.00 1.00 5.00 2.00
Lotus Europa 30.40 4.00 95.10 113.00 3.77 1.51 16.90 1.00 1.00 5.00 2.00
Ford Pantera L 15.80 8.00 351.00 264.00 4.22 3.17 14.50 0.00 1.00 5.00 4.00
Ferrari Dino 19.70 6.00 145.00 175.00 3.62 2.77 15.50 0.00 1.00 5.00 6.00
Maserati Bora 15.00 8.00 301.00 335.00 3.54 3.57 14.60 0.00 1.00 5.00 8.00
Volvo 142E 21.40 4.00 121.00 109.00 4.11 2.78 18.60 1.00 1.00 4.00 2.00

#my_window {
    width:100%;
    height:400px;
    overflow-x:scroll;
}

Embedded Google Spreadsheet with Overflow-x (Table 4)

Surely there is a more effective workaround rather than dealing with all the CSS and HTML. So in that vein and partially out of desperation, I tried embedding a google spreadsheet. In order for you to embed the spreadsheet, it has to be made public and then published to the web. The formatting looks good but columns still can’t be sorted. Just a window and still no interactivity.

HTML Table Made Sortable Through JavaScript (Table 5)

Continuing the quest for interactivity, additional searches were done of the Squarespace bulletin boards. This post discussed the use of JavaScript. The script worked with a few changes on a desktop in safari, but the chart wouldn’t sort on an iPhone. Most of web traffic today is from a mobile device so that’s a problem. There was only one idea left . . .

HTML Table Made Sortable with Dynatable (Table 6)

Somebody championed the sortable table problem and coded a solution called “Dynatable

model mpg cyl disp hp drat wt qsec vs am gear carb
Mazda RX4 21.00 6.00 160.00 110.00 3.90 2.62 16.46 0.00 1.00 4.00 4.00
Mazda RX4 Wag 21.00 6.00 160.00 110.00 3.90 2.88 17.02 0.00 1.00 4.00 4.00
Datsun 710 22.80 4.00 108.00 93.00 3.85 2.32 18.61 1.00 1.00 4.00 1.00
Hornet 4 Drive 21.40 6.00 258.00 110.00 3.08 3.21 19.44 1.00 0.00 3.00 1.00
Hornet Sportabout 18.70 8.00 360.00 175.00 3.15 3.44 17.02 0.00 0.00 3.00 2.00
Valiant 18.10 6.00 225.00 105.00 2.76 3.46 20.22 1.00 0.00 3.00 1.00
Duster 360 14.30 8.00 360.00 245.00 3.21 3.57 15.84 0.00 0.00 3.00 4.00
Merc 240D 24.40 4.00 146.70 62.00 3.69 3.19 20.00 1.00 0.00 4.00 2.00
Merc 230 22.80 4.00 140.80 95.00 3.92 3.15 22.90 1.00 0.00 4.00 2.00
Merc 280 19.20 6.00 167.60 123.00 3.92 3.44 18.30 1.00 0.00 4.00 4.00
Merc 280C 17.80 6.00 167.60 123.00 3.92 3.44 18.90 1.00 0.00 4.00 4.00
Merc 450SE 16.40 8.00 275.80 180.00 3.07 4.07 17.40 0.00 0.00 3.00 3.00
Merc 450SL 17.30 8.00 275.80 180.00 3.07 3.73 17.60 0.00 0.00 3.00 3.00
Merc 450SLC 15.20 8.00 275.80 180.00 3.07 3.78 18.00 0.00 0.00 3.00 3.00
Cadillac Fleetwood 10.40 8.00 472.00 205.00 2.93 5.25 17.98 0.00 0.00 3.00 4.00
Lincoln Continental 10.40 8.00 460.00 215.00 3.00 5.42 17.82 0.00 0.00 3.00 4.00
Chrysler Imperial 14.70 8.00 440.00 230.00 3.23 5.34 17.42 0.00 0.00 3.00 4.00
Fiat 128 32.40 4.00 78.70 66.00 4.08 2.20 19.47 1.00 1.00 4.00 1.00
Honda Civic 30.40 4.00 75.70 52.00 4.93 1.61 18.52 1.00 1.00 4.00 2.00
Toyota Corolla 33.90 4.00 71.10 65.00 4.22 1.83 19.90 1.00 1.00 4.00 1.00
Toyota Corona 21.50 4.00 120.10 97.00 3.70 2.46 20.01 1.00 0.00 3.00 1.00
Dodge Challenger 15.50 8.00 318.00 150.00 2.76 3.52 16.87 0.00 0.00 3.00 2.00
AMC Javelin 15.20 8.00 304.00 150.00 3.15 3.44 17.30 0.00 0.00 3.00 2.00
Camaro Z28 13.30 8.00 350.00 245.00 3.73 3.84 15.41 0.00 0.00 3.00 4.00
Pontiac Firebird 19.20 8.00 400.00 175.00 3.08 3.85 17.05 0.00 0.00 3.00 2.00
Fiat X1-9 27.30 4.00 79.00 66.00 4.08 1.94 18.90 1.00 1.00 4.00 1.00
Porsche 914-2 26.00 4.00 120.30 91.00 4.43 2.14 16.70 0.00 1.00 5.00 2.00
Lotus Europa 30.40 4.00 95.10 113.00 3.77 1.51 16.90 1.00 1.00 5.00 2.00
Ford Pantera L 15.80 8.00 351.00 264.00 4.22 3.17 14.50 0.00 1.00 5.00 4.00
Ferrari Dino 19.70 6.00 145.00 175.00 3.62 2.77 15.50 0.00 1.00 5.00 6.00
Maserati Bora 15.00 8.00 301.00 335.00 3.54 3.57 14.60 0.00 1.00 5.00 8.00
Volvo 142E 21.40 4.00 121.00 109.00 4.11 2.78 18.60 1.00 1.00 4.00 2.00