{"id":391166,"date":"2025-03-13T17:59:00","date_gmt":"2025-03-13T23:59:00","guid":{"rendered":"https:\/\/www.jumpingrivers.com\/blog\/sparkline-reactable\/"},"modified":"2025-03-13T17:59:00","modified_gmt":"2025-03-13T23:59:00","slug":"sparklines-in-reactable-tables","status":"publish","type":"post","link":"https:\/\/www.r-bloggers.com\/2025\/03\/sparklines-in-reactable-tables\/","title":{"rendered":"Sparklines in Reactable Tables"},"content":{"rendered":"<!-- \r\n<div style=\"min-height: 30px;\">\r\n[social4i size=\"small\" align=\"align-left\"]\r\n<\/div>\r\n-->\r\n\r\n<div style=\"border: 1px solid; background: none repeat scroll 0 0 #EDEDED; margin: 1px; font-size: 12px;\">\r\n[This article was first published on  <strong><a href=\"https:\/\/www.jumpingrivers.com\/blog\/sparkline-reactable\/\"> The Jumping Rivers Blog<\/a><\/strong>, and kindly contributed to <a href=\"https:\/\/www.r-bloggers.com\/\" rel=\"nofollow\">R-bloggers<\/a>].  (You can report issue about the content on this page <a href=\"https:\/\/www.r-bloggers.com\/contact-us\/\">here<\/a>)\r\n<hr>Want to share your content on R-bloggers?<a href=\"https:\/\/www.r-bloggers.com\/add-your-blog\/\" rel=\"nofollow\"> click here<\/a> if you have a blog, or <a href=\"http:\/\/r-posts.com\/\" rel=\"nofollow\"> here<\/a> if you don't.\r\n<\/div>\n\n<p>\n<a href = \"https:\/\/www.jumpingrivers.com\/blog\/sparkline-reactable\/\">\n<img src=\"https:\/\/i2.wp.com\/www.jumpingrivers.com\/blog\/sparkline-reactable\/header.png?w=400&#038;ssl=1\" style=\"width:400px\" class=\"image-center\" style=\"display: block; margin: auto;\" data-recalc-dims=\"1\" \/>\n<\/a>\n<\/p>\n<p>This is the second blog in a series about the {sparkline} R package for\ninline data visualisations. You can read the first one\n<a href=\"https:\/\/www.jumpingrivers.com\/blog\/sparkline\/\" rel=\"nofollow\" target=\"_blank\">here<\/a>. In this post I\nwill be demonstrating how you can include sparklines inside HTML tables.<\/p>\n<h2 id=\"reactable\">Reactable<\/h2>\n<p>{reactable} is an R package for producing HTML tables, commonly used in\nShiny.<\/p>\n<p>To create a HTML <a href=\"https:\/\/glin.github.io\/reactable\/\" rel=\"nofollow\" target=\"_blank\">reactable<\/a> table\nall we need to do is input a data.frame object to the <code>reactable<\/code>\nfunction. These tables have a nice simple default look however we can\nalso add our own styles very easily. In our first example of a table I\nam just using the in built R <code>iris<\/code> dataset.<\/p>\n<pre>library(reactable)\n\nreactable(iris)\n<\/pre><iframe title=\"My embedded document\" width=\"450\" height=\"510\" src=\"https:\/\/www.jumpingrivers.com\/misc\/reactable-sparkline\/html_files\/reactable-table.html\" alt=\"reactable table displaying iris data\" frameBorder=\"0\"><\/iframe>\n<p>A few things that can be easily added to reactable tables are filters,\nsortable columns, searchable columns, default page size, borders and\nstriped &#038; text wrapping. Along with these arguments we can of course\nimplement our own styling with CSS.<\/p>\n<pre>reactable(\n iris,\n striped = TRUE, searchable = TRUE,\n filterable = TRUE, bordered = TRUE,\n defaultPageSize = 8\n)\n<\/pre><iframe title=\"My embedded document\" width=\"450\" height=\"510\" src=\"https:\/\/www.jumpingrivers.com\/misc\/reactable-sparkline\/html_files\/reactable-styled-table.html\" alt=\"styled reactable table displaying iris data\" frameBorder=\"0\"><\/iframe>\n<h2 id=\"sparklines-in-reactable-tables\">Sparklines in Reactable Tables<\/h2>\n<aside class=\"advert\">\n<p>\nData comes in all shapes and sizes. It can often be difficult to know where to start. Whatever your problem, <a href=\"https:\/\/www.jumpingrivers.com\/consultancy\/data-science-machine-learning\/?utm_source=blog&#038;utm_medium=banner&#038;utm_campaign=2025-reactable-sparkline\" rel=\"nofollow\" target=\"_blank\">Jumping Rivers can help<\/a>.\n<\/p>\n<\/aside>\n<h3 id=\"box-line-and-bar-charts\">Box, Line and Bar Charts<\/h3>\n<p>When it comes to embedding sparklines in reactable tables we need to add\na new column to our table, which we will then overwrite in the <code>columns<\/code>\nargument of <code>reactable<\/code>.<\/p>\n<p>In the first example I am using a mock dataset with 3 observations \u2018x\u2019,\n\u2018y\u2019 and \u2018z\u2019, each one is just a list containing 10 values generated by\n<code>rnorm<\/code>. Then I am using dplyr\u2019s <code>mutate<\/code> function to add a column full\nof NA values.<\/p>\n<p>Now on the reactable side, I am again using the <code>reactable<\/code> function,\nwhere I use the <code>columns<\/code> argument which takes a \u201cNamed list of column\ndefinitions\u201d. For each different sparkline I will need to use <code>colDef<\/code>\nto add a function which takes a value and index argument. I then use the\nsparkline function and pass <code>data$values[[index]]<\/code> along with the <code>type<\/code>\nto determine which chart I\u2019d like. You can set a column preferences in\n<code>colDef<\/code>, I have used it here to hide the <code>values<\/code> column.<\/p>\n<pre>library(sparkline)\nlibrary(dplyr)\n\ndata = tibble(\n names = c(&quot;x&quot;, &quot;y&quot;, &quot;z&quot;),\n values = c(list(rnorm(10)), list(rnorm(10)), list(rnorm(10)))\n ) |&gt;\n mutate(box = NA,\n line = NA,\n bar = NA)\n\ntable = reactable(data,\n columns = list(\n values = colDef(show = FALSE),\n box = colDef(cell = function(value, index) {\n sparkline(data$values[[index]], type = &quot;box&quot;)\n }),\n line = colDef(cell = function(value, index) {\n sparkline(data$values[[index]], type = &quot;line&quot;)\n }),\n bar = colDef(cell = function(value, index) {\n sparkline(data$values[[index]], type = &quot;bar&quot;)\n })\n )\n )\n<\/pre><iframe title=\"My embedded document\" width=\"450\" height=\"230\" src=\"https:\/\/www.jumpingrivers.com\/misc\/reactable-sparkline\/html_files\/table1.html\" alt=\"reactable table displaying sparkline boxplots and line &#038; bar charts\" frameBorder=\"0\"><\/iframe>\n<h3 id=\"bullet-chart\">Bullet Chart<\/h3>\n<p>In our final example, I am again using the <code>iris<\/code> data but this time I\u2019m\ncreating a summary for each species containing the mean and\ninter-quartile range (IQR) of the Sepal.Length column. These values will\nbe used to create a <a href=\"https:\/\/www.storytellingwithdata.com\/blog\/what-is-a-bullet-graph\" rel=\"nofollow\" target=\"_blank\">bullet\ngraph<\/a>.\nIn a bullet graph, an observed value (the \u2018performance\u2019) is compared\nagainst a target value, and an illustration of the data-spread (here the\nIQR) are presented. In a given row of the figure, the value of\nSepal.Width for a specific iris will be presented as the performance;\nthe target that this is compared against is the mean for the relevant\nspecies, lower IQR will be the range1 and higher IQR will be range2.<\/p>\n<p>Then when creating our reactable table it is slightly different to our\nprevious example (where I just pass a list of values to the sparkline\nfunction), for a bullet graph I will need to pass in a vector in the\nform <code>c(target, performance, range1, range2)<\/code>. I can then access the\nvalues via <code>d$<\/code> (or another form of extraction) and specify which row I\nneed with <code>[[index]]<\/code>.<\/p>\n<pre>d = iris |&gt;\n group_by(.data$Species) |&gt;\n mutate(mean = mean(.data$Sepal.Length),\n lower_range = range(.data$Sepal.Length)[1],\n upper_range = range(.data$Sepal.Length)[2],\n bullet = NA)\n\niris_table = reactable(d, defaultColDef = colDef(show = FALSE),\n columns = list(\n Species = colDef(show = TRUE),\n Sepal.Length = colDef(show = TRUE),\n bullet = colDef(cell = function(value, index) {\n sparkline(c(d$mean[[index]],\n d$Sepal.Length[[index]],\n d$upper_range[[index]],\n d$lower_range[[index]]), type = &quot;bullet&quot;)\n }, show = TRUE)\n ))\n<\/pre><iframe title=\"My embedded document\" width=\"450\" height=\"510\" src=\"https:\/\/www.jumpingrivers.com\/misc\/reactable-sparkline\/html_files\/table2.html\" alt=\"reactable table displaying iris data and sparkline bullet chart\" frameBorder=\"0\"><\/iframe>\n<p>In this blog we have implemented box-plots, bar, line and bullet graphs\ninto reactable tables. Other options can be found on the <a href=\"https:\/\/omnipotent.net\/jquery.sparkline\/#s-about\" rel=\"nofollow\" target=\"_blank\">jQuery\nSparklines website<\/a> or\nin the previous blog. Stay tuned for the next blog in this series on\nusing sparkline reactable tables in Shiny apps.<\/p>\n<p>\nFor updates and revisions to this article, see the <a href = \"https:\/\/www.jumpingrivers.com\/blog\/sparkline-reactable\/\">original post<\/a>\n<\/p>\n<div style=\"border: 1px solid; background: none repeat scroll 0 0 #EDEDED; margin: 1px; font-size: 13px;\">\r\n<div style=\"text-align: center;\">To <strong>leave a comment<\/strong> for the author, please follow the link and comment on their blog: <strong><a href=\"https:\/\/www.jumpingrivers.com\/blog\/sparkline-reactable\/\"> The Jumping Rivers Blog<\/a><\/strong>.<\/div>\r\n<hr \/>\r\n<a href=\"https:\/\/www.r-bloggers.com\/\" rel=\"nofollow\">R-bloggers.com<\/a> offers <strong><a href=\"https:\/\/feedburner.google.com\/fb\/a\/mailverify?uri=RBloggers\" rel=\"nofollow\">daily e-mail updates<\/a><\/strong> about <a title=\"The R Project for Statistical Computing\" href=\"https:\/\/www.r-project.org\/\" rel=\"nofollow\">R<\/a> news and tutorials about <a title=\"R tutorials\" href=\"https:\/\/www.r-bloggers.com\/how-to-learn-r-2\/\" rel=\"nofollow\">learning R<\/a> and many other topics. <a title=\"Data science jobs\" href=\"https:\/\/www.r-users.com\/\" rel=\"nofollow\">Click here if you're looking to post or find an R\/data-science job<\/a>.\r\n\r\n<hr>Want to share your content on R-bloggers?<a href=\"https:\/\/www.r-bloggers.com\/add-your-blog\/\" rel=\"nofollow\"> click here<\/a> if you have a blog, or <a href=\"http:\/\/r-posts.com\/\" rel=\"nofollow\"> here<\/a> if you don't.\r\n<\/div>","protected":false},"excerpt":{"rendered":"<div style = \"width:60%; display: inline-block; float:left; \">\n<p>This is the second blog in a series about the {sparkline} R package for<br \/>\ninline data visualisations. You can read the first one<br \/>\nhere. In this post I<br \/>\nwill be demonstrating how you can include sparklines inside HTML tables.<br \/>\nReactable<br \/>\n{reactable} is &#8230;<\/p><\/div>\n<div style = \"width: 40%; display: inline-block; float:right;\"><\/div>\n<div style=\"clear: both;\"><\/div>\n","protected":false},"author":2615,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"aioseo_notices":[],"jetpack-related-posts":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/posts\/391166"}],"collection":[{"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/users\/2615"}],"replies":[{"embeddable":true,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/comments?post=391166"}],"version-history":[{"count":2,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/posts\/391166\/revisions"}],"predecessor-version":[{"id":400565,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/posts\/391166\/revisions\/400565"}],"wp:attachment":[{"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/media?parent=391166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/categories?post=391166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.r-bloggers.com\/wp-json\/wp\/v2\/tags?post=391166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}