Creating interactive SVG tables in R

In this post we will explore how to make SVG tables in R using plotly. The tables are visually appealing and can be modified on the fly using simple drag and drop. Make sure you install the latest version of Plotly i.e. v 4.7.1.9 from Github using devtools::install_github("ropensci/plotly)

The easiest way to create a SVG table in R using plotly is by manually specifying headers and individual cell values. The following code snippet highlights this:

#library(devtools)
#install_github("ropensci/plotly")

library(plotly)

p <- plot_ly(
  type = 'table',  # Specify type of plot as table
  
  # header is a list and every parameter shown below needs 
  # to be specified. Note that html tags can be used as well
  
  header = list(
    
    # First specify table headers
    # Note the enclosure within 'list'
    
    values = list(list('<b>EXPENSES</b>'),
                  list('<b>Q1</b>'),
                  list('<b>Q2</b>'), 
                  list('<b>Q3</b>'), 
                  list('<b>Q4</b>')),
    
    # Formatting 
    line = list(color = '#DFE8F3'),
    align = c('left','left','left','left','left'),
     = list(color = c('#506784', '#506784', '#506784', '#506784', '#ab63fa'), size = 14)
  ),
  
  # Specify individual cells
  
  cells = list(
    
    # Now specify each cell content
    
    values = list(
      c('Salaries', 'Office', 'Merchandise', 'Legal', '<b>TOTAL</b>'),
      c(1200000, 20000, 80000, 2000, 12120000),
      c(1300000, 20000, 70000, 2000, 130902000),
      c(1300000, 20000, 120000, 2000, 131222000),
      c(1400000, 20000, 90000, 2000, 14102000)),
    
    # Formatting
    line = list(color = '#DFE8F3'),
    align = c('left', 'left', 'left', 'left', 'left'),
     = list(color = c('#506784', '#506784', '#506784', '#506784', '#ab63fa'), size = 14),
    height = 48
    )) %>% 
  
  # Layout is needed to remove gridlines, axis zero lines and ticktext 
  # or else they will also show up
  
  layout(xaxis = list(zeroline = F, showgrid = F, showticklabels = F, domain = c(0, 0.5)),
         yaxis = list(zeroline = F, showgrid = F, showticklabels = F))

p

We can also write a helper function to create these tables using dataframes.

library(plotly)

createTable <- function(df, tableHeight = 50){
  
  # Create the value parameters
  # Headers
  nms <- lapply(names(df), function(x){
    return(paste0("<b>", x, "</b>"))    
  })
  
  nms <- append(nms, "<b>Rows</b>", after = 0)
  headerValues <- lapply(nms, function(x){return(list(x))})
  
  # Cell values
  names(df) <- NULL
  cellValues <- apply(df, 2, function(x){return(list(x))})
  cellValues <- lapply(cellValues, function(x){return(unlist(x))})
  
  cellValues <- append(cellValues, list(rownames(df)), after = 0)
  
  # Create the list to pass to plot_ly()
  header <- list(
    values = headerValues, 
    
    # Formatting 
    line = list(color = '#DFE8F3'),
    align = c('left', rep('center', ncol(df))),
     = list(color = '#ffffff', size = 16),
    fill = list(color = '#999999')
  )
  
  cells <- list(
    values = cellValues,
    
    # Formatting
    line = list(color = '#DFE8F3'),
    align = c('left', rep('right', ncol(df))),
     = list(color = c('#262626'), size = 14),
    fill = list(color = c("#d9d9d9", rep("#ffe6cc", ncol(df)))),
    height = tableHeight
  )
  
  # Create table in plotly
  p <- plot_ly(
    type = "table",
    header = header,
    cells = cells,
    width = 1200, 
    height = 1600) %>% 
    
    layout(xaxis = list(zeroline = F, showgrid = F, showticklabels = F),
           yaxis = list(zeroline = F, showgrid = F, showticklabels = F))
  
  return(p)
}

p <- createTable(mtcars)
p

Note that columns can easily rearranged by dragging them around. You can find more information on individual attributes here
Hope this post was useful – happy table making !