Hao Zhu | c145088 | 2018-10-03 17:56:26 -0400 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <html > |
| 3 | |
| 4 | <head> |
| 5 | |
| 6 | <meta charset="UTF-8"> |
| 7 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
Hao Zhu | c859dba | 2018-10-03 18:05:55 -0400 | [diff] [blame] | 8 | <title>Using kableExtra in Bookdown</title> |
Hao Zhu | c145088 | 2018-10-03 17:56:26 -0400 | [diff] [blame] | 9 | <meta name="description" content="This example provides documentations for using kableExtra to customize tables in bookdown projects."> |
| 10 | <meta name="generator" content="bookdown and GitBook 2.6.7"> |
| 11 | |
Hao Zhu | c859dba | 2018-10-03 18:05:55 -0400 | [diff] [blame] | 12 | <meta property="og:title" content="Using kableExtra in Bookdown" /> |
Hao Zhu | c145088 | 2018-10-03 17:56:26 -0400 | [diff] [blame] | 13 | <meta property="og:type" content="book" /> |
| 14 | |
| 15 | |
| 16 | <meta property="og:description" content="This example provides documentations for using kableExtra to customize tables in bookdown projects." /> |
| 17 | |
| 18 | |
| 19 | <meta name="twitter:card" content="summary" /> |
Hao Zhu | c859dba | 2018-10-03 18:05:55 -0400 | [diff] [blame] | 20 | <meta name="twitter:title" content="Using kableExtra in Bookdown" /> |
Hao Zhu | c145088 | 2018-10-03 17:56:26 -0400 | [diff] [blame] | 21 | |
| 22 | <meta name="twitter:description" content="This example provides documentations for using kableExtra to customize tables in bookdown projects." /> |
| 23 | |
| 24 | |
| 25 | <meta name="author" content="Hao Zhu"> |
| 26 | |
| 27 | |
Hao Zhu | b809805 | 2018-10-08 16:57:43 -0400 | [diff] [blame^] | 28 | <meta name="date" content="2018-10-08"> |
Hao Zhu | c145088 | 2018-10-03 17:56:26 -0400 | [diff] [blame] | 29 | |
| 30 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 31 | <meta name="apple-mobile-web-app-capable" content="yes"> |
| 32 | <meta name="apple-mobile-web-app-status-bar-style" content="black"> |
| 33 | |
| 34 | |
| 35 | <link rel="prev" href="index.html"> |
| 36 | <link rel="next" href="use-bootstrap-tables-in-gitbooks-epub.html"> |
| 37 | <script src="libs/jquery-2.2.3/jquery.min.js"></script> |
| 38 | <link href="libs/gitbook-2.6.7/css/style.css" rel="stylesheet" /> |
| 39 | <link href="libs/gitbook-2.6.7/css/plugin-bookdown.css" rel="stylesheet" /> |
| 40 | <link href="libs/gitbook-2.6.7/css/plugin-highlight.css" rel="stylesheet" /> |
| 41 | <link href="libs/gitbook-2.6.7/css/plugin-search.css" rel="stylesheet" /> |
| 42 | <link href="libs/gitbook-2.6.7/css/plugin-fontsettings.css" rel="stylesheet" /> |
| 43 | |
| 44 | |
| 45 | |
| 46 | |
| 47 | |
| 48 | |
| 49 | |
| 50 | <script src="libs/kePrint-0.0.1/kePrint.js"></script> |
| 51 | <link href="libs/bsTable-3.3.7/bootstrapTable.min.css" rel="stylesheet" /> |
| 52 | |
| 53 | |
| 54 | <style type="text/css"> |
| 55 | a.sourceLine { display: inline-block; line-height: 1.25; } |
| 56 | a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; } |
| 57 | a.sourceLine:empty { height: 1.2em; position: absolute; } |
| 58 | .sourceCode { overflow: visible; } |
| 59 | code.sourceCode { white-space: pre; position: relative; } |
| 60 | div.sourceCode { margin: 1em 0; } |
| 61 | pre.sourceCode { margin: 0; } |
| 62 | @media screen { |
| 63 | div.sourceCode { overflow: auto; } |
| 64 | } |
| 65 | @media print { |
| 66 | code.sourceCode { white-space: pre-wrap; } |
| 67 | a.sourceLine { text-indent: -1em; padding-left: 1em; } |
| 68 | } |
| 69 | pre.numberSource a.sourceLine |
| 70 | { position: relative; } |
| 71 | pre.numberSource a.sourceLine:empty |
| 72 | { position: absolute; } |
| 73 | pre.numberSource a.sourceLine::before |
| 74 | { content: attr(data-line-number); |
| 75 | position: absolute; left: -5em; text-align: right; vertical-align: baseline; |
| 76 | border: none; pointer-events: all; |
| 77 | -webkit-touch-callout: none; -webkit-user-select: none; |
| 78 | -khtml-user-select: none; -moz-user-select: none; |
| 79 | -ms-user-select: none; user-select: none; |
| 80 | padding: 0 4px; width: 4em; |
| 81 | color: #aaaaaa; |
| 82 | } |
| 83 | pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; } |
| 84 | div.sourceCode |
| 85 | { } |
| 86 | @media screen { |
| 87 | a.sourceLine::before { text-decoration: underline; } |
| 88 | } |
| 89 | code span.al { color: #ff0000; font-weight: bold; } /* Alert */ |
| 90 | code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */ |
| 91 | code span.at { color: #7d9029; } /* Attribute */ |
| 92 | code span.bn { color: #40a070; } /* BaseN */ |
| 93 | code span.bu { } /* BuiltIn */ |
| 94 | code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */ |
| 95 | code span.ch { color: #4070a0; } /* Char */ |
| 96 | code span.cn { color: #880000; } /* Constant */ |
| 97 | code span.co { color: #60a0b0; font-style: italic; } /* Comment */ |
| 98 | code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */ |
| 99 | code span.do { color: #ba2121; font-style: italic; } /* Documentation */ |
| 100 | code span.dt { color: #902000; } /* DataType */ |
| 101 | code span.dv { color: #40a070; } /* DecVal */ |
| 102 | code span.er { color: #ff0000; font-weight: bold; } /* Error */ |
| 103 | code span.ex { } /* Extension */ |
| 104 | code span.fl { color: #40a070; } /* Float */ |
| 105 | code span.fu { color: #06287e; } /* Function */ |
| 106 | code span.im { } /* Import */ |
| 107 | code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */ |
| 108 | code span.kw { color: #007020; font-weight: bold; } /* Keyword */ |
| 109 | code span.op { color: #666666; } /* Operator */ |
| 110 | code span.ot { color: #007020; } /* Other */ |
| 111 | code span.pp { color: #bc7a00; } /* Preprocessor */ |
| 112 | code span.sc { color: #4070a0; } /* SpecialChar */ |
| 113 | code span.ss { color: #bb6688; } /* SpecialString */ |
| 114 | code span.st { color: #4070a0; } /* String */ |
| 115 | code span.va { color: #19177c; } /* Variable */ |
| 116 | code span.vs { color: #4070a0; } /* VerbatimString */ |
| 117 | code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */ |
| 118 | </style> |
| 119 | |
| 120 | </head> |
| 121 | |
| 122 | <body> |
| 123 | |
| 124 | |
| 125 | |
| 126 | <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath="."> |
| 127 | |
| 128 | <div class="book-summary"> |
| 129 | <nav role="navigation"> |
| 130 | |
| 131 | <ul class="summary"> |
| 132 | <li class="chapter" data-level="1" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i><b>1</b> Introduction</a></li> |
| 133 | <li class="chapter" data-level="2" data-path="cross-format-tables-in-bookdown.html"><a href="cross-format-tables-in-bookdown.html"><i class="fa fa-check"></i><b>2</b> Cross-format Tables in Bookdown</a><ul> |
| 134 | <li class="chapter" data-level="2.1" data-path="cross-format-tables-in-bookdown.html"><a href="cross-format-tables-in-bookdown.html#use-the-k-m-approach-instead-of-m-k"><i class="fa fa-check"></i><b>2.1</b> Use the “K-M” approach instead of “M-K”</a></li> |
| 135 | <li class="chapter" data-level="2.2" data-path="cross-format-tables-in-bookdown.html"><a href="cross-format-tables-in-bookdown.html#prepare-your-tables-for-both-formats"><i class="fa fa-check"></i><b>2.2</b> Prepare Your Tables for Both Formats</a></li> |
| 136 | </ul></li> |
| 137 | <li class="chapter" data-level="3" data-path="use-bootstrap-tables-in-gitbooks-epub.html"><a href="use-bootstrap-tables-in-gitbooks-epub.html"><i class="fa fa-check"></i><b>3</b> Use Bootstrap Tables in gitbooks & epub</a><ul> |
| 138 | <li class="chapter" data-level="3.1" data-path="use-bootstrap-tables-in-gitbooks-epub.html"><a href="use-bootstrap-tables-in-gitbooks-epub.html#gitbook"><i class="fa fa-check"></i><b>3.1</b> Gitbook</a></li> |
| 139 | <li class="chapter" data-level="3.2" data-path="use-bootstrap-tables-in-gitbooks-epub.html"><a href="use-bootstrap-tables-in-gitbooks-epub.html#epub"><i class="fa fa-check"></i><b>3.2</b> Epub</a></li> |
| 140 | </ul></li> |
| 141 | </ul> |
| 142 | |
| 143 | </nav> |
| 144 | </div> |
| 145 | |
| 146 | <div class="book-body"> |
| 147 | <div class="body-inner"> |
| 148 | <div class="book-header" role="navigation"> |
| 149 | <h1> |
Hao Zhu | c859dba | 2018-10-03 18:05:55 -0400 | [diff] [blame] | 150 | <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">Using kableExtra in Bookdown</a> |
Hao Zhu | c145088 | 2018-10-03 17:56:26 -0400 | [diff] [blame] | 151 | </h1> |
| 152 | </div> |
| 153 | |
| 154 | <div class="page-wrapper" tabindex="-1" role="main"> |
| 155 | <div class="page-inner"> |
| 156 | |
| 157 | <section class="normal" id="section-"> |
| 158 | <div id="cross-format-tables-in-bookdown" class="section level1"> |
| 159 | <h1><span class="header-section-number">Chapter 2</span> Cross-format Tables in Bookdown</h1> |
| 160 | <blockquote> |
| 161 | <p>Note that if kableExtra 0.9.0 doesn’t support the EPUB format. If you need to output tables in <code>.epub</code>, please upgrade to the dev version or version 1.0 on CRAN once it’s released.</p> |
| 162 | </blockquote> |
| 163 | <div id="use-the-k-m-approach-instead-of-m-k" class="section level2"> |
| 164 | <h2><span class="header-section-number">2.1</span> Use the “K-M” approach instead of “M-K”</h2> |
| 165 | <p>Please read this chapter about the “K-M”/“M-K” approaches in <code>bookdown</code>: |
| 166 | <a href="https://bookdown.org/yihui/bookdown/new-session.html" class="uri">https://bookdown.org/yihui/bookdown/new-session.html</a></p> |
| 167 | <p>To generate cross-format tables with <code>kableExtra</code> in a multi-format bookdown project, you will have to use the “M-K” approach by setting <code>new_session: true</code> in <code>_bookdown.yml</code>. Somehow the “M-K” approach, which merges chapters to a big Rmd and then renders, shares the global environment across formats. For now, I’m not sure if this is a bug or intended behavior. It might be fixable in the future but please don’t count on that. By setting <code>new_session: true</code>, we force R to use a new session for every chapter for different formats. In this way, tables are generated differently in different formats.</p> |
| 168 | <p>Note that the “M-K” approach is slower than the “K-M” approach. At the same time, packages and data are not shared accross chapter.</p> |
| 169 | <pre><code># Example _bookdown.yml |
| 170 | book_filename: "bookdown_example" |
| 171 | delete_merged_file: true |
| 172 | new_session: true |
| 173 | language: |
| 174 | ui: |
| 175 | chapter_name: "Chapter "</code></pre> |
| 176 | </div> |
| 177 | <div id="prepare-your-tables-for-both-formats" class="section level2"> |
| 178 | <h2><span class="header-section-number">2.2</span> Prepare Your Tables for Both Formats</h2> |
| 179 | <p>In most cases, functions in <code>kable</code> and <code>kableExtra</code> use the same API to accomplish the same styling task in HTML and LaTeX. However, you also need some format specific settings so your tables will look good in both formats. Some common items here include the <code>booktabs</code> and <code>longtable</code> settings in <code>kable</code> and the <code>bootstrap_options</code> and <code>latex_options</code> in <code>kable_styling</code>.</p> |
| 180 | <p>Here is an example for a table that will work in both HTML and LaTeX.</p> |
| 181 | <pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(kableExtra) |
Hao Zhu | b809805 | 2018-10-08 16:57:43 -0400 | [diff] [blame^] | 182 | <span class="kw">options</span>(<span class="dt">kableExtra.html.bsTable =</span> T) |
Hao Zhu | c145088 | 2018-10-03 17:56:26 -0400 | [diff] [blame] | 183 | mtcars[<span class="dv">1</span><span class="op">:</span><span class="dv">5</span>, <span class="dv">1</span><span class="op">:</span><span class="dv">5</span>] <span class="op">%>%</span> |
| 184 | <span class="st"> </span><span class="kw">kable</span>(<span class="dt">booktabs =</span> T) <span class="op">%>%</span><span class="st"> </span> |
| 185 | <span class="st"> </span><span class="kw">kable_styling</span>( |
| 186 | <span class="dt">latex_options =</span> <span class="kw">c</span>(<span class="st">"striped"</span>), |
| 187 | <span class="dt">full_width =</span> F |
| 188 | ) <span class="op">%>%</span> |
| 189 | <span class="st"> </span><span class="kw">column_spec</span>(<span class="dv">1</span>, <span class="dt">bold =</span> T) <span class="op">%>%</span> |
| 190 | <span class="st"> </span><span class="kw">add_header_above</span>(<span class="kw">c</span>(<span class="st">" "</span>, <span class="st">"Group A"</span> =<span class="st"> </span><span class="dv">2</span>, <span class="st">"Group B"</span> =<span class="st"> </span><span class="dv">3</span>))</code></pre> |
| 191 | <table class="table" style="width: auto !important; margin-left: auto; margin-right: auto;"> |
| 192 | <thead> |
| 193 | <tr> |
| 194 | <th style="border-bottom:hidden" colspan="1"> |
| 195 | </th> |
| 196 | <th style="border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;text-align: center; " colspan="2"> |
| 197 | <div style="border-bottom: 1px solid #ddd; padding-bottom: 5px; "> |
| 198 | Group A |
| 199 | </div> |
| 200 | </th> |
| 201 | <th style="border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;text-align: center; " colspan="3"> |
| 202 | <div style="border-bottom: 1px solid #ddd; padding-bottom: 5px; "> |
| 203 | Group B |
| 204 | </div> |
| 205 | </th> |
| 206 | </tr> |
| 207 | <tr> |
| 208 | <th style="text-align:left;"> |
| 209 | </th> |
| 210 | <th style="text-align:right;"> |
| 211 | mpg |
| 212 | </th> |
| 213 | <th style="text-align:right;"> |
| 214 | cyl |
| 215 | </th> |
| 216 | <th style="text-align:right;"> |
| 217 | disp |
| 218 | </th> |
| 219 | <th style="text-align:right;"> |
| 220 | hp |
| 221 | </th> |
| 222 | <th style="text-align:right;"> |
| 223 | drat |
| 224 | </th> |
| 225 | </tr> |
| 226 | </thead> |
| 227 | <tbody> |
| 228 | <tr> |
| 229 | <td style="text-align:left;font-weight: bold;"> |
| 230 | Mazda RX4 |
| 231 | </td> |
| 232 | <td style="text-align:right;"> |
| 233 | 21.0 |
| 234 | </td> |
| 235 | <td style="text-align:right;"> |
| 236 | 6 |
| 237 | </td> |
| 238 | <td style="text-align:right;"> |
| 239 | 160 |
| 240 | </td> |
| 241 | <td style="text-align:right;"> |
| 242 | 110 |
| 243 | </td> |
| 244 | <td style="text-align:right;"> |
| 245 | 3.90 |
| 246 | </td> |
| 247 | </tr> |
| 248 | <tr> |
| 249 | <td style="text-align:left;font-weight: bold;"> |
| 250 | Mazda RX4 Wag |
| 251 | </td> |
| 252 | <td style="text-align:right;"> |
| 253 | 21.0 |
| 254 | </td> |
| 255 | <td style="text-align:right;"> |
| 256 | 6 |
| 257 | </td> |
| 258 | <td style="text-align:right;"> |
| 259 | 160 |
| 260 | </td> |
| 261 | <td style="text-align:right;"> |
| 262 | 110 |
| 263 | </td> |
| 264 | <td style="text-align:right;"> |
| 265 | 3.90 |
| 266 | </td> |
| 267 | </tr> |
| 268 | <tr> |
| 269 | <td style="text-align:left;font-weight: bold;"> |
| 270 | Datsun 710 |
| 271 | </td> |
| 272 | <td style="text-align:right;"> |
| 273 | 22.8 |
| 274 | </td> |
| 275 | <td style="text-align:right;"> |
| 276 | 4 |
| 277 | </td> |
| 278 | <td style="text-align:right;"> |
| 279 | 108 |
| 280 | </td> |
| 281 | <td style="text-align:right;"> |
| 282 | 93 |
| 283 | </td> |
| 284 | <td style="text-align:right;"> |
| 285 | 3.85 |
| 286 | </td> |
| 287 | </tr> |
| 288 | <tr> |
| 289 | <td style="text-align:left;font-weight: bold;"> |
| 290 | Hornet 4 Drive |
| 291 | </td> |
| 292 | <td style="text-align:right;"> |
| 293 | 21.4 |
| 294 | </td> |
| 295 | <td style="text-align:right;"> |
| 296 | 6 |
| 297 | </td> |
| 298 | <td style="text-align:right;"> |
| 299 | 258 |
| 300 | </td> |
| 301 | <td style="text-align:right;"> |
| 302 | 110 |
| 303 | </td> |
| 304 | <td style="text-align:right;"> |
| 305 | 3.08 |
| 306 | </td> |
| 307 | </tr> |
| 308 | <tr> |
| 309 | <td style="text-align:left;font-weight: bold;"> |
| 310 | Hornet Sportabout |
| 311 | </td> |
| 312 | <td style="text-align:right;"> |
| 313 | 18.7 |
| 314 | </td> |
| 315 | <td style="text-align:right;"> |
| 316 | 8 |
| 317 | </td> |
| 318 | <td style="text-align:right;"> |
| 319 | 360 |
| 320 | </td> |
| 321 | <td style="text-align:right;"> |
| 322 | 175 |
| 323 | </td> |
| 324 | <td style="text-align:right;"> |
| 325 | 3.15 |
| 326 | </td> |
| 327 | </tr> |
| 328 | </tbody> |
| 329 | </table> |
| 330 | |
| 331 | </div> |
| 332 | </div> |
| 333 | </section> |
| 334 | |
| 335 | </div> |
| 336 | </div> |
| 337 | </div> |
| 338 | <a href="index.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a> |
| 339 | <a href="use-bootstrap-tables-in-gitbooks-epub.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a> |
| 340 | </div> |
| 341 | </div> |
| 342 | <script src="libs/gitbook-2.6.7/js/app.min.js"></script> |
| 343 | <script src="libs/gitbook-2.6.7/js/lunr.js"></script> |
| 344 | <script src="libs/gitbook-2.6.7/js/plugin-search.js"></script> |
| 345 | <script src="libs/gitbook-2.6.7/js/plugin-sharing.js"></script> |
| 346 | <script src="libs/gitbook-2.6.7/js/plugin-fontsettings.js"></script> |
| 347 | <script src="libs/gitbook-2.6.7/js/plugin-bookdown.js"></script> |
| 348 | <script src="libs/gitbook-2.6.7/js/jquery.highlight.js"></script> |
| 349 | <script> |
| 350 | gitbook.require(["gitbook"], function(gitbook) { |
| 351 | gitbook.start({ |
| 352 | "sharing": { |
| 353 | "github": false, |
| 354 | "facebook": true, |
| 355 | "twitter": true, |
| 356 | "google": false, |
| 357 | "linkedin": false, |
| 358 | "weibo": false, |
| 359 | "instapper": false, |
| 360 | "vk": false, |
| 361 | "all": ["facebook", "google", "twitter", "linkedin", "weibo", "instapaper"] |
| 362 | }, |
| 363 | "fontsettings": { |
| 364 | "theme": "white", |
| 365 | "family": "sans", |
| 366 | "size": 2 |
| 367 | }, |
| 368 | "edit": { |
| 369 | "link": null, |
| 370 | "text": null |
| 371 | }, |
| 372 | "download": ["bookdown_example.pdf", "bookdown_example.epub"], |
| 373 | "toc": { |
| 374 | "collapse": "subsection" |
| 375 | } |
| 376 | }); |
| 377 | }); |
| 378 | </script> |
| 379 | |
| 380 | </body> |
| 381 | |
| 382 | </html> |