Chocolate on the table: Exploring reactable through chocolate ratings

Introduction

This markdown will explain how to create a ~silky smooth~ data table using reactable. Pretty sweet, right? (Okay, enough chocolate puns.)

The data is rankings of over 2,500 plain dark chocolate bars and includes country of origin, manufacturer, cocoa percent and more. It was compiled on a website called Flavors of Cacao. It’s unclear who’s behind the ratings, but whoever it is, they left a pretty involved guide to give us insight into their process.

I stumbled across the data on the Tidy Tuesday Github page, which has lots of great datasets to practice on in R.

Let’s get started!

Step 1: Get set up

Make sure you read in your data and run library(reactable), along with whatever other libraries you want.

## ── Attaching packages ─────────────────────────────────────── tidyverse 1.3.1 ──

## ✓ ggplot2 3.3.5     ✓ purrr   0.3.4
## ✓ tibble  3.1.6     ✓ dplyr   1.0.8
## ✓ tidyr   1.1.4     ✓ stringr 1.4.0
## ✓ readr   2.0.2     ✓ forcats 0.5.1

## Warning: package 'dplyr' was built under R version 4.1.2

## ── Conflicts ────────────────────────────────────────── tidyverse_conflicts() ──
## x dplyr::filter() masks stats::filter()
## x dplyr::lag()    masks stats::lag()

Step 2: Choose your columns

There are a lot of columns in this dataset, and not all of them are relevant for my table. So I’m going to select which columns I want and make a new dataframe with only those columns included.

table_chocolate_ratings <-
  chocolate_ratings %>% 
  select(company_manufacturer, country_of_bean_origin, cocoa_percent, most_memorable_characteristics, rating) 

Step 3: Make a basic reactable

This is done with the function reactable(your_data_frame).

reactable(table_chocolate_ratings)

This is an okay table. It’s sortable by default, which is nice — just go to any column header and click the up and down arrows to sort by ascending/descending. (So for example, you could sort it in order of rating from best to worse.) But we can do better!

Step 4: Add some semi-fancy features

Here are a few features I’ll add in:

• searchable = TRUE makes a search box in the top right
• resizable = TRUE makes each column resizable by dragging
• filterable = TRUE adds a filter box to the top of each column
• defaultPageSize = sets a limit to the number of rows in your table.
• bordered= TRUE adds borders to the table.

reactable(table_chocolate_ratings, searchable = TRUE, resizable = TRUE, filterable = TRUE, defaultPageSize = 5, bordered = TRUE)

This table is already looking better! But, the headings are ugly. Let’s work on that next.

Step 5: Clean up the headings

reactable(table_chocolate_ratings, searchable = TRUE, resizable = TRUE, filterable = TRUE, defaultPageSize = 5, bordered = TRUE,
          columns = list(
    company_manufacturer = colDef("Company"),
    cocoa_percent = colDef("Cocoa %"),
    country_of_bean_origin = colDef("Country of Bean Origin"),
    most_memorable_characteristics = colDef("Most Memorable Characteristics"),
    rating = colDef("Rating")))

Cool! Let’s add a few more features, for fun.

Step 6: Group by ‘whatever’

groupBy = ‘variable’ allows you to group by whatever variable you choose. Here, I’ll group by company manufacturer, so we can see all of the chocolate bars made by a company in one place.

reactable(table_chocolate_ratings, searchable = TRUE, resizable = TRUE, filterable = TRUE, defaultPageSize = 5, bordered = TRUE,
          columns = list(
    company_manufacturer = colDef("Company"),
    cocoa_percent = colDef("Cocoa %"),
    country_of_bean_origin = colDef("Country of Bean Origin"),
    most_memorable_characteristics = colDef("Most Memorable Characteristics"),
    rating = colDef("Rating")),
    groupBy = 'company_manufacturer')

Sweet! Adding a few final features…

Step 7: Final touches

• highlight = TRUE highlights a row when you hover over it.
• compact = TRUE makes the table nice and compact.

reactable(table_chocolate_ratings, searchable = TRUE, resizable = TRUE, filterable = TRUE, defaultPageSize = 5, bordered = TRUE, highlight = TRUE, compact = TRUE,
          columns = list(
    company_manufacturer = colDef("Company"),
    cocoa_percent = colDef("Cocoa %"),
    country_of_bean_origin = colDef("Country of Bean Origin"),
    most_memorable_characteristics = colDef("Most Memorable Characteristics"),
    rating = colDef("Rating")),
    groupBy = 'company_manufacturer')

And we’re done! There is a lot more you can do with these tables, but this is some of the basics.

To take it to the next level, check out this page of reactable demos on Github.