Packages

For this post, we need to load the following library:

# install it if never done it before
#install.packages("DT")

library(DT)

HTML in the DT package

The DT package in R integrates the DataTables JavaScript library to create interactive tables in R markdown documents or Shiny web applications. It means that we basically can have HTML content in our cells and make DT interpret it (or not!) for rendering.

For more info about this, check out the dedicated section.

Custom text styling

HTML can super easily highlight specific part of a text: the  or  tags make text bold, the  or  tags italicize text to convey emphasis, while the style attribute is used to apply colors and underline text. The  tag can also specifically underline text.

# text formatting
col = c('<b>Bold</b>',
              '<em>Emphasize</em>',
              '<u>Underline</u>',
              '<p style="color:red;">Red</p>')
df = data.frame(col = col)

table = datatable(df,
                  escape=FALSE) # allows text cell interpreted as HTML

# save widget
library(htmltools)
saveWidget(table, file="HtmlWidget/dt-html-1.html")

Links and messages

The DT package can include links that trigger JavaScript alerts, link to external websites, or ask for user confirmation before proceeding. Try clicking on the cell below to see what they do!

# links and messages
col = c('<a href="#" onclick="alert(\'R Graph Gallery post about the DT package\');">Click there</a>',
        '<a href="https://r-graph-gallery.com/package/dt.html">Click here</a>',
        '<a href="#" onclick="if(confirm(\'Learn the DT package?\')) alert(\'Confirmed\');" title="Confirm before proceeding">Confirmation?</a>',
        '<a href="#" onclick="alert(\'You clicked on more resources!\');" title="Click for resources">More resources</a>')
df = data.frame(col = col)

table = datatable(df,
                  escape=FALSE) # allows text cell interpreted as HTML

# save widget
library(htmltools)
saveWidget(table, file="HtmlWidget/dt-html-2.html")

Images

The color and background argument can also takes a vector of colors:

col = c('<img src="https://r-graph-gallery.com/img/logo/R_single_medium.png" width="100" height="100">', # changed dimensions
        '<img src="https://r-graph-gallery.com/img/logo/R_single_medium.png" style="transform: rotate(90deg);" width="100" height="100">', # rotated
        '<img src="https://r-graph-gallery.com/img/logo/R_single_medium.png" style="border: 5px solid black;" width="100" height="100">', # added border
        '<img src="https://r-graph-gallery.com/img/logo/R_single_medium.png" style="transform: rotate(90deg); border: 5px solid black;" width="200" height="100">') # combined
df = data.frame(col = col)

table = datatable(df,
                  escape=FALSE) # allows text cell interpreted as HTML

# save widget
library(htmltools)
saveWidget(table, file="HtmlWidget/dt-html-3.html")

All in once

Here’s what the output looks like when we put all together the features we’ve seen before:

# images
col1 = c('<img src="https://r-graph-gallery.com/img/logo/R_single_medium.png" width="100" height="100">', # changed dimensions
              '<img src="https://r-graph-gallery.com/img/logo/R_single_medium.png" style="transform: rotate(90deg);" width="100" height="100">', # rotated
              '<img src="https://r-graph-gallery.com/img/logo/R_single_medium.png" style="border: 5px solid black;" width="100" height="100">', # added border
              '<img src="https://r-graph-gallery.com/img/logo/R_single_medium.png" style="transform: rotate(90deg); border: 5px solid black;" width="120" height="80">') # combined

# links and messages
col2 = c('<a href="#" onclick="alert(\'R Graph Gallery post about the DT package\');">Click there</a>',
        '<a href="https://r-graph-gallery.com/package/dt.html">Click here</a>',
        '<a href="#" onclick="if(confirm(\'Learn the DT package?\')) alert(\'Confirmed\');" title="Confirm before proceeding">Confirmation?</a>',
        '<a href="#" onclick="alert(\'You clicked on more resources!\');" title="Click for resources">More resources</a>')

# text formatting
col3 = c('<b>Bold</b>',
              '<em>Emphasize</em>',
              '<u>Underline</u>',
              '<p style="color:red;">Red</p>')

df = data.frame(col1 = col1,
                col2 = col2,
                col3 = col3)

table = datatable(df,
                  escape=FALSE) # allows text cell interpreted as HTML

# save widget
library(htmltools)
saveWidget(table, file="HtmlWidget/dt-html-4.html")

Conclusion

This post explained how to add HTML content in DT table cells, such images, links or JavaScript trigger. For more of this package, see the dedicated section or the table section.

Related chart types

Barplot

Spider / Radar

Wordcloud

Parallel

Lollipop

Circular Barplot

Contact

This document is a work by Yan Holtz. Any feedback is highly encouraged. You can fill an issue on Github, drop me a message on Twitter, or send an email pasting yan.holtz.data with gmail.com.

Github Twitter