Designing Beautiful Tables in R

Part of Workshops for Ukraine 🇺🇦

Tanya Shapiro

2023-04-27

Hi, I’m Tanya 👋

  • Independent data consultant, specializing in data analysis and visualization design
  • Previously worked in insurance industry
  • Fell in love with R via #TidyTuesday
  • Data geek based in St. Pete, FL

Today We’ll Learn About…

Building Tables with reactable
Basic Styling with reactablefmtr
Advanced Styling with htmltools (HTML/CSS)
Exporting Tables - interactive & static

Workshop Agenda


15 min Intro to reactable, HTML/CSS
40 min Hands-on coding: basic table
10 min Q&A session
30 min Hands-on coding: advanced table
15 min Wrap-up, Q&A session

Why tables?

Easy to Understand
  • Familiar format for most audiences, intuitive & interpertable
  • Easy to scan, compare, and contrast many records
Organized Structure
  • All rows & columns!
  • Sortable, filterable, searchable
  • Good for visualizing a lot of data points
Easy to create
  • Mimics most data structures, simple to translate
  • Lot of design opportunities - fonts, colors, heatmaps

But they don’t have to look like…

We can do more with tables…

Examples in Media: 538

Table from 538 summarizing MLB stats and predictions by team.

Examples in Media: NYT

Table from the New York Times displaying COVID-19 information by state

What is reactable?

  • R library for building interactive data tables
  • Based on React Table (JS)
  • Includes features like column formatting, sorting, filtering, pagination, searching, grouping, and conditional styling
  • Great for interactive HTML documents (R Markdown, Quarto) and Shiny apps
  • Bonus: includes extensive documentation !

Powering-Up reactable

  • reactablefmtr is an extension package that supports reactable
  • Makes it easy to customize and stylize reactable without requiring HTML or CSS knowledge.
  • Examples: embed images and icons, add sparklines, apply color scales and themes

Add HTML & CSS directly in R

  • HTML = structure (divs, spans)
  • CSS = lipstick (font family, color, spacing)
  • Use this combo to create more custom styling to tables

How it all fits together

Let’s Start Coding!