Customization

library(tinytable)
options(tinytable_tt_digits = 3)
options(tinytable_latex_placement = "H")
x <- mtcars[1:4, 1:5]

HTML

Bootstrap classes

The Bootstrap framework provides a number of built-in themes to style tables, using “classes.” To use them, we call theme_html() with the class argument. A list of available Bootstrap classes can be found here: https://getbootstrap.com/docs/5.3/content/tables/

To produce a more condensed or “small” table, we use the table-sm class:

tt(x) |> theme_html(class = "table table-sm")
mpg cyl disp hp drat
21 6 160 110 3.9
21 6 160 110 3.9
22.8 4 108 93 3.85
21.4 6 258 110 3.08

To produce a “bordered” table, we use the table-bordered class:

tt(x) |> theme_html(class = "table table-bordered")
mpg cyl disp hp drat
21 6 160 110 3.9
21 6 160 110 3.9
22.8 4 108 93 3.85
21.4 6 258 110 3.08

We can also combine several Bootstrap classes. Here, we get a table with the “hover” feature:

tt(x) |> theme_html(class = "table table-hover")
mpg cyl disp hp drat
21 6 160 110 3.9
21 6 160 110 3.9
22.8 4 108 93 3.85
21.4 6 258 110 3.08

By default, Bootstrap 5 places captions at the bottom of the table. This can be changed by using a different class:

tt(head(iris), caption = "A caption on top") |>
  theme_html(class = "table caption-top")
A caption on top
Sepal.Length Sepal.Width Petal.Length Petal.Width Species
5.1 3.5 1.4 0.2 setosa
4.9 3 1.4 0.2 setosa
4.7 3.2 1.3 0.2 setosa
4.6 3.1 1.5 0.2 setosa
5 3.6 1.4 0.2 setosa
5.4 3.9 1.7 0.4 setosa

CSS declarations

The style_tt() function allows us to declare CSS properties and values for individual cells, columns, or rows of a table. For example, if we want to make the first column bold, we could do:

tt(x) |>
  theme_html(j = 1, css = "font-weight: bold; color: red;")
mpg cyl disp hp drat
21 6 160 110 3.9
21 6 160 110 3.9
22.8 4 108 93 3.85
21.4 6 258 110 3.08

CSS rules

For more extensive customization, we can use complete CSS rules. In this example, we define several rules that apply to a new class called mytable. Then, we use the theme argument of the tt() function to ensure that our tiny table is of class mytable. Finally, we call style_bootstrap() to apply the rules with the bootstrap_css_rule argument.

css_rule <- "
.mytable {
  background: linear-gradient(45deg, #EA8D8D, #A890FE);
  width: 600px;
  border-collapse: collapse;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.mytable th,
.mytable td {
  padding: 5px;
  background-color: rgba(255,255,255,0.2);
  color: #fff;
}

.mytable tbody tr:hover {
  background-color: rgba(255,255,255,0.3);
}

.mytable tbody td:hover:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -9999px;
  bottom: -9999px;
  background-color: rgba(255,255,255,0.2);
  z-index: -1;
}
"

tt(x, width = 2 / 3) |>
  style_tt(
    j = 1:5,
    align = "ccccc") |>
  theme_html(
    class = "mytable", 
    css_rule = css_rule)
mpg cyl disp hp drat
21 6 160 110 3.9
21 6 160 110 3.9
22.8 4 108 93 3.85
21.4 6 258 110 3.08

And here’s another example:

css <- "
.squirreltable {
  background-size: cover;
  background-position: center;
  background-image: url('https://user-images.githubusercontent.com/987057/82732352-b9aabf00-9cda-11ea-92a6-26750cf097d0.png');
  --bs-table-bg: transparent;
}
"

tt(mtcars[1:10, 1:8]) |>
  theme_html(
    css_rule = css,
    class = "table table-borderless squirreltable")
mpg cyl disp hp drat wt qsec vs
21 6 160 110 3.9 2.62 16.5 0
21 6 160 110 3.9 2.88 17 0
22.8 4 108 93 3.85 2.32 18.6 1
21.4 6 258 110 3.08 3.21 19.4 1
18.7 8 360 175 3.15 3.44 17 0
18.1 6 225 105 2.76 3.46 20.2 1
14.3 8 360 245 3.21 3.57 15.8 0
24.4 4 147 62 3.69 3.19 20 1
22.8 4 141 95 3.92 3.15 22.9 1
19.2 6 168 123 3.92 3.44 18.3 1

And yet another one. Some Rmarkdown documents like bookdown use older versions of Bootstrap that do not have a caption-top class. We can recreate that functionality with CSS rules and classes. For example,

rule <- ".bottomcaption {caption-side: bottom;}"
tt(head(iris), caption = "Hello world") |>
  theme_html(class = "table bottomcaption", css_rule = rule)

LaTeX / PDF

The LaTeX / PDF customization options described in this section are not available for HTML documents. Please refer to the PDF documentation hosted on the website to read this part of the tutorial.

Preamble

Introduction to tabularray

tabularray keys

Methods to support non-data frame objects

The tt() function is a “generic” that can dispatch an object to an appropriate method based on the class of that object. The tinytable supplies methods for data.frame, data.table, and tibble. But users can define new method to automatically create tables for whatever object they like.

For example, let’s say we fit a linear regression model (class lm) and extract the results using the tidy() function from the broom package. We can create a table from the results as follows:

library(broom)
library(tinytable)
mod <- lm(mpg ~ hp + factor(cyl), data = mtcars)
results <- tidy(mod)
tt(results)
term estimate std.error statistic p.value
(Intercept) 28.65 1.5878 18.04 0.0000000000000000592
hp -0.024 0.0154 -1.56 0.1299540446968084351
factor(cyl)6 -5.968 1.6393 -3.64 0.0010920888649549852
factor(cyl)8 -8.521 2.3261 -3.66 0.0010286170048313355

Alternatively, we can create an S3 method for the lm class, and then pass any model we fit to that class to automatically obtain a nice table.

tt.lm <- function(x, ...) {
  results <- broom::tidy(x)
  out <- tt(results, ...)
  out <- format_tt(out, j = "p.value", escape = TRUE,
    fn = \(p) format.pval(p, digits = 1))
  return(out)
}

lm(mpg ~ hp, data = mtcars) |> tt(digits = 1)
term estimate std.error statistic p.value
(Intercept) 30.1 1.63 18 <2e-16
hp -0.07 0.01 -7 2e-07 
lm(mpg ~ hp + factor(cyl), data = mtcars) |> tt(digits = 1)
term estimate std.error statistic p.value
(Intercept) 28.65 1.59 18 <2e-16
hp -0.02 0.02 -2 0.130
factor(cyl)6 -5.97 1.64 -4 0.001
factor(cyl)8 -8.52 2.33 -4 0.001

Shiny

tinytable is a great complement to Shiny for displaying HTML tables in a web app. The styling in a tinytable is applied by JavaScript functions and CSS. Thus, to ensure that this styling is preserved in a Shiny app, one strategy is to bake the entire page, save it in a temporary file, and load it using the includeHTML function from the shiny package. This approach is illustrated in this minimal example:

library("shiny")
library("tinytable")

fn <- paste(tempfile(), ".html")
tab <- tt(mtcars[1:5, 1:4]) |>
  style_tt(i = 0:5, color = "orange", background = "black") |>
  save_tt(fn)

shinyApp(
  ui = fluidPage(
    fluidRow(column(
      12, h1("This is test of tinytable"),
      shiny::includeHTML(fn)
    ))
  ),
  server = function(input, output) {
  }
)