Although formattable uses Boostrap as its CSS/JS framework, we can easily use other CSS/JS frameworks.
format_table will provide us the HTML.
library(formattable)
format_table(head(mtcars,1))If the JS/CSS dependencies have already been specified, then we can use the table.attr to control the class required by the framework. For instance, we can change the table to a table-striped.
library(formattable)
format_table(
head(mtcars,2),
table.attr = "class='table table-striped'"
)If we expect the formattable output to be standalone, then using htmltools, we can add dependencies and specify class (if necessary). Here is an example adding hack.css.
library(formattable)
library(htmltools)
library(pipeR)
format_table(
head(mtcars,10),
# this isn't necessary for hack.css
# since no special class required
# but we'll supply "" to table.attr
# to override formattable's default
# class = "table table-condensed"
table.attr = "",
formatters = list(mpg=normalize_bar())
) %>>%
# use HTML to indicate that it is html
HTML() %>>%
tagList() %>>%
attachDependencies(
htmlDependency(
name = "hack.css",
version = "0.5.0",
src = c(href="https://npmcdn.com/hack/dist"),
stylesheet = c("hack.css", "standard.css")
)
)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="https://npmcdn.com/hack/dist/hack.css" rel="stylesheet" />
<link href="https://npmcdn.com/hack/dist/standard.css" rel="stylesheet" />
</head>
<body style="background-color:white;">
<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;"> <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgray; width: 66.34%">21.0</span> </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;"> <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgray; width: 66.34%">21.0</span> </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;"> <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgray; width: 84.16%">22.8</span> </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;"> <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgray; width: 70.30%">21.4</span> </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;"> <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgray; width: 43.56%">18.7</span> </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;"> <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgray; width: 37.62%">18.1</span> </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;"> <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgray; width: 0.00%">14.3</span> </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;"> <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgray; width: 100.00%">24.4</span> </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;"> <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgray; width: 84.16%">22.8</span> </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;"> <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgray; width: 48.51%">19.2</span> </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>
</tbody>
</table>
</body>
</html>