42 lines
1.2 KiB
Plaintext
42 lines
1.2 KiB
Plaintext
|
---
|
||
|
|
title: Display Tables with the JavaScript Library DataTables
|
||
|
|
author: Yihui Xie
|
||
|
|
date: "`{r} Sys.Date()`"
|
||
|
|
output:
|
||
|
|
litedown::html_format:
|
||
|
|
meta:
|
||
|
|
css: ["@default", "https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css"]
|
||
|
|
js: ["@npm/jquery@3.7.1/dist/jquery.min.js", "https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"]
|
||
|
|
---
|
||
|
|
|
||
|
|
<!--
|
||
|
|
%\VignetteEngine{litedown::vignette}
|
||
|
|
%\VignetteIndexEntry{Display Tables with the JavaScript Library DataTables}
|
||
|
|
-->
|
||
|
|
|
||
|
|
## jQuery DataTables
|
||
|
|
|
||
|
|
We can use the JavaScript library [**DataTables**](https://datatables.net) 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', () => {
|
||
|
|
$('#mtcars-table > table').DataTable();
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
By comparison, below is an ordinary table:
|
||
|
|
|
||
|
|
```{r boring}
|
||
|
|
mtcars
|
||
|
|
```
|
||
|
|
|
||
|
|
This vignette is only a toy example. I'd recommend you to use the **DT** package instead: https://github.com/rstudio/DT
|