We can use the JavaScript library DataTables to generate enhanced tables in HTML. In the example below, we create a table for the mtcars
data:
library(knitr) kable(mtcars, 'html', table.attr='id="mtcars_table"')
Note we assigned an id
to the table, and next we use the DataTables library to tweak the table.
<script type="text/javascript"> $(document).ready(function() { $('#mtcars_table').DataTable(); } ); </script>
Since this is a Markdown vignette, we need to add the JavaScript libraries as well as some additional CSS files to the HTML header, and this can be done via:
options(markdown.HTML.header = system.file('misc', 'datatables.html', package = 'knitr'))
The file datatables.html
under the misc
directory of knitr was added to the HTML output.
By comparison, below is an ordinary table:
kable(head(mtcars), 'html')
This vignette is only a toy example. I'd recommend you to use the DT package instead: https://github.com/rstudio/DT
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.