DT has provided a few helper functions to make it convenient to tweak the table without writing a lot of HTML or JavaScript code.


1 Format Columns

You can use the functions format*() to format the table columns as currency, percentages, or round numbers. Here are some examples:

library(DT)
m = cbind(matrix(rnorm(60, 1e5, 1e6), 20), runif(20), rnorm(20, 100))
m[, 1:3] = round(m[, 1:3])
m[, 4:5] = round(m[, 4:5], 7)
colnames(m) = head(LETTERS, ncol(m))
head(m)
##            A        B        C         D         E
## [1,] -460476  -967824  -594707 0.6478935  99.50897
## [2,] -130177  -117975  -107917 0.3198206  97.69083
## [3,] 1658708  -926004 -1165396 0.3077200 101.00574
## [4,]  170508  -628891  2268956 0.2197676  99.29080
## [5,]  229288  -525039  1307962 0.3694889  99.31199
## [6,] 1815065 -1586693 -1023109 0.9842192 101.02557
# format the columns A and C as currency, and D as percentages
datatable(m) %>% formatCurrency(c('A', 'C')) %>% formatPercentage('D', 2)
# the first two columns are Euro currency, and round column E to 3 decimal places
datatable(m) %>% formatCurrency(1:2, '\U20AC', digits = 0) %>% formatRound('E', 3)

Under the hood, these formatting functions are just wrappers for the rowCallback option to generate the appropriate JavaScript code.

Similarly, there is a formatDate() function that can be used to format date/time columns. It has a method argument that takes values from a list of possible conversion methods: toDateString, toISOString, toLocaleDateString, toLocaleString, toLocaleTimeString, toString, toTimeString, toUTCString.

x = strptime('2015-07-23 22:05:21', '%Y-%m-%d %H:%M:%S', tz = 'EST')
(x = x + seq(1, 1e6, length.out = 10))
##  [1] "2015-07-23 22:05:22 EST" "2015-07-25 04:57:13 EST"
##  [3] "2015-07-26 11:49:04 EST" "2015-07-27 18:40:55 EST"
##  [5] "2015-07-29 01:32:46 EST" "2015-07-30 08:24:37 EST"
##  [7] "2015-07-31 15:16:28 EST" "2015-08-01 22:08:19 EST"
##  [9] "2015-08-03 05:00:10 EST" "2015-08-04 11:52:01 EST"
DT:::DateMethods
## [1] "toDateString"       "toISOString"        "toLocaleDateString"
## [4] "toLocaleString"     "toLocaleTimeString" "toString"          
## [7] "toTimeString"       "toUTCString"
# use m = DT:::DateMethods below to see the output of all methods
m = c('toDateString', 'toLocaleDateString', 'toLocaleString', 'toUTCString')
d = as.data.frame(setNames(lapply(m, function(.) x), m))
str(d)
## 'data.frame':    10 obs. of  4 variables:
##  $ toDateString      : POSIXct, format: "2015-07-23 22:05:22" "2015-07-25 04:57:13" ...
##  $ toLocaleDateString: POSIXct, format: "2015-07-23 22:05:22" "2015-07-25 04:57:13" ...
##  $ toLocaleString    : POSIXct, format: "2015-07-23 22:05:22" "2015-07-25 04:57:13" ...
##  $ toUTCString       : POSIXct, format: "2015-07-23 22:05:22" "2015-07-25 04:57:13" ...
datatable(d, options = list(pageLength = 5, dom = 'tip')) %>%
  formatDate(1:ncol(d), m)

Please note that these conversion methods may be dependent on your system locale and web browser. The same method may lead to different output in different web browsers and system languages.

2 Style Table Cells

You can apply CSS styles to the table cells in a column according to the values of the cells using the function formatStyle(). We have picked a few commonly used CSS properties as the arguments of formatStyle(), such as color and fontWeight. You can pass arbitrary CSS properties to formatStyle(). Here is a quick example to show the syntax:

datatable(iris, options = list(pageLength = 5)) %>%
  formatStyle('Sepal.Length',  color = 'red', backgroundColor = 'orange', fontWeight = 'bold')
CSS Property Names

The actual CSS property names are dash-separated, but you can use camelCase names in formatStyle() anyway (otherwise you will have to use backticks to quote the names, e.g. formatStyle(..., `font-size` = '12px')), and this function will automatically convert camelCase names to dash-separated names, e.g. 'fontWeight' will be converted to 'font-weight' internally. If you are familiar with CSS, you can still use the dash-separated names – just remember to quote them.

The above example did not take the cell values into consideration. All styles are applied to all cells unconditionally: the font color is red, the background color is yellow, and the font weight is bold. That may not be useful in practice. DT has provided a few helper functions to apply conditional styles to cells, such as styleInterval(), styleEqual(), and styleColorBar(). Please read the documentation in R for the usage of these functions. We show a comprehensive example below:

datatable(iris) %>% 
  formatStyle('Sepal.Length', fontWeight = styleInterval(5, c('normal', 'bold'))) %>%
  formatStyle(
    'Sepal.Width',
    color = styleInterval(c(3.4, 3.8), c('white', 'blue', 'red')),
    backgroundColor = styleInterval(3.4, c('gray', 'yellow'))
  ) %>%
  formatStyle(
    'Petal.Length',
    background = styleColorBar(iris$Petal.Length, 'steelblue'),
    backgroundSize = '100% 90%',
    backgroundRepeat = 'no-repeat',
    backgroundPosition = 'center'
  ) %>%
  formatStyle(
    'Species',
    transform = 'rotateX(45deg) rotateY(20deg) rotateZ(30deg)',
    backgroundColor = styleEqual(
      unique(iris$Species), c('lightblue', 'lightgreen', 'lightpink')
    )
  )

For the column Sepal.Length, the font weight in cells of which the values are greater than 5 will be bold. For Sepal.Width, both foreground and background colors are used: white for values smaller than 3.4, blue for those between 3.4 and 3.8, and red for those greater than 3.8; gray background for values below 3.4, and yellow for those above 3.4. For Petal.Length, a bar graph is presented as the background. For Species, the cells are actually rotated in 3D1, with different background colors (light blue for setosa, light green for versicolor, and light pink for virginica).

You can find more examples about styling cells on this page. Another R package you may consider for formatting tables is formattable; see #31 for an example.

3 Table Utilities

The functions tableHeader() and tableFooter are wrappers of htmltools::tags to generate a table header or footer. It may be convenient when you want to define a custom table container.

tableHeader(iris)
<thead>
  <tr>
    <th>Sepal.Length</th>
    <th>Sepal.Width</th>
    <th>Petal.Length</th>
    <th>Petal.Width</th>
    <th>Species</th>
  </tr>
</thead>
tableHeader(colnames(iris))  # equivalent to tableHeader(iris)
<thead>
  <tr>
    <th>Sepal.Length</th>
    <th>Sepal.Width</th>
    <th>Petal.Length</th>
    <th>Petal.Width</th>
    <th>Species</th>
  </tr>
</thead>
tableFooter(iris)  # footer
<tfoot>
  <tr>
    <th>Sepal.Length</th>
    <th>Sepal.Width</th>
    <th>Petal.Length</th>
    <th>Petal.Width</th>
    <th>Species</th>
  </tr>
</tfoot>
library(htmltools)
tags$table(tableHeader(iris), tableFooter(iris))
<table>
  <thead>
    <tr>
      <th>Sepal.Length</th>
      <th>Sepal.Width</th>
      <th>Petal.Length</th>
      <th>Petal.Width</th>
      <th>Species</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Sepal.Length</th>
      <th>Sepal.Width</th>
      <th>Petal.Length</th>
      <th>Petal.Width</th>
      <th>Species</th>
    </tr>
  </tfoot>
</table>

4 Functions Imported from htmlwidgets

We imported and re-exported a few functions from the htmlwidgets package. The function JS() can be used to wrap literal JavaScript code. You can pass either a single character string, or a character vector to JS(). In the latter case, the vector will be concatenated into a single string using the separator \n.

JS('alter("OK");')
JS(c(
  'function(x) {',
  '  return x + 1;',
  '}'
))
# same as
JS('function(x) {
  return x + 1;
}')

The function saveWidget() can be used to save a widget to an HTML file, e.g.

x = datatable(iris)
saveWidget(x, 'iris-table.html')

  1. If you use Internet Explorer, its version should be at least 10. Other modern web browsers should just work.↩︎