This is the first in a series of posts that describes small enhancements that you can add to your R Markdown documents and dashboards to give them a more “interactive feel” while not relying on Shiny for that interactivity. All of the interactions I will describe are executed on the client-side and can be implemented with a static, self-contained HTML file. This is a nice feature because it means you can host your documents using a simple static webhost like GitHub Pages or Netlify. Additionally if you don’t have access to an internal Shiny server at work (like me!) you can email these files around as attachments.
I’m not sure how many posts there will be in the series, but since I’ve recently been creating a number of these dashboard and sites at work, I hope to document many of the tips and tricks I’m learning along the way.
Here are the other posts in the series:
In this post, I’m going to use data from the gapminder package, so if you don’t have it installed:
Tip 1: Use SearchPanes to select rows in a DataTable
If you want to do filtering or row selection, the standard DataTables search box is not very flexible. A new option is the SearchPanes extension that was added to DataTables in early 2020 and quickly implemented in DT as well. It is very well documented on the DataTables website.
The basic usage of SearchPanes allows you to filter multiple columns using multi-select (hold down SHIFT!) for each column. To get started, just add the
SearchPanes as extensions when you create a DataTable. You also need to insert
P as a
dom option to display the panes. Here’s a minimal example using gapminder data:
library(DT) library(gapminder) gapminder %>% datatable( extensions = c("SearchPanes", "Select"), options = list(dom = "Ptip") )
Another nice feature of SearchPanes is that it shows you the number of rows in each category. For example, at a quick glance we can see there are 12 rows for each country and 624 of the rows are African countries.
Depending on the layout of your final table and document, you may find the search pane taking up too much valuable real estate. A good way to use the SearchPanes feature in a smaller footprint is to hide the pane in a button. Buttons is another extension for DataTables that is supported by DT.
In order to create a button for the search pane, add
extensions, set the buttons options to use
searchPanes (note the camelCase here!), and replace
B in the
gapminder %>% datatable( extensions = c("SearchPanes", "Select", "Buttons"), options = list( dom = "Btip", buttons = list("searchPanes") ) )
Now, the search pane pops open when you click the button.
There is a ton more customization that is possible using the new SearchPanes extension, including modifying the layout, creating custom filtering functions, and more. But a few simple modifications I’ll demonstrate are: 1) choosing which columns to search, 2) removing the SearchPane controls, and 3) changing the text of the SearchPanes button.
To limit which columns are active for searching, add
searchPanes = list(show = FALSE), targets = 3:5)to
columnDefs. This hides columns 3, 4, and 5, and only displays search panes for the first 3 columns (JS uses 0-based indexing!). The SearchPanes default is to included all columns.
For a simple table, you might not need all of the SearchPanes controls, which allow for sorting and searching within the search pane. To remove the controls, add
list(searchPanes = list(controls = FALSE), targets = 0:2)to the columnDefs option. We need to set this option for the indices of the columns we’ve chosen to add SearchPanes to.1
- “SearchPanes” isn’t such a great label for the button. Let’s call it “Filter Rows” instead, by setting
language = list(searchPanes = list(collapse = "Filter Rows")).2
While we’re tidying things up, let’s set better column names, format the numeric variables, get rid of the row numbers, center all the columns, and replace the pagination with a the Scroller extension.
gapminder %>% datatable( rownames = FALSE, colnames = c("Country", "Continent", "Year", "Life Exp", "Population", "GDP per capita"), extensions = c("SearchPanes", "Select", "Buttons", "Scroller"), options = list( dom = "Btip", buttons = list("searchPanes"), language = list(searchPanes = list(collapse = "Filter Rows")), scrollY = 390, scroller = TRUE, columnDefs = list( list(searchPanes = list(show = FALSE), targets = 3:5), list(searchPanes = list(controls = FALSE), targets = 0:2), list(className = "dt-center", targets = 0:5) ) ) ) %>% formatRound(4, 1) %>% formatRound(5, 0) %>% formatCurrency(6, digits = 0)
And there you have it, a nice table that makes it easy to view gapminder data from Oceania in 1972 and 1977!