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/

For example, 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

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