Customization

library(tinytable)
options(tinytable_tt_digits = 3)
options(tinytable_theme_placement_latex_float = "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 style_tt() with the bootstrap_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) |> style_tt(bootstrap_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) |> style_tt(bootstrap_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) |> style_tt(
  bootstrap_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") |>
  style_tt(bootstrap_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) |>
  style_tt(j = 1, bootstrap_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",
    bootstrap_class = "table mytable",
    bootstrap_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]) |>
  style_tt(
    bootstrap_class = "table table-borderless squirreltable",
    bootstrap_css_rule = css
  )
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

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

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) {
  }
)