library(tinytable)
<- head(iris)
dat tt(dat) |>
theme_html(engine = "tabulator") |>
print("html")
Interactive tables
The Tabulator.js integration is experimental and the API may change in future versions. Please report any issues on GitHub.
This vignette was compiled using tinytable
version 0.14.0.7. Some features shown here may not be available in the CRAN version of tinytable
.
Get the development version at:
library(remotes)
install_github("vincentarelbundock/tinytable")
Make sure you restart R
for the install to take effect.
The tinytable
package supports creating interactive tables using the Tabulator.js library. Tabulator is a powerful JavaScript library that provides features like
- Sorting
- Filtering
- Pagination
- Themes
- Data export
- Real-time data editing in the browser
- Accessibility features (ARIA compliant)
Drawing, printing, and saving
To create an interactive table, use the theme_html(engine="tabulator")
function:
To save the table to file, we can use the save_tt()
function. One issue to consider, however, is that tinytable
supports two types of HTML output: tabulator
and bootstrap
. To select the default HTML engine, users can call the theme_html()
function:
tt(dat) |>
theme_html(engine = "tabulator") |>
save_tt("/path/to/your/file.html")
In notebooks like Quarto or R markdown, tinytable
will automatically create an HTML when appropriate. To create an interactive HTML table, we use the theme_html(engine="tabulator")
function and argument. This produces a table that uses the Tabulator.js framework.
<- data.frame(
dat city = c("Montréal", "Toronto", "Vancouver"),
salary = c(14002.22, 201399.11, 80188.38),
random = c(1.43402, 201.399, 0.134588),
date = as.Date(sample(1:1000, 3), origin = "1970-01-01"),
best = c(TRUE, FALSE, FALSE)
)
<- tt(dat) |> theme_html(engine = "tabulator")
tab tab
Pagination and filtering
tinytable
includes a built-in theme to add pagination, sorting, and filtering capabilities to a Tabulator table. This is particularly useful for large datasets.
To apply a theme, call the theme_html()
function. See ?theme_html
for a list of arguments that can be used to customize the number of pagination rows, behaviour of the search bar, and various other elements. Below, we supply a vector to control both the number of rows per page and the options available in the drop down menu that controls pagination.
We also set search=TRUE
to include a filtering box. Try typing the letters “vir” in the search box to filter the iris
dataset and find the Virginica flowers.
tt(iris) |> theme_html(
engine = "tabulator",
tabulator_pagination = c(5, 10, 50),
tabulator_search = "bottom")
Column Search
For more granular filtering, use tabulator_search = "column"
to add header filters to each column. The filter type is automatically selected based on the column’s data type:
- Numeric columns: Number input with >= comparison
- Text columns: Text input with substring matching
- Logical columns: Tristate tickCross filter (true/false/all)
- Date columns: Text input for date filtering
<- data.frame(
dat Name = c("Alice", "Bob", "Charlie", "David", "Eve"),
Age = c(25, 30, 35, 28, 32),
Salary = c(50000.5, 65000.75, 72000.0, 55000.25, 68000.5),
Active = c(TRUE, FALSE, TRUE, TRUE, FALSE),
StartDate = as.Date(c("2020-01-15", "2019-06-20", "2021-03-10", "2020-09-05", "2018-11-30"))
)
tt(dat) |>
theme_html(engine = "tabulator", tabulator_search = "column")
Try filtering by age (e.g., type “30” in the Age column), searching for names containing “a”, or filtering by the Active status.
Format
Formatting numeric and date columns in Tabulator tables requires us to use the Javascript functionality rather than tinytable
’s internals, if we want to preserve functionality like sorting.
In particular, for numeric values, format_tt()
is always set to num_fmt="decimal"
.
|>
tab format_tt(j = "salary", digits = 2, num_mark_big = ",") |>
format_tt(j = "random", digits = 4)
For dates, tabulator
uses Luxon date format tokens, not R’s strptime
format. Common patterns include:
|> format_tt(j = "date", date = "M/d/yyyy") tab
Here is a table with some common Luxon date formats and their output examples:
Style
The style_tt()
function supports comprehensive styling for Tabulator tables, including bold, italic, color, background, fontsize, and more. Styles are applied with cell-level precision and persist across sorting and pagination. Here’s an example that applies a gradient color scale to a column, dynamically adjusting text color for readability:
set.seed(48103)
<- iris[sample(1:150, 150),]
iris_shuffle
<- function(x, palette = "Inferno", n = 256) {
gradient <- hcl.colors(n, palette)
pal <- as.integer(cut(x, breaks = n, labels = FALSE, include.lowest = TRUE))
idx
pal[idx]
}
tt(iris_shuffle) |>
theme_html(engine = "tabulator", tabulator_pagination = c(10, 50, 150)) |>
style_tt(
i = 1:nrow(iris_shuffle),
j = 1,
align = "c",
color = ifelse(iris_shuffle[[1]] < quantile(iris_shuffle[[1]], .8), "white", "black"),
background = gradient(iris_shuffle[[1]]))
Note: Column-wide alignment (align
and alignv
) is supported, but row-specific alignment (using i
with alignment arguments) is not currently available.
tt(dat) |>
theme_html(engine = "tabulator") |>
style_tt(align = "r")
CSS
For more advanced styling, you can add custom CSS rules using the tabulator_css_rule
argument in theme_html()
. The CSS rule must include at least one $TINYTABLE_ID
placeholder, which gets replaced with the unique table identifier to ensure styles only apply to that specific table.
<- "
css_rule $TINYTABLE_ID .tabulator-header .tabulator-col {
background-color: black;
color: white;
}
"
tt(dat) |> theme_html(engine = "tabulator", tabulator_css_rule = css_rule)
Plots and images
The plot_tt()
function supports JavaScript-based inline plots in Tabulator tables. Built-in plot types include histograms, density plots, sparklines, and progress bars.
set.seed(123)
<- data.frame(
dat Variable = c("mpg", "hp", "qsec"),
Histogram = "",
Density = "",
Bar = "",
Line = ""
)
# Prepare plot data
<- list(rnorm(50, mean = 20), rnorm(50, mean = 50), rnorm(50, mean = 35))
histogram_data <- list(rnorm(100, mean = 20), rnorm(100, mean = 50), rnorm(100, mean = 35))
density_data <- list(25, 150, 45)
bar_data <- lapply(1:3, function(x) data.frame(x = 1:10, y = rnorm(10)))
line_data
tt(dat) |>
theme_html(engine = "tabulator") |>
plot_tt(j = 2, fun = "histogram", data = histogram_data, color = "purple") |>
plot_tt(j = 3, fun = "density", data = density_data, color = "darkred") |>
plot_tt(j = 4, fun = "bar", data = bar_data, color = "steelblue") |>
plot_tt(j = 5, fun = "line", data = line_data, color = "darkgreen")
All plots are rendered client-side using JavaScript, which means:
- No PNG generation needed
- Better performance and smaller file sizes
- Native integration with Tabulator’s sorting and filtering
Custom plots
As with other output formats, we can use custom plotting functions and insert them in interactive table cells:
library(ggplot2)
<- function(d, ...) {
bar <- data.frame(xmin = 0, xmax = d, ymin = 0, ymax = 1)
d ggplot(d, aes(xmin = xmin, xmax = xmax, ymin = ymin, ymax = ymax)) +
geom_rect(fill = "lightblue") +
annotate("text", x = .5, y = .5, label = sprintf("%.0f%%", 100 * d$xmax), size = 12) +
scale_x_continuous(expand = c(0, 0), limits = c(0, 1)) +
scale_y_continuous(expand = c(0, 0), limits = c(0, 1)) +
theme_void()
}
<- data.frame(
dat City = c("Montreal", "Vancouver", "Toronto"),
Fun = ""
)
tt(dat) |>
theme_html(engine = "tabulator") |>
style_tt(alignv = "m") |>
plot_tt(
j = 2,
fun = bar,
data = list(0.90, 0.50, 0.10),
height = 2)
Images
The plot_tt()
function also supports inserting images into Tabulator tables using the images
parameter:
<- data.frame(
dat Species = c("Spider", "Squirrel"),
Image = ""
)<- c(
img "figures/spider.png",
"figures/squirrel.png"
)tt(dat) |>
theme_html(engine = "tabulator") |>
plot_tt(j = 2, images = img, height = 3)
Images can be local file paths (relative or absolute) or URLs. The height
parameter controls the image height in em units.
Tabulator options and formatters
The theme_html()
function accepts tabulator_options
and tabulator_columns
arguments for advanced customization of Tabulator tables.
The options
argument allows you to override any default Tabulator configuration. The columns
argument lets you completely customize column definitions, including formatters, styling, and behavior.
In this example, we redefine how columns are formatted.
<- data.frame(
dat city = c("Toronto", "Montreal", "Vancouver"),
salary = c(75000, 68000, 82000),
best = c(FALSE, TRUE, FALSE)
)
<- '
custom_columns [
{
"title": "City",
"field": "city"
},
{
"title": "Best city",
"field": "best",
"formatter": "tickCross"
},
{
"title": "Salary",
"field": "salary",
"formatter": "money",
"formatterParams": {"precision": 0, "symbol": "$"}
},
]'
tt(dat) |> theme_html(engine = "tabulator", tabulator_columns = custom_columns)
And now we change more options, such as the layout and height of the table, including height
which changes the height of the scrollable area.
<- "
opts layout: 'fitColumns',
height: '300px'
"
tt(head(iris, 25)) |>
theme_html(engine = "tabulator", tabulator_options = opts)
Style sheets
Tabulator ships with multiple complete CSS style sheets. The default in tinytable
is Bootstrap 5, but you can customize the appearance using the theme_html()
function (when available). Alternatives include "default"
, "simple"
, "midnight"
, "modern"
, "site"
, "site_dark"
, "bootstrap3"
, "bootstrap4"
, "bootstrap5"
, "semanticui"
, "bulma"
, and "materialize"
.
The syntax looks like this:
tt(iris) |> theme_html(tabulator_stylesheet = "semanticui")
To use a theme, the HTML file must load a style sheet globally in the document. Unfortunately, this means that tinytable
cannot apply a Tabulator
style sheet to a single table in documents with multiple tables. The style that applies is always the last one loaded in the document.
Here are some screenshots of different stylesheets.