🏠 back to Observable

It would be cool if <table> tags had a spiffy default style


#1

I’m continuing to putter away in my baseball notebook.

As I integrate more data, I’m experimenting with surfacing some of it ina table. Your excellent templating tricks make that easy, but the default table style is pretty plain. I doubt I’ve thought through all of the implications, but in in this case I would appreciated an “opinionated” bit of CSS that doctored up the table to fit your site style.


#2

I dunno, Ben. Our default table style looks pretty reasonable to me:

Here’s all the current CSS:

table {
  width: 100%;
  max-width: 640px;
  border-spacing: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

th {
  text-align: left;
}

thead th {
  border-bottom: solid 1px #ccc;
}

tbody tr:not(:last-child) td {
  border-bottom: solid 1px #eee;
}

What sort of spiffiness are you looking for? I don’t think we’re going to go as far as zebra striping, or hover highlighting cells, or anything with that level of zazz…


#3

Ah! I didn’t realize that thead and tbody would bring some styles with them. Very good!


#4

I think we could really use some great table defaults with real sophisticated professional defaults - like I’d really love to

  • automatically use tabular numbers, so numbers line up in columns
  • have good defaults for right-aligning numeric rows
  • and good defaults for rows with decimal accuracy
  • and maybe even table sorting

But after tinkering with implementing this in Observable-the-application-itself, I think it’ll really be best as a notebook that people can import, since even though these table tweaks are great, they’re also a bit opinionated, and having this be opt-in avoids the case where someone just wants tables that are more or less the HTML defaults. Our built-in styles are pretty light-touch and they should probably stay that way, to maximize flexibility.


#5

Okay! After putting this on the backburner for a week, I gave it a first shot:

Reusable tables. Hits many of my initial goals:

  • Decent, minimal stylistic defaults
  • Built-in support for rank columns, sorting
  • Light-touch auto-styling for numeric columns
  • Custom cell formatters
  • Customizable titles

Feedback welcome! Would love to hit 98% of the common cases with this notebook and make it simple to drop in better tables for analysis.


#6

I’ll give it a try. I am sympathetic to @jashkenas fear of going overboard. Though, as I’ve said in other threads here, I do think the RMarkdown table filters and one of its few ++ features that its competitors lack.

Here’s an example of that https://wpinvestigative.github.io/federal_employees_trump_2017/employment.html


#7

I’ve built something similar as well: https://beta.observablehq.com/@gampleman/table


#8

Hi Tom, I was playing with your notebook and noticed some minor problems with the paging. Here is a possible fix. Spotify fetch also seems broken currently. Thanks for the notebook. I learnt some good techniques to make things work in Observable (i.e. modifying the cell html with rerender).

       ${pages ? html`<div class='pretty-pager'>
          <button data-action="previous" ${page==0 ? 'disabled' : ''}>Previous</button>
          ${Array.from({ length: pages }).map((_, i) =>
            html`<button data-page="${i}">${i + 1}</button>`
          )}
          <button data-action="next" ${page==pages-1 ? 'disabled' : ''}>Next</button>
        </div>` : ''}

#9

Yep, you’re right - I’ve been meaning to take some time and really improve the table output. Will do so soon.


#10

offtopic: @gampleman, I don’t know if this was on purpose but I love how it makes the page look like it’s breathing: