library(tinytable)
<- head(iris)
dat tt(dat) |> print("tabulator")
Interactive tables
The Tabulator.js integration is experimental and the API may change in future versions. Please report any issues on GitHub.
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 output = "tabulator"
when printing your table:
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 set a global option:
options(tinytable_html_engine = "tabulator")
tt(dat) |> save_tt("/path/to/your/file.html")
In notebooks like Quarto or R markdown, tinytable
will automatically create an HTML when appropriate. Whenn the tinytable_html_engine
option is set to "tabulator"
, the table will be rendered using Tabulator.js.
<- 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)
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(
tabulator_pagination = c(5, 10, 50),
tabulator_search = TRUE)
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"
.
tt(dat) |>
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:
tt(dat) |> format_tt(j = "date", date = "M/d/yyyy")
Here is a table with some common Luxon date formats and their output examples:
Style
Support for style_tt()
is very limited in interactive tables. For now, only the align
and alignv
arguments of that function are supported.
tt(dat) |> 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(tabulator_css_rule = css_rule)
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"
.
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.
Options and columns
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(tabulator_columns = custom_columns)
And now we change more options, such as the layout and height of the table:
<- "
opts layout: 'fitColumns',
height: '200px'
"
tt(dat) |> theme_html(tabulator_options = opts)