Packages II

Interactive tables with DT

Start with a new file: intro-shiny/babynames/04-packages-02/app-baby-04.R

Allow users to sort or filter your tables without having to expand the UI. Simply use packages such as DT or Reactable to present data frames as interactive tables.

DT

DT stands for DataTables (not to be confused with the wrangling/processing package data.table). Like, Plotly, DT is part of the htmlwidgets family. Developers have taken the JavaScript version of DT and bound it with R. We don’t have to learn JS in order to experience its benefits!

# Load package
library(DT)

Change the output and render function names.

# UI

# in lieu of tableOutput(), use DT's version
tbl_disp <- DTOutput("main_table")

# Server

  # in lieu of renderTable(), use DT's version
  output$main_table <- renderDT({
    filtered_df()
  })

Options

DT offers options to customize the appearance of your table without manipulating the data itself.

# Server

  output$main_table <- renderDT({
    df <- filtered_df()
    
    # customize the appearance of the DT
    datatable(df,
              rownames = FALSE,
              colnames = str_to_title(str_replace_all(colnames(df), "_", " ")),
              options = list(pageLength = 20,
                             lengthMenu = c(20, 60, 100),
                             dom = 'ltipr' # default is 'lftipr', exclude f to remove search bar 
                             ),
              filter = 'top'
              )
   
  })

By default DT includes some table control elements such as page length, pagination, and the filter (search) bar. Toggle these elements with the dom keyword argument. The dom options and their definitions can be found here: https://datatables.net/reference/option/dom

Hide Columns

# Server

  output$main_table <- renderDT({
    
    # remove the last three columns
    df <- filtered_df()[, 1:(ncol(df)-3)]
    
    datatable(df,
              rownames = FALSE,
              colnames = str_to_title(str_replace_all(colnames(df), "_", " ")),
              options = list(pageLength = 20,
                             lengthMenu = c(20, 60, 100),
                             dom = 'ltipr' # default is 'lftipr', exclude f to remove search bar 
                             ),
              filter = 'top'
              )
   
  })

In the previous example, to remove the last three columns from the table we manipulated the data frame itself. In lieu of altering the data, it’s possible to use DT to simply hide the columns by using the columnDefs argument within options. There are, however, several quirks to know!

1. The targets argument require a numeric vector. Column names don’t work.
2. The first column in the DT is 0 not 1.

# hiding the last 3 columns in an 8 column table.
datatable(...,
          options = list(columnDefs = list(list(visible = FALSE, targets = c(5, 6, 7))))
          )

Format & Styling

Format and style the table with some helper functions. Without manipulating the data itself, table columns can be displayed as currency, percentages, round numbers, or dates.

• formatCurrency()
• formatPercentage()
• formatRound()
• formatDate()

Additionally, styles can also be applied to table cells with a few helping functions:

• styleInterval(): style for intervals of data.
• styleColorBar(): displaying a color bar in the cell. Its size is relative to the share of the largest value in the column.
• styleEqual(): style based on unique values.

# Server

   output$main_table <- renderDT({
    
    # remove last three columns
    df <- filtered_df()[, 1:(ncol(df)-3)]
    
    # customize the appearance of the DT
    datatable(df,
              rownames = FALSE,
              colnames = str_to_title(str_replace_all(colnames(df), "_", " ")),
              options = list(pageLength = 20,
                             lengthMenu = c(20, 60, 100),
                             dom = 'ltipr' # default is 'lftipr'
                             ),
              filter = 'top'
              ) %>%
      
      # conditional styling of cell text
      formatStyle('name',
                  'sex',
                  color = styleEqual(unique(df$sex), c('dodgerblue', 'orange'))
      ) %>% 
      
      # add a color bar to a numeric column.
      formatStyle('count',
                  background = styleColorBar(df$count, 'rgba(0, 128, 255, .2)'),
                  backgroundSize = '100% 90%',
                  backgroundRepeat = 'no-repeat',
                  backgroundPosition = 'center'
                  )
    
  })

Keyword arguments in formatStyle() are simply CSS properties. Properties are written in camel case (backgroundSize) instead of kebab case (background-size).

Reactable

Reactable is a more recent interactive data table package. It is similar to DT but also includes additional features such as:

• embedding htmlwidgets (e.g. sparklines, boxplots, etc.) within cells.
• other custom rendering
• custom grouping and aggregation
• expandable row details