fix checks & update vignette
diff --git a/DESCRIPTION b/DESCRIPTION
index 4886c5f..bafe3e9 100644
--- a/DESCRIPTION
+++ b/DESCRIPTION
@@ -35,11 +35,13 @@
readr,
scales,
viridisLite,
- stats
+ stats,
+ grDevices
Suggests:
testthat,
magick,
- formattable
+ formattable,
+ dplyr
VignetteBuilder: knitr
Encoding: UTF-8
RoxygenNote: 6.0.1
diff --git a/NAMESPACE b/NAMESPACE
index f800cc5..92a87a8 100644
--- a/NAMESPACE
+++ b/NAMESPACE
@@ -23,6 +23,7 @@
export(spec_tooltip)
export(text_spec)
export(usepackage_latex)
+importFrom(grDevices,col2rgb)
importFrom(knitr,include_graphics)
importFrom(knitr,knit_meta_add)
importFrom(magrittr,"%>%")
diff --git a/R/kableExtra-package.R b/R/kableExtra-package.R
index 0e9df80..2aa3c7b 100644
--- a/R/kableExtra-package.R
+++ b/R/kableExtra-package.R
@@ -69,6 +69,7 @@
#' @importFrom scales rescale
#' @importFrom viridisLite viridis
#' @importFrom stats ave
+#' @importFrom grDevices col2rgb
#' @name kableExtra-package
#' @aliases kableExtra
#' @docType package
diff --git a/R/spec_tools.R b/R/spec_tools.R
index bd27df4..f62f9e3 100644
--- a/R/spec_tools.R
+++ b/R/spec_tools.R
@@ -58,8 +58,8 @@
#' @param begin Smallest degree to rotate. Default is 0
#' @param end Largest degree to rotate. Default is 359.
#' @export
-spec_angle <- function(x) {
- x <- round(rescale(x, c(0, 359)))
+spec_angle <- function(x, begin, end) {
+ x <- round(rescale(x, c(begin, end)))
x[is.na(x)] <- 0
return(x)
}
diff --git a/docs/awesome_table_in_html.Rmd b/docs/awesome_table_in_html.Rmd
index 1ccb5b5..705b370 100644
--- a/docs/awesome_table_in_html.Rmd
+++ b/docs/awesome_table_in_html.Rmd
@@ -204,7 +204,7 @@
```{r}
sometext <- strsplit(paste0(
- "You can even try do do some crazy things like this paragraph. ",
+ "You can even try to make some crazy things like this paragraph. ",
"It seems to be a useless feature at this moment but who cares. ",
"It is so fun to play with color that I can't stop. ;D"
), " ")[[1]]
diff --git a/docs/awesome_table_in_html.html b/docs/awesome_table_in_html.html
index 9d66c7b..254b9d1 100644
--- a/docs/awesome_table_in_html.html
+++ b/docs/awesome_table_in_html.html
@@ -2309,7 +2309,7 @@
<p>If you check the results of <code>cell_spec</code>, you will find that this function does nothing more than wrapping the text with appropriate HTML/LaTeX formatting syntax. The result of this function is just a vector of character strings. As a result, when you are writing a <code>rmarkdown</code> document or write some text in shiny apps, if you need extra markups other than <strong>bold</strong> or <em>italic</em>, you may use this function to <span style="color: red;">color</span>, <span style="font-size: 16px;">change font size </span> or <span style="-webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); display: inline-block; "><span style>rotate</span></span> your text.</p>
<p>An aliased function <code>text_spec</code> is also provided for a more literal writing experience. In HTML, there is no difference between these two functions.</p>
<pre class="r"><code>sometext <- strsplit(paste0(
- "You can even try do do some crazy things like this paragraph. ",
+ "You can even try to make some crazy things like this paragraph. ",
"It seems to be a useless feature at this moment but who cares. ",
"It is so fun to play with color that I can't stop. ;D"
), " ")[[1]]
@@ -2319,7 +2319,7 @@
collapse = " ")
# To display the text, type `r text_formatted` outside of the chunk</code></pre>
-<p><span style="color: rgba(68, 1, 84, 1);font-size: 5px;">You</span> <span style="color: rgba(70, 10, 93, 1);font-size: 5px;">can</span> <span style="color: rgba(72, 20, 102, 1);font-size: 6px;">even</span> <span style="color: rgba(72, 28, 110, 1);font-size: 6px;">try</span> <span style="color: rgba(72, 36, 117, 1);font-size: 7px;">do</span> <span style="color: rgba(71, 43, 122, 1);font-size: 7px;">do</span> <span style="color: rgba(70, 51, 127, 1);font-size: 7px;">some</span> <span style="color: rgba(68, 58, 131, 1);font-size: 8px;">crazy</span> <span style="color: rgba(65, 65, 134, 1);font-size: 8px;">things</span> <span style="color: rgba(62, 73, 137, 1);font-size: 9px;">like</span> <span style="color: rgba(60, 80, 139, 1);font-size: 9px;">this</span> <span style="color: rgba(57, 87, 140, 1);font-size: 9px;">paragraph.</span> <span style="color: rgba(53, 94, 141, 1);font-size: 10px;">It</span> <span style="color: rgba(50, 100, 142, 1);font-size: 10px;">seems</span> <span style="color: rgba(48, 105, 142, 1);font-size: 11px;">to</span> <span style="color: rgba(45, 112, 142, 1);font-size: 11px;">be</span> <span style="color: rgba(43, 117, 142, 1);font-size: 11px;">a</span> <span style="color: rgba(41, 123, 142, 1);font-size: 12px;">useless</span> <span style="color: rgba(38, 130, 142, 1);font-size: 12px;">feature</span> <span style="color: rgba(36, 135, 142, 1);font-size: 13px;">at</span> <span style="color: rgba(34, 141, 141, 1);font-size: 13px;">this</span> <span style="color: rgba(32, 146, 140, 1);font-size: 14px;">moment</span> <span style="color: rgba(31, 153, 138, 1);font-size: 14px;">but</span> <span style="color: rgba(31, 159, 136, 1);font-size: 14px;">who</span> <span style="color: rgba(32, 163, 134, 1);font-size: 15px;">cares.</span> <span style="color: rgba(36, 170, 131, 1);font-size: 15px;">It</span> <span style="color: rgba(41, 175, 127, 1);font-size: 16px;">is</span> <span style="color: rgba(49, 181, 123, 1);font-size: 16px;">so</span> <span style="color: rgba(59, 187, 117, 1);font-size: 16px;">fun</span> <span style="color: rgba(70, 192, 111, 1);font-size: 17px;">to</span> <span style="color: rgba(83, 197, 105, 1);font-size: 17px;">play</span> <span style="color: rgba(95, 202, 97, 1);font-size: 18px;">with</span> <span style="color: rgba(110, 206, 88, 1);font-size: 18px;">color</span> <span style="color: rgba(123, 209, 81, 1);font-size: 18px;">that</span> <span style="color: rgba(138, 214, 71, 1);font-size: 19px;">I</span> <span style="color: rgba(155, 217, 60, 1);font-size: 19px;">can’t</span> <span style="color: rgba(171, 220, 50, 1);font-size: 20px;">stop.</span> <span style="color: rgba(187, 223, 39, 1);font-size: 20px;">;D</span></p>
+<p><span style="color: rgba(68, 1, 84, 1);font-size: 5px;">You</span> <span style="color: rgba(70, 10, 93, 1);font-size: 5px;">can</span> <span style="color: rgba(72, 20, 102, 1);font-size: 6px;">even</span> <span style="color: rgba(72, 28, 110, 1);font-size: 6px;">try</span> <span style="color: rgba(72, 36, 117, 1);font-size: 7px;">to</span> <span style="color: rgba(71, 43, 122, 1);font-size: 7px;">make</span> <span style="color: rgba(70, 51, 127, 1);font-size: 7px;">some</span> <span style="color: rgba(68, 58, 131, 1);font-size: 8px;">crazy</span> <span style="color: rgba(65, 65, 134, 1);font-size: 8px;">things</span> <span style="color: rgba(62, 73, 137, 1);font-size: 9px;">like</span> <span style="color: rgba(60, 80, 139, 1);font-size: 9px;">this</span> <span style="color: rgba(57, 87, 140, 1);font-size: 9px;">paragraph.</span> <span style="color: rgba(53, 94, 141, 1);font-size: 10px;">It</span> <span style="color: rgba(50, 100, 142, 1);font-size: 10px;">seems</span> <span style="color: rgba(48, 105, 142, 1);font-size: 11px;">to</span> <span style="color: rgba(45, 112, 142, 1);font-size: 11px;">be</span> <span style="color: rgba(43, 117, 142, 1);font-size: 11px;">a</span> <span style="color: rgba(41, 123, 142, 1);font-size: 12px;">useless</span> <span style="color: rgba(38, 130, 142, 1);font-size: 12px;">feature</span> <span style="color: rgba(36, 135, 142, 1);font-size: 13px;">at</span> <span style="color: rgba(34, 141, 141, 1);font-size: 13px;">this</span> <span style="color: rgba(32, 146, 140, 1);font-size: 14px;">moment</span> <span style="color: rgba(31, 153, 138, 1);font-size: 14px;">but</span> <span style="color: rgba(31, 159, 136, 1);font-size: 14px;">who</span> <span style="color: rgba(32, 163, 134, 1);font-size: 15px;">cares.</span> <span style="color: rgba(36, 170, 131, 1);font-size: 15px;">It</span> <span style="color: rgba(41, 175, 127, 1);font-size: 16px;">is</span> <span style="color: rgba(49, 181, 123, 1);font-size: 16px;">so</span> <span style="color: rgba(59, 187, 117, 1);font-size: 16px;">fun</span> <span style="color: rgba(70, 192, 111, 1);font-size: 17px;">to</span> <span style="color: rgba(83, 197, 105, 1);font-size: 17px;">play</span> <span style="color: rgba(95, 202, 97, 1);font-size: 18px;">with</span> <span style="color: rgba(110, 206, 88, 1);font-size: 18px;">color</span> <span style="color: rgba(123, 209, 81, 1);font-size: 18px;">that</span> <span style="color: rgba(138, 214, 71, 1);font-size: 19px;">I</span> <span style="color: rgba(155, 217, 60, 1);font-size: 19px;">can’t</span> <span style="color: rgba(171, 220, 50, 1);font-size: 20px;">stop.</span> <span style="color: rgba(187, 223, 39, 1);font-size: 20px;">;D</span></p>
</div>
<div id="tooltip" class="section level2">
<h2>Tooltip</h2>
@@ -3422,7 +3422,7 @@
4
</td>
<td style="text-align:center;">
-1
+0
</td>
</tr>
<tr>
@@ -3430,7 +3430,7 @@
5
</td>
<td style="text-align:center;">
-1
+0
</td>
</tr>
<tr>
@@ -3446,7 +3446,7 @@
7
</td>
<td style="text-align:center;">
-1
+0
</td>
</tr>
<tr>
@@ -3465,7 +3465,7 @@
9
</td>
<td style="text-align:center;">
-1
+0
</td>
</tr>
<tr>
@@ -3495,7 +3495,7 @@
12
</td>
<td style="text-align:center;">
-0
+1
</td>
</tr>
<tr>
@@ -3506,7 +3506,7 @@
13
</td>
<td style="text-align:center;">
-0
+1
</td>
</tr>
<tr>
diff --git a/docs/awesome_table_in_pdf.Rmd b/docs/awesome_table_in_pdf.Rmd
index 7141ebc..52da10b 100644
--- a/docs/awesome_table_in_pdf.Rmd
+++ b/docs/awesome_table_in_pdf.Rmd
@@ -257,7 +257,7 @@
```{r}
sometext <- strsplit(paste0(
- "You can even try do do some crazy things like this paragraph. ",
+ "You can even try to make some crazy things like this paragraph. ",
"It seems to be a useless feature at this moment but who cares. ",
"It is so fun to play with color that I can't stop. ;D"
), " ")[[1]]
diff --git a/docs/awesome_table_in_pdf.pdf b/docs/awesome_table_in_pdf.pdf
index 975a248..9039871 100644
--- a/docs/awesome_table_in_pdf.pdf
+++ b/docs/awesome_table_in_pdf.pdf
Binary files differ
diff --git a/docs/use_kableExtra_with_formattable.Rmd b/docs/use_kableExtra_with_formattable.Rmd
index 99f8c2f..e19dd2f 100644
--- a/docs/use_kableExtra_with_formattable.Rmd
+++ b/docs/use_kableExtra_with_formattable.Rmd
@@ -37,19 +37,24 @@
Also, if you are using it in this way, make sure you put `escape = F` in `kable`.
-On the other hand, `cell_spec()` is a new function in `kableExtra()` to format cells _**before you pipe the table into `kable`**_. Note that you can either specify format (`html` or `latex`) in function or do that via `options(knitr.table.format)` so you don't need to do it everytime.
+On the other hand, `cell_spec()` is a new function in `kableExtra()` to format cells _**before you pipe the table into `kable`**_. Note that you can either specify format (`html` or `latex`) in function or do that via `options(knitr.table.format)` so you don't need to do it everytime. Please refer to the package vignette for details.
-***
-
-I also added a few helper functions to use together with cell_spec. One good example is `spec_color`, which gives you the ability to use viridis color map in your table. Others include `spec_font_size` and `spec_angle`.
+<script>
+$(document).ready(function(){
+ $('[data-toggle="tooltip"]').tooltip();
+});
+</script>
```{r}
iris[1:10, ] %>%
+ mutate(
+ Species = cell_spec(Species, color = spec_color(1:10, option = "A"), link = "#",
+ tooltip = paste0("Sepal Length: ", Sepal.Length))
+ ) %>%
mutate_if(is.numeric, function(x){
- cell_spec(x, "html", color = spec_color(x), bold = T)
+ cell_spec(x, "html", color = spec_color(x), font_size = spec_font_size(x), bold = T)
}) %>%
- mutate(Species = cell_spec(Species, background = "red")) %>%
- kable("html", col.names = c("A", "B", "C", "D", "DDDDDDDDDDD"), escape = F, align = "c") %>%
+ kable("html", escape = F, align = "c") %>%
kable_styling("condensed", full_width = F)
```
diff --git a/docs/use_kableExtra_with_formattable.html b/docs/use_kableExtra_with_formattable.html
index 4ea68ad..6d5006c 100644
--- a/docs/use_kableExtra_with_formattable.html
+++ b/docs/use_kableExtra_with_formattable.html
@@ -11,7 +11,7 @@
<meta name="author" content="Hao Zhu" />
-<meta name="date" content="2017-10-21" />
+<meta name="date" content="2017-10-24" />
<title>Use kableExtra with formattable</title>
@@ -119,7 +119,7 @@
<h1 class="title toc-ignore">Use kableExtra with formattable</h1>
<h4 class="author"><em>Hao Zhu</em></h4>
-<h4 class="date"><em>2017-10-21</em></h4>
+<h4 class="date"><em>2017-10-24</em></h4>
</div>
@@ -188,9 +188,7 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
</td>
<td style="text-align:left;">
-<div style="-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);">
-<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span>
-</div>
+<span style="-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span></span>
</td>
<td style="text-align:left;">
<span style=" font-style: italic;color: green;">160</span>
@@ -207,9 +205,7 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
</td>
<td style="text-align:left;">
-<div style="-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);">
-<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span>
-</div>
+<span style="-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span></span>
</td>
<td style="text-align:left;">
<span style=" font-style: italic;color: green;">160</span>
@@ -226,9 +222,7 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffa500">22.8</span>
</td>
<td style="text-align:left;">
-<div style="-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);">
-<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">4</span>
-</div>
+<span style="-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">4</span></span>
</td>
<td style="text-align:left;">
<span style=" font-style: italic;color: green;">108</span>
@@ -245,9 +239,7 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffc357">21.4</span>
</td>
<td style="text-align:left;">
-<div style="-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg);">
-<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span>
-</div>
+<span style="-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">6</span></span>
</td>
<td style="text-align:left;">
<span style=" font-weight: bold;color: red;">258</span>
@@ -264,9 +256,7 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffffff">18.7</span>
</td>
<td style="text-align:left;">
-<div style="-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg);">
-<span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">8</span>
-</div>
+<span style="-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;">8</span></span>
</td>
<td style="text-align:left;">
<span style=" font-weight: bold;color: red;">360</span>
@@ -279,206 +269,212 @@
</table>
<p>Here is a little bit more explanation. Both <code>formattable::color_tile</code> and <code>formattable::color_bar</code> returns a function object which can take a numeric vector. That’s why you can put things like <code>(mpg)</code> after <code>color_tile("white", "orange")</code> as you can see in the <code>mutate</code> function. This way of using the function may look a little odd but is totally valid (, I think :P).</p>
<p>Also, if you are using it in this way, make sure you put <code>escape = F</code> in <code>kable</code>.</p>
-<p>On the other hand, <code>cell_spec()</code> is a new function in <code>kableExtra()</code> to format cells <em><strong>before you pipe the table into <code>kable</code></strong></em>. Note that you can either specify format (<code>html</code> or <code>latex</code>) in function or do that via <code>options(knitr.table.format)</code> so you don’t need to do it everytime.</p>
-<hr />
-<p>I also added a few helper functions to use together with cell_spec. One good example is <code>spec_color</code>, which gives you the ability to use viridis color map in your table. Others include <code>spec_font_size</code> and <code>spec_angle</code>.</p>
+<p>On the other hand, <code>cell_spec()</code> is a new function in <code>kableExtra()</code> to format cells <em><strong>before you pipe the table into <code>kable</code></strong></em>. Note that you can either specify format (<code>html</code> or <code>latex</code>) in function or do that via <code>options(knitr.table.format)</code> so you don’t need to do it everytime. Please refer to the package vignette for details.</p>
+<script>
+$(document).ready(function(){
+ $('[data-toggle="tooltip"]').tooltip();
+});
+</script>
<pre class="r"><code>iris[1:10, ] %>%
+ mutate(
+ Species = cell_spec(Species, color = spec_color(1:10, option = "A"), link = "#",
+ tooltip = paste0("Sepal Length: ", Sepal.Length))
+ ) %>%
mutate_if(is.numeric, function(x){
- cell_spec(x, "html", color = spec_color(x), bold = T)
+ cell_spec(x, "html", color = spec_color(x), font_size = spec_font_size(x), bold = T)
}) %>%
- mutate(Species = cell_spec(Species, background = "red")) %>%
- kable("html", col.names = c("A", "B", "C", "D", "DDDDDDDDDDD"), escape = F, align = "c") %>%
+ kable("html", escape = F, align = "c") %>%
kable_styling("condensed", full_width = F)</code></pre>
<pre><code>## Setting cell_spec format as html</code></pre>
<table class="table table-condensed" style="width: auto !important; margin-left: auto; margin-right: auto;">
<thead>
<tr>
<th style="text-align:center;">
-A
+Sepal.Length
</th>
<th style="text-align:center;">
-B
+Sepal.Width
</th>
<th style="text-align:center;">
-C
+Petal.Length
</th>
<th style="text-align:center;">
-D
+Petal.Width
</th>
<th style="text-align:center;">
-DDDDDDDDDDD
+Species
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(66, 190, 113, 1);">5.1</span>
+<span style=" font-weight: bold;color: rgba(66, 190, 113, 1);font-size: 14px;">5.1</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">3.5</span>
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 13px;">3.5</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 10px;">1.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 11px;">0.2</span>
</td>
<td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(0, 0, 4, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 5.1">setosa</a>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">4.9</span>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 12px;">4.9</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(72, 37, 118, 1);">3</span>
+<span style=" font-weight: bold;color: rgba(72, 37, 118, 1);font-size: 9px;">3</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 10px;">1.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 11px;">0.2</span>
</td>
<td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(24, 15, 61, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 4.9">setosa</a>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(53, 95, 141, 1);">4.7</span>
+<span style=" font-weight: bold;color: rgba(53, 95, 141, 1);font-size: 10px;">4.7</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(52, 96, 141, 1);">3.2</span>
+<span style=" font-weight: bold;color: rgba(52, 96, 141, 1);font-size: 10px;">3.2</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">1.3</span>
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 8px;">1.3</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 11px;">0.2</span>
</td>
<td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(69, 16, 119, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 4.7">setosa</a>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">4.6</span>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 10px;">4.6</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">3.1</span>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 10px;">3.1</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 12px;">1.5</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 11px;">0.2</span>
</td>
<td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(114, 31, 129, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 4.6">setosa</a>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">5</span>
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 13px;">5</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(68, 191, 112, 1);">3.6</span>
+<span style=" font-weight: bold;color: rgba(68, 191, 112, 1);font-size: 14px;">3.6</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 10px;">1.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 11px;">0.2</span>
</td>
<td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(158, 47, 127, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 5">setosa</a>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">5.4</span>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 16px;">5.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">3.9</span>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 16px;">3.9</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">1.7</span>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 16px;">1.7</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">0.4</span>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 16px;">0.4</span>
</td>
<td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(205, 64, 113, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 5.4">setosa</a>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">4.6</span>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 10px;">4.6</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">3.4</span>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 12px;">3.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 10px;">1.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(53, 183, 121, 1);">0.3</span>
+<span style=" font-weight: bold;color: rgba(53, 183, 121, 1);font-size: 13px;">0.3</span>
</td>
<td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(241, 96, 93, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 4.6">setosa</a>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">5</span>
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 13px;">5</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">3.4</span>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 12px;">3.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 12px;">1.5</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 11px;">0.2</span>
</td>
<td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(253, 148, 103, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 5">setosa</a>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">4.4</span>
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 8px;">4.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">2.9</span>
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 8px;">2.9</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 10px;">1.4</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 11px;">0.2</span>
</td>
<td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(254, 202, 141, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 4.4">setosa</a>
</td>
</tr>
<tr>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">4.9</span>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 12px;">4.9</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">3.1</span>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 10px;">3.1</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 12px;">1.5</span>
</td>
<td style="text-align:center;">
-<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">0.1</span>
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 8px;">0.1</span>
</td>
<td style="text-align:center;">
-<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
+<a href="#" style="color: rgba(252, 253, 191, 1);" data-toggle="tooltip" data-placement="right" title="Sepal Length: 4.9">setosa</a>
</td>
</tr>
</tbody>
diff --git a/man/spec_angle.Rd b/man/spec_angle.Rd
index 6bef9bb..5df2b13 100644
--- a/man/spec_angle.Rd
+++ b/man/spec_angle.Rd
@@ -4,7 +4,7 @@
\alias{spec_angle}
\title{Generate rotation angle for continuous values}
\usage{
-spec_angle(x)
+spec_angle(x, begin, end)
}
\arguments{
\item{x}{continuous vectors of values}
diff --git a/vignettes/awesome_table_in_html.Rmd b/vignettes/awesome_table_in_html.Rmd
index e042f65..705b370 100644
--- a/vignettes/awesome_table_in_html.Rmd
+++ b/vignettes/awesome_table_in_html.Rmd
@@ -143,6 +143,135 @@
row_spec(3:5, bold = T, color = "white", background = "#D7261E")
```
+
+
+## Header Rows
+One special case of `row_spec` is that you can specify the format of the header row via `row_spec(row = 0, ...)`.
+```{r}
+kable(dt, format = "html") %>%
+ kable_styling("striped", full_width = F) %>%
+ row_spec(0, angle = -45)
+```
+
+# Cell/Text Specification
+Function `cell_spec` is introduced in version 0.6.0 of `kableExtra`. Unlike `column_spec` and `row_spec`, **this function is designed to be used before the data.frame gets into the `kable` function**. Comparing with figuring out a list of 2 dimentional index for targeted cells, this design is way easier to learn and use and it fits perfectly well with `dplyr`'s `mutate` and `summarize` functions. With this design, there are two things to be noted:
+* Since `cell_spec` generates raw `HTML` or `LaTeX` code, make sure you remember to put `escape = FALSE` in `kable`. At the same time, you have to escape special symbols including `%` manually by yourself
+* `cell_spec` needs a way to know whether you want `html` or `latex`. You can specify it locally in function or globally via the `options(knitr.table.format = "latex")` method as suggested at the beginning. If you don't provide anything, this function will output as HTML by default.
+
+Currently, `cell_spec` supports features including bold, italic, monospace, text color, background color, align, font size & rotation angle. More features may be added in the future. Please see function documentations as reference.
+
+## Conditional logic
+It is very easy to use `cell_spec` with conditional logic. Here is an example.
+```{r, message=FALSE, warning=FALSE}
+library(dplyr)
+mtcars[1:10, 1:2] %>%
+ mutate(
+ car = row.names(.),
+ # You don't need format = "html" if you have ever defined options(knitr.table.format)
+ mpg = cell_spec(mpg, "html", color = ifelse(mpg > 20, "red", "blue")),
+ cyl = cell_spec(cyl, "html", color = "white", align = "c", angle = 45,
+ background = factor(cyl, c(4, 6, 8),
+ c("#666666", "#999999", "#BBBBBB")))
+ ) %>%
+ select(car, mpg, cyl) %>%
+ kable("html", escape = F) %>%
+ kable_styling("striped", full_width = F)
+```
+
+## Visualize data with Viridis Color
+This package also comes with a few helper functions, including `spec_color`, `spec_font_size` & `spec_angle`. These functions can rescale continuous variables to certain scales. For example, function `spec_color` would map a continuous variable to any [viridis color palettes](https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html). It offers a very visually impactful representation in a tabular format.
+
+```{r}
+iris[1:10, ] %>%
+ mutate_if(is.numeric, function(x) {
+ cell_spec(x, "html", bold = T, color = spec_color(x, end = 0.9),
+ font_size = spec_font_size(x))
+ }) %>%
+ mutate(Species = cell_spec(
+ Species, "html", color = "white", bold = T,
+ background = spec_color(1:10, end = 0.9, option = "A", direction = -1)
+ )) %>%
+ kable("html", escape = F, align = "c") %>%
+ kable_styling("striped", full_width = F)
+```
+
+In the example above, I'm using the `mutate` functions from `dplyr`. You don't have to use it. Base R solutions like `iris$Species <- cell_spec(iris$Species, color = "red")` also works.
+
+## Text Specification
+If you check the results of `cell_spec`, you will find that this function does nothing more than wrapping the text with appropriate HTML/LaTeX formatting syntax. The result of this function is just a vector of character strings. As a result, when you are writing a `rmarkdown` document or write some text in shiny apps, if you need extra markups other than **bold** or *italic*, you may use this function to `r text_spec("color", color = "red")`, `r text_spec("change font size ", font_size = 16)` or `r text_spec("rotate", angle = 30)` your text.
+
+An aliased function `text_spec` is also provided for a more literal writing experience. In HTML, there is no difference between these two functions.
+
+```{r}
+sometext <- strsplit(paste0(
+ "You can even try to make some crazy things like this paragraph. ",
+ "It seems to be a useless feature at this moment but who cares. ",
+ "It is so fun to play with color that I can't stop. ;D"
+), " ")[[1]]
+text_formatted <- paste(
+ text_spec(sometext, "html", color = spec_color(1:length(sometext), end = 0.9),
+ font_size = spec_font_size(1:length(sometext), begin = 5, end = 20)),
+ collapse = " ")
+
+# To display the text, type `r text_formatted` outside of the chunk
+```
+`r text_formatted`
+
+## Tooltip
+It's very easy to add a tooltip to text via `cell_spec`. For example, `text_spec("tooltip", color = "red", tooltip = "Hello World")` will give you something like `r text_spec("Hover over me", color = "red", tooltip = "Hello World")` (you need to wait for a few seconds before your browser renders it).
+
+Note that the original browser-based tooltip is slow. If you want to have a faster response, you may want to initialize bootstrap's tooltip by putting the following HTML code on the page.
+```
+<script>
+$(document).ready(function(){
+ $('[data-toggle="tooltip"]').tooltip();
+});
+</script>
+```
+
+In a rmarkdown document, you can just drop it outside of any R chunks. Unfortunately however, for rmarkdown pages with a **floating TOC** (like this page), you can't use bootstrap tooltips because there is a conflict in namespace between Bootstrap and JQueryUI (tocify.js). As a result, I can't provide a live demo here. If you want to have a tooltip together with a floating TOC, you should use `popover` which has a very similar effect.
+
+
+
+## Popover Message
+The popover message looks very similar with tooltip but it can hold more contents. Unlike tooltip which can minimally work without you manually enable that module, you **have to** enable the `popover` module to get it work. The upper side is that there is no conflict between Bootstrap & JQueryUI this time, you can use it without any concern.
+
+```
+<script>
+$(document).ready(function(){
+ $('[data-toggle="popover"]').popover();
+});
+</script>
+```
+
+<script>
+$(document).ready(function(){
+ $('[data-toggle="popover"]').popover();
+});
+</script>
+
+```{r}
+popover_dt <- data.frame(
+ position = c("top", "bottom", "right", "left"),
+ stringsAsFactors = FALSE
+)
+popover_dt$`Hover over these items` <- cell_spec(
+ paste("Message on", popover_dt$position), # Cell texts
+ popover = spec_popover(
+ content = popover_dt$position,
+ title = NULL, # title will add a Title Panel on top
+ position = popover_dt$position
+ ))
+kable(popover_dt, "html", escape = FALSE) %>%
+ kable_styling("striped", full_width = FALSE)
+```
+
+## Links
+You can add links to text via `text_spec("Google", link = "https://google.com")`: `r text_spec("Google", link = "https://google.com")`. If you want your hover message to be more obvious, it might be a good idea to put a `#` in the `link` option.
+`text_spec("Hover on me", link = "#", popover = "Hello")`:
+`r text_spec("Hover on me", link = "#", popover = "Hello")`
+
+
# Grouped Columns / Rows
## Add header rows to group columns
Tables with multi-row headers can be very useful to demonstrate grouped data. To do that, you can pipe your kable object into `add_header_above()`. The header variable is supposed to be a named character with the names as new column names and values as column span. For your convenience, if column span equals to 1, you can ignore the `=1` part so the function below can be written as `add_header_above(c(" ", "Group 1" = 2, "Group 2" = 2, "Group 3" = 2)).
diff --git a/vignettes/awesome_table_in_pdf.Rmd b/vignettes/awesome_table_in_pdf.Rmd
index 18cb068..52da10b 100644
--- a/vignettes/awesome_table_in_pdf.Rmd
+++ b/vignettes/awesome_table_in_pdf.Rmd
@@ -65,9 +65,9 @@
library(kableExtra)
```
-If you are using R Sweave, beamer, tufte or some customized rmarkdown templates, you can put the following meta data into the `yaml` section. If you are familar with LaTeX and you know what you are doing, feel free to remove unnecessary packages from the list.
+If you are using R Sweave, beamer, R package vignette template, tufte or some customized rmarkdown templates, you can put the following meta data into the `yaml` section. If you are familar with LaTeX and you know what you are doing, feel free to remove unnecessary packages from the list.
-```{yaml}
+```
header-includes:
- \usepackage{booktabs}
- \usepackage{longtable}
@@ -85,7 +85,7 @@
## Plain LaTeX
Plain LaTeX table looks relatively ugly in 2017.
```{r}
-kable(dt, format = "latex")
+kable(dt)
```
## LaTeX table with booktabs
@@ -198,6 +198,78 @@
row_spec(3:5, bold = T, color = "white", background = "black")
```
+## Header Rows
+One special case of `row_spec` is that you can specify the format of the header row via `row_spec(row = 0, ...)`.
+```{r}
+kable(dt, format = "latex", booktabs = T, align = "c") %>%
+ kable_styling(latex_options = "striped", full_width = F) %>%
+ row_spec(0, angle = 45)
+```
+
+
+
+# Cell/Text Specification
+Function `cell_spec` is introduced in version 0.6.0 of `kableExtra`. Unlike `column_spec` and `row_spec`, **this function is designed to be used before the data.frame gets into the `kable` function**. Comparing with figuring out a list of 2 dimentional index for targeted cells, this design is way easier to learn and use and it fits perfectly well with `dplyr`'s `mutate` and `summarize` functions. With this design, there are two things to be noted:
+* Since `cell_spec` generates raw `HTML` or `LaTeX` code, make sure you remember to put `escape = FALSE` in `kable`. At the same time, you have to escape special symbols including `%` manually by yourself
+* `cell_spec` needs a way to know whether you want `html` or `latex`. You can specify it locally in function or globally via the `options(knitr.table.format = "latex")` method as suggested at the beginning. If you don't provide anything, this function will output as HTML by default.
+
+Currently, `cell_spec` supports features including bold, italic, monospace, text color, background color, align, font size & rotation angle. More features may be added in the future. Please see function documentations as reference.
+
+## Conditional logic
+It is very easy to use `cell_spec` with conditional logic. Here is an example.
+```{r, message=FALSE, warning=FALSE}
+library(dplyr)
+mtcars[1:10, 1:2] %>%
+ mutate(
+ car = row.names(.),
+ # You don't need format = "latex" if you have ever defined options(knitr.table.format)
+ mpg = cell_spec(mpg, "latex", color = ifelse(mpg > 20, "red", "blue")),
+ cyl = cell_spec(cyl, "latex", color = "white", align = "c", angle = 45,
+ background = factor(cyl, c(4, 6, 8),
+ c("#666666", "#999999", "#BBBBBB")))
+ ) %>%
+ select(car, mpg, cyl) %>%
+ kable("latex", escape = F, booktabs = T, linesep = "")
+```
+
+## Visualize data with Viridis Color
+This package also comes with a few helper functions, including `spec_color`, `spec_font_size` & `spec_angle`. These functions can rescale continuous variables to certain scales. For example, function `spec_color` would map a continuous variable to any [viridis color palettes](https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html). It offers a very visually impactful representation in a tabular format.
+
+```{r}
+iris[1:10, ] %>%
+ mutate_if(is.numeric, function(x) {
+ cell_spec(x, "latex", bold = T, color = spec_color(x, end = 0.9),
+ font_size = spec_font_size(x))
+ }) %>%
+ mutate(Species = cell_spec(
+ Species, "latex", color = "white", bold = T,
+ background = spec_color(1:10, end = 0.9, option = "A", direction = -1)
+ )) %>%
+ kable("latex", escape = F, booktabs = T, linesep = "", align = "c")
+```
+
+In the example above, I'm using the `mutate` functions from `dplyr`. You don't have to use it. Base R solutions like `iris$Species <- cell_spec(iris$Species, color = "red")` also works.
+
+## Text Specification
+If you check the results of `cell_spec`, you will find that this function does nothing more than wrapping the text with appropriate HTML/LaTeX formatting syntax. The result of this function is just a vector of character strings. As a result, when you are writing a `rmarkdown` document or write some text in shiny apps, if you need extra markups other than **bold** or *italic*, you may use this function to `r text_spec("color", color = "red")`, `r text_spec("change font size ", font_size = 16)` or `r text_spec("rotate", angle = 30)` your text.
+
+An aliased function `text_spec` is also provided for a more literal writing experience. The only difference is that in LaTeX, unless you specify `latex_background_in_cell = FALSE` (default is `TRUE`) in `cell_spec`, it will define cell background color as `\cellcolor{}`, which doesn't work outside of a table, while for `text_spec`, the default value for `latex_background_in_cell` is `FALSE`.
+
+```{r}
+sometext <- strsplit(paste0(
+ "You can even try to make some crazy things like this paragraph. ",
+ "It seems to be a useless feature at this moment but who cares. ",
+ "It is so fun to play with color that I can't stop. ;D"
+), " ")[[1]]
+text_formatted <- paste(
+ text_spec(sometext, "latex", color = spec_color(1:length(sometext), end = 0.9),
+ font_size = spec_font_size(1:length(sometext), begin = 5, end = 20)),
+ collapse = " ")
+
+# To display the text, type `r text_formatted` outside of the chunk
+```
+`r text_formatted`
+
# Grouped Columns / Rows
## Add header rows to group columns
Tables with multi-row headers can be very useful to demonstrate grouped data. To do that, you can pipe your kable object into `add_header_above()`. The header variable is supposed to be a named character with the names as new column names and values as column span. For your convenience, if column span equals to 1, you can ignore the `=1` part so the function below can be written as `add_header_above(c(" ", "Group 1" = 2, "Group 2" = 2, "Group 3" = 2)).
@@ -207,7 +279,7 @@
add_header_above(c(" " = 1, "Group 1" = 2, "Group 2" = 2, "Group 3" = 2))
```
-In fact, if you want to add another row of header on top, please feel free to do so. Also, in kableExtra 0.3.0, you can specify `bold` & `italic` as you do in `row_spec()`.
+In fact, if you want to add another row of header on top, please feel free to do so. Also, since kableExtra 0.3.0, you can specify `bold` & `italic` as you do in `row_spec()`.
```{r}
kable(dt, format = "latex", booktabs = T) %>%
kable_styling(latex_options = "striped") %>%
diff --git a/vignettes/use_kableExtra_with_formattable.Rmd b/vignettes/use_kableExtra_with_formattable.Rmd
new file mode 100644
index 0000000..641fe78
--- /dev/null
+++ b/vignettes/use_kableExtra_with_formattable.Rmd
@@ -0,0 +1,63 @@
+---
+title: "Use kableExtra with formattable"
+author: "Hao Zhu"
+date: "`r Sys.Date()`"
+output: html_document
+vignette: >
+ %\VignetteIndexEntry{Use kableExtra with formattable}
+ %\VignetteEngine{knitr::rmarkdown}
+ %\VignetteEncoding{UTF-8}
+---
+
+I know you love `formattable`'s `color_tile` and `color_bar`. I do too. In my mind, these two features are among the best visualization methods in a tabular format. You may wonder if it's possible use it together with `kableExtra` so you can have a nested table with awesome presentation at the same time. Here is how.
+
+```{r, message=FALSE, warning=FALSE}
+library(knitr)
+library(kableExtra)
+library(formattable)
+library(dplyr)
+```
+
+```{r}
+mtcars[1:5, 1:4] %>%
+ mutate(
+ car = row.names(.),
+ mpg = color_tile("white", "orange")(mpg),
+ cyl = cell_spec(cyl, "html", angle = (1:5)*60,
+ background = "red", color = "white", align = "center"),
+ disp = ifelse(disp > 200,
+ cell_spec(disp, "html", color = "red", bold = T),
+ cell_spec(disp, "html", color = "green", italic = T)),
+ hp = color_bar("lightgreen")(hp)
+ ) %>%
+ select(car, everything()) %>%
+ kable("html", escape = F) %>%
+ kable_styling("hover", full_width = F) %>%
+ column_spec(5, width = "3cm") %>%
+ add_header_above(c(" ", "Hello" = 2, "World" = 2))
+```
+
+Here is a little bit more explanation. Both `formattable::color_tile` and `formattable::color_bar` returns a function object which can take a numeric vector. That's why you can put things like `(mpg)` after `color_tile("white", "orange")` as you can see in the `mutate` function. This way of using the function may look a little odd but is totally valid (, I think :P).
+
+Also, if you are using it in this way, make sure you put `escape = F` in `kable`.
+
+On the other hand, `cell_spec()` is a new function in `kableExtra()` to format cells _**before you pipe the table into `kable`**_. Note that you can either specify format (`html` or `latex`) in function or do that via `options(knitr.table.format)` so you don't need to do it everytime. Please refer to the package vignette for details.
+
+<script>
+$(document).ready(function(){
+ $('[data-toggle="tooltip"]').tooltip();
+});
+</script>
+
+```{r}
+iris[1:10, ] %>%
+ mutate(
+ Species = cell_spec(Species, color = spec_color(1:10, option = "A"), link = "#",
+ tooltip = paste0("Sepal Length: ", Sepal.Length))
+ ) %>%
+ mutate_if(is.numeric, function(x){
+ cell_spec(x, "html", color = spec_color(x), font_size = spec_font_size(x), bold = T)
+ }) %>%
+ kable("html", escape = F, align = "c") %>%
+ kable_styling("condensed", full_width = F)
+```