skimr
Version:
CLI EDA for CSVs
758 lines (756 loc) • 27 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>jQuery DataTables</title>
<style type="text/css">
/**
* Prism.s theme ported from highlight.js's xcode style
*/
pre code {
padding: 1em;
}
.token.comment {
color: #007400;
}
.token.punctuation {
color: #999;
}
.token.tag,
.token.selector {
color: #aa0d91;
}
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
color: #1c00cf;
}
.token.property,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
color: #c41a16;
}
.token.inserted {
background-color: #ccffd8;
}
.token.deleted {
background-color: #ffebe9;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #836c28;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #5c2699;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
</style>
<style type="text/css">
body {
font-family: sans-serif;
max-width: 800px;
margin: auto;
padding: 1em;
line-height: 1.5;
box-sizing: border-box;
}
body, .footnotes, code { font-size: .9em; }
li li { font-size: .95em; }
*, *:before, *:after {
box-sizing: inherit;
}
pre, img { max-width: 100%; }
pre, pre:hover {
white-space: pre-wrap;
word-break: break-all;
}
pre code {
display: block;
overflow-x: auto;
}
code { font-family: 'DejaVu Sans Mono', 'Droid Sans Mono', 'Lucida Console', Consolas, Monaco, monospace; }
:not(pre) > code, code[class] { background-color: #F8F8F8; }
code.language-undefined, pre > code:not([class]) {
background-color: inherit;
border: 1px solid #eee;
}
table {
margin: auto;
border-top: 1px solid #666;
}
table thead th { border-bottom: 1px solid #ddd; }
th, td { padding: 5px; }
thead, tfoot, tr:nth-child(even) { background: #eee; }
blockquote {
color: #666;
margin: 0;
padding-left: 1em;
border-left: 0.5em solid #eee;
}
hr, .footnotes::before { border: 1px dashed #ddd; }
.frontmatter { text-align: center; }
#TOC .numbered li { list-style: none; }
#TOC .numbered { padding-left: 0; }
#TOC .numbered ul { padding-left: 1em; }
table, .body h2 { border-bottom: 1px solid #666; }
.body .appendix, .appendix ~ h2 { border-bottom-style: dashed; }
.footnote-ref a::before { content: "["; }
.footnote-ref a::after { content: "]"; }
section.footnotes::before {
content: "";
display: block;
max-width: 20em;
}
@media print {
body {
font-size: 12pt;
max-width: 100%;
}
tr, img { page-break-inside: avoid; }
}
@media only screen and (min-width: 992px) {
pre { white-space: pre; }
}
</style>
</head>
<body>
<div class="include-before">
</div>
<div class="frontmatter">
<div class="title"><h1>jQuery DataTables</h1></div>
<div class="author"><h2></h2></div>
<div class="date"><h3></h3></div>
</div>
<div class="body">
<!--
%\VignetteEngine{knitr::knitr}
%\VignetteIndexEntry{Display Tables with the JavaScript Library DataTables}
-->
<h1 id="jquery-datatables">jQuery DataTables</h1>
<p>We can use the JavaScript library <a href="https://www.datatables.net"><strong>DataTables</strong></a> to generate enhanced tables in HTML. In the example below, we create a table for the <code>mtcars</code> data:</p>
<pre><code class="language-r">library(knitr)
kable(mtcars, 'html', table.attr='id="mtcars_table"')
</code></pre>
<table id="mtcars_table">
<thead>
<tr>
<th style="text-align:left;"> </th>
<th style="text-align:right;"> mpg </th>
<th style="text-align:right;"> cyl </th>
<th style="text-align:right;"> disp </th>
<th style="text-align:right;"> hp </th>
<th style="text-align:right;"> drat </th>
<th style="text-align:right;"> wt </th>
<th style="text-align:right;"> qsec </th>
<th style="text-align:right;"> vs </th>
<th style="text-align:right;"> am </th>
<th style="text-align:right;"> gear </th>
<th style="text-align:right;"> carb </th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left;"> Mazda RX4 </td>
<td style="text-align:right;"> 21.0 </td>
<td style="text-align:right;"> 6 </td>
<td style="text-align:right;"> 160.0 </td>
<td style="text-align:right;"> 110 </td>
<td style="text-align:right;"> 3.90 </td>
<td style="text-align:right;"> 2.620 </td>
<td style="text-align:right;"> 16.46 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 4 </td>
</tr>
<tr>
<td style="text-align:left;"> Mazda RX4 Wag </td>
<td style="text-align:right;"> 21.0 </td>
<td style="text-align:right;"> 6 </td>
<td style="text-align:right;"> 160.0 </td>
<td style="text-align:right;"> 110 </td>
<td style="text-align:right;"> 3.90 </td>
<td style="text-align:right;"> 2.875 </td>
<td style="text-align:right;"> 17.02 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 4 </td>
</tr>
<tr>
<td style="text-align:left;"> Datsun 710 </td>
<td style="text-align:right;"> 22.8 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 108.0 </td>
<td style="text-align:right;"> 93 </td>
<td style="text-align:right;"> 3.85 </td>
<td style="text-align:right;"> 2.320 </td>
<td style="text-align:right;"> 18.61 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 1 </td>
</tr>
<tr>
<td style="text-align:left;"> Hornet 4 Drive </td>
<td style="text-align:right;"> 21.4 </td>
<td style="text-align:right;"> 6 </td>
<td style="text-align:right;"> 258.0 </td>
<td style="text-align:right;"> 110 </td>
<td style="text-align:right;"> 3.08 </td>
<td style="text-align:right;"> 3.215 </td>
<td style="text-align:right;"> 19.44 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 1 </td>
</tr>
<tr>
<td style="text-align:left;"> Hornet Sportabout </td>
<td style="text-align:right;"> 18.7 </td>
<td style="text-align:right;"> 8 </td>
<td style="text-align:right;"> 360.0 </td>
<td style="text-align:right;"> 175 </td>
<td style="text-align:right;"> 3.15 </td>
<td style="text-align:right;"> 3.440 </td>
<td style="text-align:right;"> 17.02 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 2 </td>
</tr>
<tr>
<td style="text-align:left;"> Valiant </td>
<td style="text-align:right;"> 18.1 </td>
<td style="text-align:right;"> 6 </td>
<td style="text-align:right;"> 225.0 </td>
<td style="text-align:right;"> 105 </td>
<td style="text-align:right;"> 2.76 </td>
<td style="text-align:right;"> 3.460 </td>
<td style="text-align:right;"> 20.22 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 1 </td>
</tr>
<tr>
<td style="text-align:left;"> Duster 360 </td>
<td style="text-align:right;"> 14.3 </td>
<td style="text-align:right;"> 8 </td>
<td style="text-align:right;"> 360.0 </td>
<td style="text-align:right;"> 245 </td>
<td style="text-align:right;"> 3.21 </td>
<td style="text-align:right;"> 3.570 </td>
<td style="text-align:right;"> 15.84 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 4 </td>
</tr>
<tr>
<td style="text-align:left;"> Merc 240D </td>
<td style="text-align:right;"> 24.4 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 146.7 </td>
<td style="text-align:right;"> 62 </td>
<td style="text-align:right;"> 3.69 </td>
<td style="text-align:right;"> 3.190 </td>
<td style="text-align:right;"> 20.00 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 2 </td>
</tr>
<tr>
<td style="text-align:left;"> Merc 230 </td>
<td style="text-align:right;"> 22.8 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 140.8 </td>
<td style="text-align:right;"> 95 </td>
<td style="text-align:right;"> 3.92 </td>
<td style="text-align:right;"> 3.150 </td>
<td style="text-align:right;"> 22.90 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 2 </td>
</tr>
<tr>
<td style="text-align:left;"> Merc 280 </td>
<td style="text-align:right;"> 19.2 </td>
<td style="text-align:right;"> 6 </td>
<td style="text-align:right;"> 167.6 </td>
<td style="text-align:right;"> 123 </td>
<td style="text-align:right;"> 3.92 </td>
<td style="text-align:right;"> 3.440 </td>
<td style="text-align:right;"> 18.30 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 4 </td>
</tr>
<tr>
<td style="text-align:left;"> Merc 280C </td>
<td style="text-align:right;"> 17.8 </td>
<td style="text-align:right;"> 6 </td>
<td style="text-align:right;"> 167.6 </td>
<td style="text-align:right;"> 123 </td>
<td style="text-align:right;"> 3.92 </td>
<td style="text-align:right;"> 3.440 </td>
<td style="text-align:right;"> 18.90 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 4 </td>
</tr>
<tr>
<td style="text-align:left;"> Merc 450SE </td>
<td style="text-align:right;"> 16.4 </td>
<td style="text-align:right;"> 8 </td>
<td style="text-align:right;"> 275.8 </td>
<td style="text-align:right;"> 180 </td>
<td style="text-align:right;"> 3.07 </td>
<td style="text-align:right;"> 4.070 </td>
<td style="text-align:right;"> 17.40 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 3 </td>
</tr>
<tr>
<td style="text-align:left;"> Merc 450SL </td>
<td style="text-align:right;"> 17.3 </td>
<td style="text-align:right;"> 8 </td>
<td style="text-align:right;"> 275.8 </td>
<td style="text-align:right;"> 180 </td>
<td style="text-align:right;"> 3.07 </td>
<td style="text-align:right;"> 3.730 </td>
<td style="text-align:right;"> 17.60 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 3 </td>
</tr>
<tr>
<td style="text-align:left;"> Merc 450SLC </td>
<td style="text-align:right;"> 15.2 </td>
<td style="text-align:right;"> 8 </td>
<td style="text-align:right;"> 275.8 </td>
<td style="text-align:right;"> 180 </td>
<td style="text-align:right;"> 3.07 </td>
<td style="text-align:right;"> 3.780 </td>
<td style="text-align:right;"> 18.00 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 3 </td>
</tr>
<tr>
<td style="text-align:left;"> Cadillac Fleetwood </td>
<td style="text-align:right;"> 10.4 </td>
<td style="text-align:right;"> 8 </td>
<td style="text-align:right;"> 472.0 </td>
<td style="text-align:right;"> 205 </td>
<td style="text-align:right;"> 2.93 </td>
<td style="text-align:right;"> 5.250 </td>
<td style="text-align:right;"> 17.98 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 4 </td>
</tr>
<tr>
<td style="text-align:left;"> Lincoln Continental </td>
<td style="text-align:right;"> 10.4 </td>
<td style="text-align:right;"> 8 </td>
<td style="text-align:right;"> 460.0 </td>
<td style="text-align:right;"> 215 </td>
<td style="text-align:right;"> 3.00 </td>
<td style="text-align:right;"> 5.424 </td>
<td style="text-align:right;"> 17.82 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 4 </td>
</tr>
<tr>
<td style="text-align:left;"> Chrysler Imperial </td>
<td style="text-align:right;"> 14.7 </td>
<td style="text-align:right;"> 8 </td>
<td style="text-align:right;"> 440.0 </td>
<td style="text-align:right;"> 230 </td>
<td style="text-align:right;"> 3.23 </td>
<td style="text-align:right;"> 5.345 </td>
<td style="text-align:right;"> 17.42 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 4 </td>
</tr>
<tr>
<td style="text-align:left;"> Fiat 128 </td>
<td style="text-align:right;"> 32.4 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 78.7 </td>
<td style="text-align:right;"> 66 </td>
<td style="text-align:right;"> 4.08 </td>
<td style="text-align:right;"> 2.200 </td>
<td style="text-align:right;"> 19.47 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 1 </td>
</tr>
<tr>
<td style="text-align:left;"> Honda Civic </td>
<td style="text-align:right;"> 30.4 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 75.7 </td>
<td style="text-align:right;"> 52 </td>
<td style="text-align:right;"> 4.93 </td>
<td style="text-align:right;"> 1.615 </td>
<td style="text-align:right;"> 18.52 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 2 </td>
</tr>
<tr>
<td style="text-align:left;"> Toyota Corolla </td>
<td style="text-align:right;"> 33.9 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 71.1 </td>
<td style="text-align:right;"> 65 </td>
<td style="text-align:right;"> 4.22 </td>
<td style="text-align:right;"> 1.835 </td>
<td style="text-align:right;"> 19.90 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 1 </td>
</tr>
<tr>
<td style="text-align:left;"> Toyota Corona </td>
<td style="text-align:right;"> 21.5 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 120.1 </td>
<td style="text-align:right;"> 97 </td>
<td style="text-align:right;"> 3.70 </td>
<td style="text-align:right;"> 2.465 </td>
<td style="text-align:right;"> 20.01 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 1 </td>
</tr>
<tr>
<td style="text-align:left;"> Dodge Challenger </td>
<td style="text-align:right;"> 15.5 </td>
<td style="text-align:right;"> 8 </td>
<td style="text-align:right;"> 318.0 </td>
<td style="text-align:right;"> 150 </td>
<td style="text-align:right;"> 2.76 </td>
<td style="text-align:right;"> 3.520 </td>
<td style="text-align:right;"> 16.87 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 2 </td>
</tr>
<tr>
<td style="text-align:left;"> AMC Javelin </td>
<td style="text-align:right;"> 15.2 </td>
<td style="text-align:right;"> 8 </td>
<td style="text-align:right;"> 304.0 </td>
<td style="text-align:right;"> 150 </td>
<td style="text-align:right;"> 3.15 </td>
<td style="text-align:right;"> 3.435 </td>
<td style="text-align:right;"> 17.30 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 2 </td>
</tr>
<tr>
<td style="text-align:left;"> Camaro Z28 </td>
<td style="text-align:right;"> 13.3 </td>
<td style="text-align:right;"> 8 </td>
<td style="text-align:right;"> 350.0 </td>
<td style="text-align:right;"> 245 </td>
<td style="text-align:right;"> 3.73 </td>
<td style="text-align:right;"> 3.840 </td>
<td style="text-align:right;"> 15.41 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 4 </td>
</tr>
<tr>
<td style="text-align:left;"> Pontiac Firebird </td>
<td style="text-align:right;"> 19.2 </td>
<td style="text-align:right;"> 8 </td>
<td style="text-align:right;"> 400.0 </td>
<td style="text-align:right;"> 175 </td>
<td style="text-align:right;"> 3.08 </td>
<td style="text-align:right;"> 3.845 </td>
<td style="text-align:right;"> 17.05 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 2 </td>
</tr>
<tr>
<td style="text-align:left;"> Fiat X1-9 </td>
<td style="text-align:right;"> 27.3 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 79.0 </td>
<td style="text-align:right;"> 66 </td>
<td style="text-align:right;"> 4.08 </td>
<td style="text-align:right;"> 1.935 </td>
<td style="text-align:right;"> 18.90 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 1 </td>
</tr>
<tr>
<td style="text-align:left;"> Porsche 914-2 </td>
<td style="text-align:right;"> 26.0 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 120.3 </td>
<td style="text-align:right;"> 91 </td>
<td style="text-align:right;"> 4.43 </td>
<td style="text-align:right;"> 2.140 </td>
<td style="text-align:right;"> 16.70 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 5 </td>
<td style="text-align:right;"> 2 </td>
</tr>
<tr>
<td style="text-align:left;"> Lotus Europa </td>
<td style="text-align:right;"> 30.4 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 95.1 </td>
<td style="text-align:right;"> 113 </td>
<td style="text-align:right;"> 3.77 </td>
<td style="text-align:right;"> 1.513 </td>
<td style="text-align:right;"> 16.90 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 5 </td>
<td style="text-align:right;"> 2 </td>
</tr>
<tr>
<td style="text-align:left;"> Ford Pantera L </td>
<td style="text-align:right;"> 15.8 </td>
<td style="text-align:right;"> 8 </td>
<td style="text-align:right;"> 351.0 </td>
<td style="text-align:right;"> 264 </td>
<td style="text-align:right;"> 4.22 </td>
<td style="text-align:right;"> 3.170 </td>
<td style="text-align:right;"> 14.50 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 5 </td>
<td style="text-align:right;"> 4 </td>
</tr>
<tr>
<td style="text-align:left;"> Ferrari Dino </td>
<td style="text-align:right;"> 19.7 </td>
<td style="text-align:right;"> 6 </td>
<td style="text-align:right;"> 145.0 </td>
<td style="text-align:right;"> 175 </td>
<td style="text-align:right;"> 3.62 </td>
<td style="text-align:right;"> 2.770 </td>
<td style="text-align:right;"> 15.50 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 5 </td>
<td style="text-align:right;"> 6 </td>
</tr>
<tr>
<td style="text-align:left;"> Maserati Bora </td>
<td style="text-align:right;"> 15.0 </td>
<td style="text-align:right;"> 8 </td>
<td style="text-align:right;"> 301.0 </td>
<td style="text-align:right;"> 335 </td>
<td style="text-align:right;"> 3.54 </td>
<td style="text-align:right;"> 3.570 </td>
<td style="text-align:right;"> 14.60 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 5 </td>
<td style="text-align:right;"> 8 </td>
</tr>
<tr>
<td style="text-align:left;"> Volvo 142E </td>
<td style="text-align:right;"> 21.4 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 121.0 </td>
<td style="text-align:right;"> 109 </td>
<td style="text-align:right;"> 4.11 </td>
<td style="text-align:right;"> 2.780 </td>
<td style="text-align:right;"> 18.60 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 2 </td>
</tr>
</tbody>
</table>
<p>Note we assigned an <code>id</code> to the table, and next we use the <strong>DataTables</strong> library to tweak the table.</p>
<pre><code class="language-js"><script type="text/javascript">
$(document).ready(function() {
$('#mtcars_table').DataTable();
} );
</script>
</code></pre>
<script type="text/javascript">
$(document).ready(function() {
$('#mtcars_table').DataTable();
} );
</script>
<p>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:</p>
<pre><code class="language-r">options(markdown.html.header = system.file('misc', 'datatables.html', package = 'knitr'))
</code></pre>
<p>The file <code>datatables.html</code> under the <code>misc</code> directory of <strong>knitr</strong> was added to the HTML output.</p>
<p>By comparison, below is an ordinary table:</p>
<pre><code class="language-r">kable(head(mtcars), 'html')
</code></pre>
<table>
<thead>
<tr>
<th style="text-align:left;"> </th>
<th style="text-align:right;"> mpg </th>
<th style="text-align:right;"> cyl </th>
<th style="text-align:right;"> disp </th>
<th style="text-align:right;"> hp </th>
<th style="text-align:right;"> drat </th>
<th style="text-align:right;"> wt </th>
<th style="text-align:right;"> qsec </th>
<th style="text-align:right;"> vs </th>
<th style="text-align:right;"> am </th>
<th style="text-align:right;"> gear </th>
<th style="text-align:right;"> carb </th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left;"> Mazda RX4 </td>
<td style="text-align:right;"> 21.0 </td>
<td style="text-align:right;"> 6 </td>
<td style="text-align:right;"> 160 </td>
<td style="text-align:right;"> 110 </td>
<td style="text-align:right;"> 3.90 </td>
<td style="text-align:right;"> 2.620 </td>
<td style="text-align:right;"> 16.46 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 4 </td>
</tr>
<tr>
<td style="text-align:left;"> Mazda RX4 Wag </td>
<td style="text-align:right;"> 21.0 </td>
<td style="text-align:right;"> 6 </td>
<td style="text-align:right;"> 160 </td>
<td style="text-align:right;"> 110 </td>
<td style="text-align:right;"> 3.90 </td>
<td style="text-align:right;"> 2.875 </td>
<td style="text-align:right;"> 17.02 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 4 </td>
</tr>
<tr>
<td style="text-align:left;"> Datsun 710 </td>
<td style="text-align:right;"> 22.8 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 108 </td>
<td style="text-align:right;"> 93 </td>
<td style="text-align:right;"> 3.85 </td>
<td style="text-align:right;"> 2.320 </td>
<td style="text-align:right;"> 18.61 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 4 </td>
<td style="text-align:right;"> 1 </td>
</tr>
<tr>
<td style="text-align:left;"> Hornet 4 Drive </td>
<td style="text-align:right;"> 21.4 </td>
<td style="text-align:right;"> 6 </td>
<td style="text-align:right;"> 258 </td>
<td style="text-align:right;"> 110 </td>
<td style="text-align:right;"> 3.08 </td>
<td style="text-align:right;"> 3.215 </td>
<td style="text-align:right;"> 19.44 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 1 </td>
</tr>
<tr>
<td style="text-align:left;"> Hornet Sportabout </td>
<td style="text-align:right;"> 18.7 </td>
<td style="text-align:right;"> 8 </td>
<td style="text-align:right;"> 360 </td>
<td style="text-align:right;"> 175 </td>
<td style="text-align:right;"> 3.15 </td>
<td style="text-align:right;"> 3.440 </td>
<td style="text-align:right;"> 17.02 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 2 </td>
</tr>
<tr>
<td style="text-align:left;"> Valiant </td>
<td style="text-align:right;"> 18.1 </td>
<td style="text-align:right;"> 6 </td>
<td style="text-align:right;"> 225 </td>
<td style="text-align:right;"> 105 </td>
<td style="text-align:right;"> 2.76 </td>
<td style="text-align:right;"> 3.460 </td>
<td style="text-align:right;"> 20.22 </td>
<td style="text-align:right;"> 1 </td>
<td style="text-align:right;"> 0 </td>
<td style="text-align:right;"> 3 </td>
<td style="text-align:right;"> 1 </td>
</tr>
</tbody>
</table>
<p>This vignette is only a toy example. I’d recommend you to use the <strong>DT</strong> package instead: <a href="https://github.com/rstudio/DT">https://github.com/rstudio/DT</a></p>
</div>
<div class="include-after">
</div>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js" defer></script>
</body>
</html>