Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/Readme.md

Last active July 28, 2016 18:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timelyportfolio/d6ecbfcc6f7ce99abae3880207d62641 to your computer and use it in GitHub Desktop.
Save timelyportfolio/d6ecbfcc6f7ce99abae3880207d62641 to your computer and use it in GitHub Desktop.
Download ZIP
formattable with other js/css frameworks
Raw
Readme.md

Although formattable uses Boostrap as its CSS/JS framework, we can easily use other CSS/JS frameworks.

raw html

format_table will provide us the HTML.

library(formattable)

format_table(head(mtcars,1))

change class

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'"
)

add dependencies

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")
    )
  )
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment