Hi. I’m Sharon Machlis at IDG Communications, here with Episode 47 of Do More With R: Interactive tables with expandable rows.
Interactive tables with sorting and filters can be a nice way of exploring data. And sometimes, you might want to share that with other people – including text-only data like recipes, resource lists, or a chart of popular R packages.
But when that data includes a column with fairly long entries, that column may not fit well in a table the width of your screen. This can be especially tricky to display when not every row includes the very-wide column. For example, results of a questionnaire where one field is “Do you have any additional comments?” Not everyone may.
That’s where a table with expandable rows can come in handy. Here’s one example. At the NICAR data journalism conference, I posted a form so speakers (and other attendees) could submit links to session presentations. A few people had additional comments; others didn’t. Showing that column by default would waste a lot of screen real estate.
Instead, I have that comment field only display if a user clicks on the expand-row icon. You can see that not every row can be expanded, because not every row has data in that field.
Let’s see how to make a table like this.
If you’d like to follow along, install and load the reactable package. For this demo, you’ll also need the rio, glue, htmltools, and dplyr packages installed.
You can download the data I’ll use in this demo by going to the InfoWorld article associated with this video.
It’s info about R and Python sessions at this year’s conference.
In this code, I load reactable and dplyr and then import my data using rio::import(). I named the file nicar.csv and it’s in the data subdirectory of my RStudio project.
If we take a look at the data, there are columns for the name of the resource, the author, the URL, Tags, Type, and Comments.
The mutate part of this code just creates a column with a clickable link to each resource. Basically, writing a little basic HTML. Then I select the columns I want in the order I want them.
Finally, I create a basic default reactable table. No search box yet; and my Resource column is showing the actual HTML code instead of displaying as HTML.
In the next line of code, I add a search box to the table and little arrow icons showing that the columns are sortable. Next is how I tell reactable to display the Resource column as HTML. The syntax is columns equals a list, and then colDef sets the attributes of one or more columns. I’m setting html equals true for the Resource column so it displays as HTML, and I’m also making that column resizable. In the final code group, I tell reactable not to display the Comments column in the main table. So far so good; next is adding the expandable rows.
So this is not the most intuitive R code you’ll ever see. I don’t find all of it particularly easy to understand, actually. I didn’t come up with it myself; reactable creator Greg Lin wrote it. But it works!
Will I remember this code the next time I want to make a table with expandable rows? No, no I will not. But here’s the thing: If I make an RStudio code snippet, I don’t have to remember it. It will always be just a couple of keystrokes away.
If you’re not familiar with RStudio code snippets at all, check out the Do More With R episode link on screen for a full explainer. But let me show you the basics.
This is the code for my table. Next, I’ve cleaned it up a little to remove the blank lines and comments, highlight the variables for my data frame and column names, and change the column definition from dollar sign notation to bracket notation (which works a lot better in snippets). Also – very important – I added a snippet title and indented every line of code with a starting tab. That’s a must! Finally, I changed each variable name to a generic snippet variable: 1 for the data frame, 2 for the column I want to display as HTML, and 3 for the expandable-row column. Note the variable syntax: dollar sign, open brace,, number, colon, variable name, close brace. These variables will make it easy for me to fill in actual variable names back in RStudio.
This is what the code snippet gives me. I’ll type the name of my data frame, nicar, and hit tab. Next is the html column. Finally, the Comments column which is the one I want to expand. Now if I run this code, I get my table. Let me show you what the snippet looks like in my RStudio snippets file.
You can get this snippet to copy and paste into your own RStudio at the InfoWorld article accompanying this video.
That’s it for this episode, thanks for watching! For more R tips, head to the Do More With R page at bit-dot-l-y slash do more with R, all lowercase except for the R. You can also find the Do More With R playlist on the YouTube IDG Tech Talk channel — where you can subscribe so you never miss an episode. Hope to see you next time. Stay healthy and safe, everyone!