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')
| mpg | cyl | disp | hp | drat | wt | qsec | vs | am | gear | carb | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Mazda RX4 | 21.0 | 6 | 160 | 110 | 3.90 | 2.620 | 16.46 | 0 | 1 | 4 | 4 |
| Mazda RX4 Wag | 21.0 | 6 | 160 | 110 | 3.90 | 2.875 | 17.02 | 0 | 1 | 4 | 4 |
| Datsun 710 | 22.8 | 4 | 108 | 93 | 3.85 | 2.320 | 18.61 | 1 | 1 | 4 | 1 |
| Hornet 4 Drive | 21.4 | 6 | 258 | 110 | 3.08 | 3.215 | 19.44 | 1 | 0 | 3 | 1 |
| Hornet Sportabout | 18.7 | 8 | 360 | 175 | 3.15 | 3.440 | 17.02 | 0 | 0 | 3 | 2 |
| Valiant | 18.1 | 6 | 225 | 105 | 2.76 | 3.460 | 20.22 | 1 | 0 | 3 | 1 |
This vignette is only a toy example. I'd recommend you to use the DT package instead: https://github.com/rstudio/DT