<p><div><div><div><div data-show-faces="false" data-height="21" data-width="100" data-layout="button_count" data-send="true" data-href="https://www.r-bloggers.com/creating-interactive-svg-tables-in-r/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://moderndata.plot.ly/creating-interactive-svg-tables-in-r/"> R – Modern Data</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>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. <code>v 4.7.1.9</code> from Github using <code>devtools::install_github(&quot;ropensci/plotly)</code></p>
<p>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:</p>
<pre>#library(devtools)
#install_github(&quot;ropensci/plotly&quot;)

library(plotly)

p &lt;- 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'),
    font = 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'),
    font = 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</pre>
<p><img src="https://i1.wp.com/i.imgur.com/wxicyt5.png?w=456&ssl=1" data-recalc-dims="1" height="1200"> </p>
<p>We can also write a helper function to create these tables using dataframes.</p>
<pre>library(plotly)

createTable &lt;- function(df, tableHeight = 50){
  
  # Create the value parameters
  # Headers
  nms &lt;- lapply(names(df), function(x){
    return(paste0(&quot;<b>&quot;, x, &quot;</b>&quot;))    
  })
  
  nms &lt;- append(nms, &quot;<b>Rows</b>&quot;, after = 0)
  headerValues &lt;- lapply(nms, function(x){return(list(x))})
  
  # Cell values
  names(df) &lt;- NULL
  cellValues &lt;- apply(df, 2, function(x){return(list(x))})
  cellValues &lt;- lapply(cellValues, function(x){return(unlist(x))})
  
  cellValues &lt;- append(cellValues, list(rownames(df)), after = 0)
  
  # Create the list to pass to plot_ly()
  header &lt;- list(
    values = headerValues, 
    
    # Formatting 
    line = list(color = '#DFE8F3'),
    align = c('left', rep('center', ncol(df))),
    font = list(color = '#ffffff', size = 16),
    fill = list(color = '#999999')
  )
  
  cells &lt;- list(
    values = cellValues,
    
    # Formatting
    line = list(color = '#DFE8F3'),
    align = c('left', rep('right', ncol(df))),
    font = list(color = c('#262626'), size = 14),
    fill = list(color = c(&quot;#d9d9d9&quot;, rep(&quot;#ffe6cc&quot;, ncol(df)))),
    height = tableHeight
  )
  
  # Create table in plotly
  p &lt;- plot_ly(
    type = &quot;table&quot;,
    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 &lt;- createTable(mtcars)
p</pre>

<p><img src="https://i.imgur.com/DNpR5Mh.png" height="1600"></p>
<p><b>Note</b> that columns can easily rearranged by dragging them around. You can find more information on individual attributes <a href="https://github.com/plotly/plotly.js/blob/master/src/traces/table/attributes.js"> here </a><br>
Hope this post was useful – happy table making !</p>
	<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="https://moderndata.plot.ly/creating-interactive-svg-tables-in-r/"> R – Modern Data</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a rel="nofollow" href="https://www.r-project.org/" title="The R Project for Statistical Computing">R</a> news and <a rel="nofollow" href="https://www.r-bloggers.com/search/tutorial" title="R tutorials">tutorials</a> on topics such as: <a rel="nofollow" href="https://www.r-bloggers.com/search/data%20science" title="Data science">Data science</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data" title="Big Data">Big Data, <a rel="nofollow" href="https://www.r-users.com/" title="R jobs">R jobs</a>, visualization (<a rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2" title="ggplot and ggplot2 tutorials">ggplot2</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/boxplot" title="Boxplots using lattice and ggplot2 tutorials">Boxplots</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/map" title="Maps and gis">maps</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/animation" title="Animation in R">animation</a>), programming (<a rel="nofollow" href="https://www.r-bloggers.com/search/RStudio" title="RStudio IDE for R">RStudio</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/sweave" title="Sweave and literate programming">Sweave</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX" title="LaTeX in R">LaTeX</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/SQL" title="SQL and databases">SQL</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/eclipse" title="Eclipse IDE for R">Eclipse</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/git" title="git and github, Version Control System">git</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/hadoop" title="Large data in R using Hadoop">hadoop</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping" title="Web Scraping of google, facebook, yahoo, twitter and more using R">Web Scraping</a>) statistics (<a rel="nofollow" href="https://www.r-bloggers.com/search/regression" title="Regressions and ANOVA analysis tutorials">regression</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/PCA" title="principal component analysis tutorial">PCA</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/time+series" title="Time series">time series</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/trading" title="finance trading">trading</a>) and more...
<img width="1" alt="" src="http://feeds.feedburner.com/~r/RBloggers/~4/gjuKqj4-gUc" height="1"></a></div>