commit ce5ee4192b8bff03d556426ae2e1d0b8642580d3
author Hao Zhu <haozhu233@gmail.com> Mon Oct 23 01:14:38 2017 -0400
committer Hao Zhu <haozhu233@gmail.com> Mon Oct 23 01:14:38 2017 -0400
tree b99231a2565a85e87de05dd74f8304574c289b0a
parent 44f6c49393f4d167790135e871afe3498d66a243

update documentation

docs/use_kableExtra_with_formattable.html

diff --git a/docs/use_kableExtra_with_formattable.html b/docs/use_kableExtra_with_formattable.html
index 1dff26c..4ea68ad 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-17" />
+<meta name="date" content="2017-10-21" />
 
 <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-17</em></h4>
+<h4 class="date"><em>2017-10-21</em></h4>
 
 </div>
 
@@ -188,14 +188,12 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
 </td>
 <td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);">
-6
+<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>
 </td>
 <td style="text-align:left;">
-<div style=" font-style: italic;color: green;">
-160
-</div>
+<span style=" font-style: italic;color: green;">160</span>
 </td>
 <td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
@@ -209,14 +207,12 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
 </td>
 <td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);">
-6
+<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>
 </td>
 <td style="text-align:left;">
-<div style=" font-style: italic;color: green;">
-160
-</div>
+<span style=" font-style: italic;color: green;">160</span>
 </td>
 <td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
@@ -230,14 +226,12 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffa500">22.8</span>
 </td>
 <td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);">
-4
+<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>
 </td>
 <td style="text-align:left;">
-<div style=" font-style: italic;color: green;">
-108
-</div>
+<span style=" font-style: italic;color: green;">108</span>
 </td>
 <td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 53.14%">93</span>
@@ -251,14 +245,12 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffc357">21.4</span>
 </td>
 <td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg);">
-6
+<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>
 </td>
 <td style="text-align:left;">
-<div style=" font-weight: bold;color: red;">
-258
-</div>
+<span style=" font-weight: bold;color: red;">258</span>
 </td>
 <td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
@@ -272,14 +264,12 @@
 <span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffffff">18.7</span>
 </td>
 <td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg);">
-8
+<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>
 </td>
 <td style="text-align:left;">
-<div style=" font-weight: bold;color: red;">
-360
-</div>
+<span style=" font-weight: bold;color: red;">360</span>
 </td>
 <td style="text-align:left;width: 3cm; display: inline-block; ">
 <span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 100.00%">175</span>
@@ -296,277 +286,199 @@
   mutate_if(is.numeric, function(x){
     cell_spec(x, &quot;html&quot;, color = spec_color(x), bold = T)
   }) %&gt;%
-  kable(&quot;html&quot;, escape = F, align = &quot;c&quot;) %&gt;%
+  mutate(Species = cell_spec(Species, background = &quot;red&quot;)) %&gt;%
+  kable(&quot;html&quot;, col.names = c(&quot;A&quot;, &quot;B&quot;, &quot;C&quot;, &quot;D&quot;, &quot;DDDDDDDDDDD&quot;), escape = F, align = &quot;c&quot;) %&gt;%
   kable_styling(&quot;condensed&quot;, 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;">
-Sepal.Length
+A
 </th>
 <th style="text-align:center;">
-Sepal.Width
+B
 </th>
 <th style="text-align:center;">
-Petal.Length
+C
 </th>
 <th style="text-align:center;">
-Petal.Width
+D
 </th>
 <th style="text-align:center;">
-Species
+DDDDDDDDDDD
 </th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(66, 190, 113, 1);">
-5.1
-</div>
+<span style=" font-weight: bold;color: rgba(66, 190, 113, 1);">5.1</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);">
-3.5
-</div>
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">3.5</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);">
-1.4
-</div>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
-4.9
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">4.9</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(72, 37, 118, 1);">
-3
-</div>
+<span style=" font-weight: bold;color: rgba(72, 37, 118, 1);">3</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);">
-1.4
-</div>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(53, 95, 141, 1);">
-4.7
-</div>
+<span style=" font-weight: bold;color: rgba(53, 95, 141, 1);">4.7</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(52, 96, 141, 1);">
-3.2
-</div>
+<span style=" font-weight: bold;color: rgba(52, 96, 141, 1);">3.2</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);">
-1.3
-</div>
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">1.3</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);">
-4.6
-</div>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">4.6</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);">
-3.1
-</div>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">3.1</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
-1.5
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);">
-5
-</div>
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">5</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(68, 191, 112, 1);">
-3.6
-</div>
+<span style=" font-weight: bold;color: rgba(68, 191, 112, 1);">3.6</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);">
-1.4
-</div>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);">
-5.4
-</div>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">5.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);">
-3.9
-</div>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">3.9</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);">
-1.7
-</div>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">1.7</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);">
-0.4
-</div>
+<span style=" font-weight: bold;color: rgba(253, 231, 37, 1);">0.4</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);">
-4.6
-</div>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">4.6</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
-3.4
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">3.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);">
-1.4
-</div>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(53, 183, 121, 1);">
-0.3
-</div>
+<span style=" font-weight: bold;color: rgba(53, 183, 121, 1);">0.3</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);">
-5
-</div>
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);">5</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
-3.4
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">3.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
-1.5
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);">
-4.4
-</div>
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">4.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);">
-2.9
-</div>
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">2.9</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);">
-1.4
-</div>
+<span style=" font-weight: bold;color: rgba(59, 82, 139, 1);">1.4</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);">
-0.2
-</div>
+<span style=" font-weight: bold;color: rgba(49, 104, 142, 1);">0.2</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 <tr>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
-4.9
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">4.9</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);">
-3.1
-</div>
+<span style=" font-weight: bold;color: rgba(65, 68, 135, 1);">3.1</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);">
-1.5
-</div>
+<span style=" font-weight: bold;color: rgba(33, 144, 141, 1);">1.5</span>
 </td>
 <td style="text-align:center;">
-<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);">
-0.1
-</div>
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);">0.1</span>
 </td>
 <td style="text-align:center;">
-setosa
+<span style="border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;">setosa</span>
 </td>
 </tr>
 </tbody>