1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
---
title: Display Tables with the JavaScript Library simple-datatables
author: Yihui Xie
date: "`{r} Sys.Date()`"
output:
html:
meta:
css: ["@default", "@npm/simple-datatables/dist/style.min.css"]
js: ["@npm/simple-datatables/dist/umd/simple-datatables.min.js"]
---
<!--
%\VignetteEngine{litedown::vignette}
%\VignetteIndexEntry{Display Tables with the JavaScript Library simple-datatables}
-->
We can use the JavaScript library [**simple-datatables**](https://github.com/fiduswriter/simple-datatables/) to generate enhanced tables in HTML. In the example below, we create a table for the `mtcars` data:
::: {#mtcars-table}
```{r cool, print.args=list(data.frame=list(limit=NULL))}
mtcars
```
:::
Note we assigned an `id` to the table, and next we use the **DataTables** library to initialize the table and you will get an interactive table.
```{js}
window.addEventListener('load', () => {
new simpleDatatables.DataTable('#mtcars-table > table');
});
```
By comparison, below is an ordinary table:
```{r boring}
mtcars
```
|
