blob: bf9ea7da37249a860a5690f04557395fc85c0f32 [file] [log] [blame]
Hao Zhu1fc48a62017-03-01 14:07:54 -05001---
2title: "Create Awesome HTML Table with knitr::kable and kableExtra"
3author: "Hao Zhu"
4date: "`r Sys.Date()`"
5output:
6 html_document:
Hao Zhuaf646602017-03-01 19:22:18 -05007 theme: simplex
Hao Zhu1fc48a62017-03-01 14:07:54 -05008 toc: true
9 toc_depth: 2
10 toc_float: true
11vignette: >
12 %\VignetteIndexEntry{Create Awesome HTML Table with knitr::kable and kableExtra}
13 %\VignetteEngine{knitr::rmarkdown}
14 %\VignetteEncoding{UTF-8}
15---
16
Hao Zhu33b865f2020-08-18 02:10:43 -040017<script>
18$(document).ready(function(){
19 $('[data-toggle="popover"]').popover();
20});
21</script>
22
Hao Zhudda2f722018-05-21 00:38:11 -040023<img src="kableExtra_sm.png" align="right" alt="logo" width="80" height = "93" style = "border: none; float: right;">
24
Hao Zhu5fe235c2020-08-26 00:26:49 -040025> Please see the package [documentation site](https://haozhu233.github.io/kableExtra/) for how to use this package in LaTeX.
Hao Zhu6ce29212017-05-22 16:29:56 -040026
Hao Zhu1fc48a62017-03-01 14:07:54 -050027# Overview
28The goal of `kableExtra` is to help you build common complex tables and manipulate table styles. It imports the pipe `%>%` symbol from `magrittr` and verbalize all the functions, so basically you can add "layers" to a kable output in a way that is similar with `ggplot2` and `plotly`.
29
Hao Zhu4e34cd82020-08-19 01:54:23 -040030For users who are not very familiar with the pipe operator `%>%` in R, it is the R version of the [fluent interface](https://en.wikipedia.org/wiki/Fluent_interface). The ides is to pass the result along the chain for a more literal coding experience. Basically when we say `A %>% B`, technically it means sending the results of A to B as B's first argument.
31
Hao Zhu4b0c51e2017-08-01 15:21:07 -040032To learn how to generate complex tables in LaTeX, please visit [http://haozhu233.github.io/kableExtra/awesome_table_in_pdf.pdf](http://haozhu233.github.io/kableExtra/awesome_table_in_pdf.pdf)
33
Hao Zhu6107f372018-05-21 00:23:26 -040034There is also a Chinese version of this vignette. You can find it [here](http://haozhu233.github.io/kableExtra/awesome_table_in_html_cn.html)
35
Hao Zhu1fc48a62017-03-01 14:07:54 -050036# Installation
Hao Zhu1fc48a62017-03-01 14:07:54 -050037```r
Hao Zhu74eb6ad2017-03-04 09:32:37 -050038install.packages("kableExtra")
39
Hao Zhu1fc48a62017-03-01 14:07:54 -050040# For dev version
Hao Zhuf9aa4c42017-05-22 15:53:35 -040041# install.packages("devtools")
Hao Zhu1fc48a62017-03-01 14:07:54 -050042devtools::install_github("haozhu233/kableExtra")
43```
44# Getting Started
45Here we are using the first few columns and rows from dataset `mtcars`
46```{r}
Hao Zhu1fc48a62017-03-01 14:07:54 -050047library(kableExtra)
48dt <- mtcars[1:5, 1:6]
49```
50
Hao Zhu8b16a6c2020-08-18 16:59:20 -040051> **Key Update:** In the latest version of this package (1.2+), we provide a wrapper funciton `kbl` to the original `kable` function with detailed documentation of all the hidden html/latex options. It also does auto-formatting check in every function call instead of relying on the global environement variable. As a result, it also solves an issue for multi-format R Markdown documents. I encourage you start to use the new `kbl` function for all its convenience but the support for the original `kable` function is still there. In this doc, we will use `kbl` instead of `kable`.
Hao Zhuf2be4822020-08-18 07:44:10 -040052
Hao Zhu6107f372018-05-21 00:23:26 -040053
Hao Zhu8b16a6c2020-08-18 16:59:20 -040054**This paragraph is a little outdated. It's here only for education purpose because it's helpful to understand how `kable` works under the hood**. When you are using `kable()`, if you don't specify `format`, by default it will generate a markdown table and let pandoc handle the conversion from markdown to HTML/PDF. This is the most favorable approach to render most simple tables as it is format independent. If you switch from HTML to pdf, you basically don't need to change anything in your code. However, markdown doesn't support complex table. For example, if you want to have a double-row header table, markdown just cannot provide you the functionality you need. As a result, when you have such a need, you should **define `format` in `kable()`** as either "html" or "latex". *You can also define a global option at the beginning using `options(knitr.table.format = "html")` so you don't repeat the step everytime.* **Starting from `kableExtra` 0.9.0**, when you load this package (`library(kableExtra)`), it will automatically set up the global option 'knitr.table.format' based on your current environment. Unless you are rendering a PDF, `kableExtra` will try to render a HTML table for you. **You no longer need to manually set either the global option or the `format` option in each `kable()` function**. I'm still including the explanation above here in this vignette so you can understand what is going on behind the scene. Note that this is only an global option. You can manually set any format in `kable()` whenever you want. I just hope you can enjoy a peace of mind in most of your time. You can disable this behavior by setting `options(kableExtra.auto_format = FALSE)` before you load `kableExtra`.
Hao Zhu1fc48a62017-03-01 14:07:54 -050055
56```{r}
Hao Zhu6107f372018-05-21 00:23:26 -040057# If you are using kableExtra < 0.9.0, you are recommended to set a global option first.
58# options(knitr.table.format = "html")
Hao Zhu1fc48a62017-03-01 14:07:54 -050059## If you don't define format here, you'll need put `format = "html"` in every kable function.
60```
61
Hao Zhu4b0c51e2017-08-01 15:21:07 -040062## Basic HTML table
Hao Zhu1fc48a62017-03-01 14:07:54 -050063Basic HTML output of `kable` looks very crude. To the end, it's just a plain HTML table without any love from css.
64```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -040065kbl(dt)
Hao Zhu1fc48a62017-03-01 14:07:54 -050066```
67
Hao Zhu4b0c51e2017-08-01 15:21:07 -040068## Bootstrap theme
Hao Zhu1fc48a62017-03-01 14:07:54 -050069When used on a HTML table, `kable_styling()` will automatically apply twitter bootstrap theme to the table. Now it should looks the same as the original pandoc output (the one when you don't specify `format` in `kable()`) but this time, you are controlling it.
70```{r}
Hao Zhuf03decd2017-09-13 10:45:44 -040071dt %>%
Hao Zhu8b16a6c2020-08-18 16:59:20 -040072 kbl() %>%
Hao Zhu1fc48a62017-03-01 14:07:54 -050073 kable_styling()
74```
75
Hao Zhud7762a42020-08-10 09:05:47 -040076## Alternative themes
Hao Zhu33b865f2020-08-18 02:10:43 -040077`kableExtra` also offers a few in-house alternative HTML table themes other than the default bootstrap theme. Right now there are 6 of them: `kable_paper`, `kable_classic`, `kable_classic_2`, `kable_minimal`, `kable_material` and `kable_material_dark`. These functions are alternatives to `kable_styling`, which means that you can specify any additional formatting options in `kable_styling` in these functions too. The only difference is that `bootstrap_options` (as discussed in the next section) is replaced with `lightable_options` at the same location with only two choices `striped` and `hover` available.
78
79```{r}
80dt %>%
Hao Zhu8b16a6c2020-08-18 16:59:20 -040081 kbl() %>%
Hao Zhu33b865f2020-08-18 02:10:43 -040082 kable_paper("hover")
83```
Hao Zhud7762a42020-08-10 09:05:47 -040084
85```{r}
86dt %>%
Hao Zhu82ee3c42020-08-19 20:24:40 -040087 kbl(caption = "Recreating booktabs style table") %>%
88 kable_classic(full_width = F, html_font = "Cambria")
Hao Zhud7762a42020-08-10 09:05:47 -040089```
90
91```{r}
92dt %>%
Hao Zhu8b16a6c2020-08-18 16:59:20 -040093 kbl() %>%
Hao Zhud8a2e332020-08-11 01:26:32 -040094 kable_classic_2()
95```
96
97```{r}
98dt %>%
Hao Zhu8b16a6c2020-08-18 16:59:20 -040099 kbl() %>%
Hao Zhud7762a42020-08-10 09:05:47 -0400100 kable_minimal()
101```
102
103```{r}
104dt %>%
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400105 kbl() %>%
Hao Zhud7762a42020-08-10 09:05:47 -0400106 kable_material(c("striped", "hover"))
107```
108
Hao Zhu9bf19982020-08-11 00:50:33 -0400109```{r}
110dt %>%
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400111 kbl() %>%
Hao Zhu9bf19982020-08-11 00:50:33 -0400112 kable_material_dark()
113```
114
Hao Zhud7762a42020-08-10 09:05:47 -0400115
116
Hao Zhu1fc48a62017-03-01 14:07:54 -0500117# Table Styles
Hao Zhu462b4492017-08-03 11:31:42 -0400118`kable_styling` offers a few other ways to customize the look of a HTML table.
Hao Zhu1fc48a62017-03-01 14:07:54 -0500119
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400120## Bootstrap table classes
Hao Zhu5fe235c2020-08-26 00:26:49 -0400121If you are familiar with twitter bootstrap, you probably have already known its predefined classes, including `striped`, `bordered`, `hover`, `condensed` and `responsive`. If you are not familiar, no worries, you can take a look at their [documentation site](https://getbootstrap.com/css/) to get a sense of how they look like. All of these options are available here.
Hao Zhu1fc48a62017-03-01 14:07:54 -0500122
123For example, to add striped lines (alternative row colors) to your table and you want to highlight the hovered row, you can simply type:
124```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400125kbl(dt) %>%
Hao Zhu1fc48a62017-03-01 14:07:54 -0500126 kable_styling(bootstrap_options = c("striped", "hover"))
127```
128
129The option `condensed` can also be handy in many cases when you don't want your table to be too large. It has slightly shorter row height.
130```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400131kbl(dt) %>%
Hao Zhu1fc48a62017-03-01 14:07:54 -0500132 kable_styling(bootstrap_options = c("striped", "hover", "condensed"))
133```
134
135Tables with option `responsive` looks the same with others on a large screen. However, on a small screen like phone, they are horizontally scrollable. Please resize your window to see the result.
136```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400137kbl(dt) %>%
Hao Zhu1fc48a62017-03-01 14:07:54 -0500138 kable_styling(bootstrap_options = c("striped", "hover", "condensed", "responsive"))
139```
140
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400141## Full width?
Hao Zhubf4cdc62017-03-02 22:26:29 -0500142By default, a bootstrap table takes 100% of the width. It is supposed to use together with its grid system to scale the table properly. However, when you are writing a rmarkdown document, you probably don't want to write your own css/or grid. For some small tables with only few columns, a page wide table looks awful. To make it easier, you can specify whether you want the table to have `full_width` or not in `kable_styling`. By default, `full_width` is set to be `TRUE` for HTML tables (note that for LaTeX, the default is `FALSE` since I don't want to change the "common" looks unless you specified it.)
Hao Zhu1fc48a62017-03-01 14:07:54 -0500143```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400144kbl(dt) %>%
Hao Zhu33b865f2020-08-18 02:10:43 -0400145 kable_paper(bootstrap_options = "striped", full_width = F)
Hao Zhu1fc48a62017-03-01 14:07:54 -0500146```
147
148## Position
149Table Position only matters when the table doesn't have `full_width`. You can choose to align the table to `center`, `left` or `right` side of the page
150```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400151kbl(dt) %>%
Hao Zhu1fc48a62017-03-01 14:07:54 -0500152 kable_styling(bootstrap_options = "striped", full_width = F, position = "left")
153```
154
155Becides these three common options, you can also wrap text around the table using the `float-left` or `float-right` options.
156```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400157kbl(dt) %>%
Hao Zhu1fc48a62017-03-01 14:07:54 -0500158 kable_styling(bootstrap_options = "striped", full_width = F, position = "float_right")
159```
160Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet mauris in ex ultricies elementum vel rutrum dolor. Phasellus tempor convallis dui, in hendrerit mauris placerat scelerisque. Maecenas a accumsan enim, a maximus velit. Pellentesque in risus eget est faucibus convallis nec at nulla. Phasellus nec lacinia justo. Morbi fermentum, orci id varius accumsan, nibh neque porttitor ipsum, consectetur luctus risus arcu ac ex. Aenean a luctus augue. Suspendisse et auctor nisl. Suspendisse cursus ultrices quam non vulputate. Phasellus et pharetra neque, vel feugiat erat. Sed feugiat elit at mauris commodo consequat. Sed congue lectus id mattis hendrerit. Mauris turpis nisl, congue eget velit sed, imperdiet convallis magna. Nam accumsan urna risus, non feugiat odio vehicula eget.
161
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400162## Font size
Hao Zhu1fc48a62017-03-01 14:07:54 -0500163If one of your tables is huge and you want to use a smaller font size for that specific table, you can use the `font_size` option.
164```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400165kbl(dt) %>%
Hao Zhu1fc48a62017-03-01 14:07:54 -0500166 kable_styling(bootstrap_options = "striped", font_size = 7)
167```
168
Hao Zhu72917f92019-03-15 18:41:42 -0400169## Fixed Table Header Row
170If you happened to have a very long table, you may consider to use this `fixed_header` option to fix the header row on top as your readers scroll. By default, the background is set to white. If you need a different color, you can set `fixed_header = list(enabled = T, background = "red")`.
171
172```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400173kbl(mtcars[1:10, 1:5]) %>%
Hao Zhu72917f92019-03-15 18:41:42 -0400174 kable_styling(fixed_thead = T)
175```
176
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400177# Column / Row Specification
178## Column spec
Hao Zhu4840bc92017-09-15 15:55:05 -0400179When you have a table with lots of explanatory texts, you may want to specified the column width for different column, since the auto adjust in HTML may not work in its best way while basic LaTeX table is really bad at handling text wrapping. Also, sometimes, you may want to highlight a column (e.g. a "Total" column) by making it bold. In these scenario, you can use `column_spec()`. You can find an example below.
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400180
181Warning: If you have a super long table, you should be cautious when you use `column_spec` as the xml node modification takes time.
182
183```{r}
184text_tbl <- data.frame(
185 Items = c("Item 1", "Item 2", "Item 3"),
186 Features = c(
187 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula tempor ex. Morbi malesuada sagittis turpis, at venenatis nisl luctus a. ",
188 "In eu urna at magna luctus rhoncus quis in nisl. Fusce in velit varius, posuere risus et, cursus augue. Duis eleifend aliquam ante, a aliquet ex tincidunt in. ",
189 "Vivamus venenatis egestas eros ut tempus. Vivamus id est nisi. Aliquam molestie erat et sollicitudin venenatis. In ac lacus at velit scelerisque mattis. "
190 )
191)
192
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400193kbl(text_tbl) %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400194 kable_paper(full_width = F) %>%
Hao Zhua44e3752017-09-05 12:56:19 -0400195 column_spec(1, bold = T, border_right = T) %>%
196 column_spec(2, width = "30em", background = "yellow")
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400197```
198
Hao Zhu33b865f2020-08-18 02:10:43 -0400199> **Key Update**: I understand the need of doing conditional formatting and the previous solution `cell_spec` is relatively hard to use. Therefore in kableExtra 1.2, I improved the functionality of `column_spec` so it can take vectorized input for most of its arguments (except `width`, `border_left` and `border_right`). It is really easy right now to format a column based on other values.
200
201```{r}
202mtcars[1:8, 1:8] %>%
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400203 kbl() %>%
Hao Zhu33b865f2020-08-18 02:10:43 -0400204 kable_paper(full_width = F) %>%
205 column_spec(2, color = spec_color(mtcars$mpg[1:8]),
206 link = "https://haozhu233.github.io/kableExtra") %>%
207 column_spec(6, color = "white",
208 background = spec_color(mtcars$drat[1:8], end = 0.7),
209 popover = paste("am:", mtcars$am[1:8]))
210```
211
212You can still use the `spec_***` helper functions to help you define color. See the documentation [below](#visualize-data-with-viridis-color).
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400213
Hao Zhu5fe235c2020-08-26 00:26:49 -0400214## Insert Images into Columns
215Technically, we are still talking about `column_spec` here. However, since this topic itself contains its own subtopics, we split it out as a separate section. Since `kableExtra` 1.2, we introduced the feature of adding images to columns of tables. Here is a quick example.
216
217```{r}
218tbl_img <- data.frame(
219 name = c("kableExtra 1", "kableExtra 2"),
220 logo = ""
221)
222tbl_img %>%
223 kbl(booktabs = T) %>%
224 kable_paper(full_width = F) %>%
225 column_spec(2, image = "kableExtra_sm.png")
226```
227
228If you need to specify the size of the images, you need to do it through `spec_image`.
229
230```{r}
231tbl_img %>%
232 kbl(booktabs = T) %>%
233 kable_paper(full_width = F) %>%
234 column_spec(2, image = spec_image(
235 c("kableExtra_sm.png", "kableExtra_sm.png"), 50, 50))
236```
237
238`kableExtra` also provides a few inline plotting tools. Right now, there are `spec_hist` and `spec_boxplot`. One key feature is that by default, the limits of every subplots are fixed so you can compare across rows. Note that in html, you can also use package `sparkline` to create some jquery based interactive sparklines. Check out the end of this guide for details.
239
240```{r}
241mpg_list <- split(mtcars$mpg, mtcars$cyl)
242inline_plot <- data.frame(cyl = c(4, 6, 8), mpg_box = "", mpg_hist = "")
243inline_plot %>%
244 kbl(booktabs = T) %>%
245 kable_paper(full_width = F) %>%
246 column_spec(2, image = spec_boxplot(mpg_list)) %>%
247 column_spec(3, image = spec_hist(mpg_list))
248```
249
Hao Zhu0a0e8332017-08-03 13:21:29 -0400250## Row spec
Hao Zhu33b865f2020-08-18 02:10:43 -0400251Similar with `column_spec`, you can define specifications for rows. Currently, you can either bold or italicize an entire row. Note that, similar with other row-related functions in `kableExtra`, for the position of the target row, you don't need to count in header rows or the group labeling rows.
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400252
253```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400254kbl(dt) %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400255 kable_paper("striped", full_width = F) %>%
Hao Zhu4840bc92017-09-15 15:55:05 -0400256 column_spec(5:7, bold = T) %>%
257 row_spec(3:5, bold = T, color = "white", background = "#D7261E")
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400258```
259
Hao Zhu9ce317e2017-10-12 18:19:55 -0400260
Hao Zhu6f362bb2017-10-23 23:21:38 -0400261
262## Header Rows
263One special case of `row_spec` is that you can specify the format of the header row via `row_spec(row = 0, ...)`.
264```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400265kbl(dt) %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400266 kable_paper("striped", full_width = F) %>%
Hao Zhu6f362bb2017-10-23 23:21:38 -0400267 row_spec(0, angle = -45)
Hao Zhu9ce317e2017-10-12 18:19:55 -0400268```
269
Hao Zhu6f362bb2017-10-23 23:21:38 -0400270# Cell/Text Specification
Hao Zhu33b865f2020-08-18 02:10:43 -0400271
272>**Key Update: As said before, if you are using kableExtra 1.2+, you are now recommended to used `column_spec` to do conditional formatting**.
273
Hao Zhu6f362bb2017-10-23 23:21:38 -0400274Function `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:
275* 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
276* `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.
277
278Currently, `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.
279
280## Conditional logic
Hao Zhu83a2ab52020-08-19 11:16:39 -0400281>**Key Update: Again, as said before, if you are using kableExtra 1.2+, you are now recommended to used `column_spec` to do conditional formatting**.
282
Hao Zhu6f362bb2017-10-23 23:21:38 -0400283It is very easy to use `cell_spec` with conditional logic. Here is an example.
284```{r, message=FALSE, warning=FALSE}
Hao Zhu83a2ab52020-08-19 11:16:39 -0400285cs_dt <- mtcars[1:10, 1:2]
286cs_dt$car = row.names(cs_dt)
287row.names(cs_dt) <- NULL
288cs_dt$mpg = cell_spec(cs_dt$mpg, color = ifelse(cs_dt$mpg > 20, "red", "blue"))
289cs_dt$cyl = cell_spec(
290 cs_dt$cyl, color = "white", align = "c", angle = 45,
291 background = factor(cs_dt$cyl, c(4, 6, 8), c("#666666", "#999999", "#BBBBBB")))
292cs_dt <- cs_dt[c("car", "mpg", "cyl")]
293
294kbl(cs_dt, escape = F) %>%
295 kable_paper("striped", full_width = F)
296
297# You can also do this with dplyr and use one pipe from top to bottom
298# library(dplyr)
299# mtcars[1:10, 1:2] %>%
300# mutate(
301# car = row.names(.),
302# mpg = cell_spec(mpg, "html", color = ifelse(mpg > 20, "red", "blue")),
303# cyl = cell_spec(cyl, "html", color = "white", align = "c", angle = 45,
304# background = factor(cyl, c(4, 6, 8),
305# c("#666666", "#999999", "#BBBBBB")))
306# ) %>%
307# select(car, mpg, cyl) %>%
308# kbl(format = "html", escape = F) %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400309# kable_paper("striped", full_width = F)
Hao Zhu6f362bb2017-10-23 23:21:38 -0400310```
311
312## Visualize data with Viridis Color
Hao Zhu33b865f2020-08-18 02:10:43 -0400313This 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/package=viridisLite). It offers a very visually impressive representation in a tabular format.
Hao Zhu6f362bb2017-10-23 23:21:38 -0400314
315```{r}
Hao Zhu83a2ab52020-08-19 11:16:39 -0400316vs_dt <- iris[1:10, ]
317vs_dt[1:4] <- lapply(vs_dt[1:4], function(x) {
Hao Zhu6107f372018-05-21 00:23:26 -0400318 cell_spec(x, bold = T,
Hao Zhu5ece06e2018-01-19 23:18:02 -0500319 color = spec_color(x, end = 0.9),
Hao Zhu6f362bb2017-10-23 23:21:38 -0400320 font_size = spec_font_size(x))
Hao Zhu83a2ab52020-08-19 11:16:39 -0400321})
322vs_dt[5] <- cell_spec(vs_dt[[5]], color = "white", bold = T,
323 background = spec_color(1:10, end = 0.9, option = "A", direction = -1))
324kbl(vs_dt, escape = F, align = "c") %>%
325 kable_classic("striped", full_width = F)
326# Or dplyr ver
327# iris[1:10, ] %>%
328# mutate_if(is.numeric, function(x) {
329# cell_spec(x, bold = T,
330# color = spec_color(x, end = 0.9),
331# font_size = spec_font_size(x))
332# }) %>%
333# mutate(Species = cell_spec(
334# Species, color = "white", bold = T,
335# background = spec_color(1:10, end = 0.9, option = "A", direction = -1)
336# )) %>%
337# kable(escape = F, align = "c") %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400338# kable_paper(c("striped", "condensed"), full_width = F)
Hao Zhu6f362bb2017-10-23 23:21:38 -0400339```
340
Hao Zhu6f362bb2017-10-23 23:21:38 -0400341## Text Specification
342If 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.
343
344An aliased function `text_spec` is also provided for a more literal writing experience. In HTML, there is no difference between these two functions.
345
346```{r}
347sometext <- strsplit(paste0(
Hao Zhu6290fdd2017-10-24 00:10:32 -0400348 "You can even try to make some crazy things like this paragraph. ",
Hao Zhu6a1cbb52017-10-24 15:54:50 -0400349 "It may seem like a useless feature right now but it's so cool ",
350 "and nobody can resist. ;)"
Hao Zhu6f362bb2017-10-23 23:21:38 -0400351), " ")[[1]]
352text_formatted <- paste(
Hao Zhu6107f372018-05-21 00:23:26 -0400353 text_spec(sometext, color = spec_color(1:length(sometext), end = 0.9),
Hao Zhu6f362bb2017-10-23 23:21:38 -0400354 font_size = spec_font_size(1:length(sometext), begin = 5, end = 20)),
355 collapse = " ")
356
357# To display the text, type `r text_formatted` outside of the chunk
358```
359`r text_formatted`
360
361## Tooltip
362It'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).
363
364Note 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.
365```
366<script>
367$(document).ready(function(){
368 $('[data-toggle="tooltip"]').tooltip();
369});
370</script>
371```
372
373In 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.
374
375
376
377## Popover Message
378The 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.
379
380```
381<script>
382$(document).ready(function(){
383 $('[data-toggle="popover"]').popover();
384});
385</script>
386```
387
Hao Zhu6f362bb2017-10-23 23:21:38 -0400388```{r}
389popover_dt <- data.frame(
390 position = c("top", "bottom", "right", "left"),
391 stringsAsFactors = FALSE
392)
393popover_dt$`Hover over these items` <- cell_spec(
394 paste("Message on", popover_dt$position), # Cell texts
395 popover = spec_popover(
396 content = popover_dt$position,
397 title = NULL, # title will add a Title Panel on top
398 position = popover_dt$position
399 ))
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400400kbl(popover_dt, escape = FALSE) %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400401 kable_paper("striped", full_width = FALSE)
Hao Zhu6f362bb2017-10-23 23:21:38 -0400402```
403
404## Links
Hao Zhu5fe235c2020-08-26 00:26:49 -0400405You can add links to text via `text_spec("kableExtra", link = "https://haozhu233.github.io/kableExtra/")`: `r text_spec("kableExtra", link = "https://haozhu233.github.io/kableExtra/")`. If you want your hover message to be more obvious, it might be a good idea to put a `#` (go back to the top of the page) or `javascript:void(0)` (literally do nothing) in the `link` option.
Hao Zhu9567e632017-10-24 09:51:09 -0400406`text_spec("Hover on me", link = "javascript:void(0)", popover = "Hello")`:
407`r text_spec("Hover on me", link = "javascript:void(0)", popover = "Hello")`
Hao Zhu6f362bb2017-10-23 23:21:38 -0400408
Hao Zhu8b32b192017-10-24 14:51:48 -0400409## Integration with `formattable`
410You can combine the good parts from `kableExtra` & `formattable` together into one piece. Read more at http://haozhu233.github.io/kableExtra/use_kableExtra_with_formattable.html
411```{r, message = FALSE, warning=FALSE}
412library(formattable)
Hao Zhu83a2ab52020-08-19 11:16:39 -0400413ft_dt <- mtcars[1:5, 1:4]
414ft_dt$car <- row.names(ft_dt)
415row.names(ft_dt) <- NULL
416ft_dt$mpg <- color_tile("white", "orange")(ft_dt$mpg)
417ft_dt$cyl <- cell_spec(ft_dt$cyl, angle = (1:5)*60,
418 background = "red", color = "white", align = "center")
419ft_dt$disp <- ifelse(
420 ft_dt$disp > 200,
421 cell_spec(ft_dt$disp, color = "red", bold = T),
422 cell_spec(ft_dt$disp, color = "green", italic = T)
423)
424ft_dt$hp <- color_bar("lightgreen")(ft_dt$hp)
425ft_dt <- ft_dt[c("car", "mpg", "cyl", "disp", "hp")]
426
427kbl(ft_dt, escape = F) %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400428 kable_paper("hover", full_width = F) %>%
Hao Zhu8b32b192017-10-24 14:51:48 -0400429 column_spec(5, width = "3cm") %>%
430 add_header_above(c(" ", "Hello" = 2, "World" = 2))
431```
432
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400433# Grouped Columns / Rows
434## Add header rows to group columns
Hao Zhu1fc48a62017-03-01 14:07:54 -0500435Tables 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)).
436```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400437kbl(dt) %>%
438 kable_classic() %>%
Hao Zhu1fc48a62017-03-01 14:07:54 -0500439 add_header_above(c(" " = 1, "Group 1" = 2, "Group 2" = 2, "Group 3" = 2))
440```
441
Hao Zhu916c3662017-06-21 15:55:05 -0400442In fact, if you want to add another row of header on top, please feel free to do so.
Hao Zhu1fc48a62017-03-01 14:07:54 -0500443```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400444kbl(dt) %>%
445 kable_paper() %>%
Hao Zhu1fc48a62017-03-01 14:07:54 -0500446 add_header_above(c(" ", "Group 1" = 2, "Group 2" = 2, "Group 3" = 2)) %>%
447 add_header_above(c(" ", "Group 4" = 4, "Group 5" = 2)) %>%
448 add_header_above(c(" ", "Group 6" = 6))
449```
450
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400451## Group rows via labeling
Hao Zhu72917f92019-03-15 18:41:42 -0400452Sometimes we want a few rows of the table being grouped together. They might be items under the same topic (e.g., animals in one species) or just different data groups for a categorical variable (e.g., age < 40, age > 40). With the function `group_rows()`/`pack_rows()` in `kableExtra`, this kind of task can be completed in one line. Please see the example below. Note that when you count for the start/end rows of the group, you don't need to count for the header rows nor other group label rows. You only need to think about the row numbers in the "original R dataframe".
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400453```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400454kbl(mtcars[1:10, 1:6], caption = "Group Rows") %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400455 kable_paper("striped", full_width = F) %>%
Hao Zhu72917f92019-03-15 18:41:42 -0400456 pack_rows("Group 1", 4, 7) %>%
457 pack_rows("Group 2", 8, 10)
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400458```
459
Hao Zhu72917f92019-03-15 18:41:42 -0400460Another way to use `pack_rows` is to provide an grouping index, similar with `add_header_above()`. This feature is only available in kableExtra > 0.5.2.
Hao Zhu4840bc92017-09-15 15:55:05 -0400461```{r, eval = F}
462# Not evaluated. This example generates the same table as above.
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400463kbl(mtcars[1:10, 1:6], caption = "Group Rows") %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400464 kable_paper("striped", full_width = F) %>%
Hao Zhu72917f92019-03-15 18:41:42 -0400465 pack_rows(index = c(" " = 3, "Group 1" = 4, "Group 2" = 3))
Hao Zhu4840bc92017-09-15 15:55:05 -0400466```
467
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400468For advanced users, you can even define your own css for the group labeling.
469```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400470kbl(dt) %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400471 kable_paper("striped", full_width = F) %>%
Hao Zhu72917f92019-03-15 18:41:42 -0400472 pack_rows("Group 1", 3, 5, label_row_css = "background-color: #666; color: #fff;")
473```
474
475`r text_spec("Important Note!", bold = T, color = "#D7261E")`
476
477Note that `dplyr` 0.8.0+ introduced a `group_rows` function as well for a trivial feature. Therefore, I'm create this `pack_rows` function as an alias to the original `group_rows`. In the future, **I recommend all kableExtra users to use `pack_rows` instead of `group_rows` to get rid of the NAMESPACE conflict.**
478
479Alternatively, for pre-existing codes, you have two ways to solve this. You can either load `kableExtra` after `dplyr` or `tidyverse`, or to use the `conflicted` package. Here is an example.
480
481```{r, eval=F}
482# Method 1
483pack_rows() # instead of group_rows()
484
485# Method 2
486library(dplyr)
487library(kableExtra)
488
489# Method 3
490conflicted::conflict_prefer("group_rows", "kableExtra", "dplyr")
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400491```
492
493## Row indentation
Hao Zhu72917f92019-03-15 18:41:42 -0400494Unlike `pack_rows()`, which will insert a labeling row, sometimes we want to list a few sub groups under a total one. In that case, `add_indent()` is probably more apporiate.
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400495For advanced users, you can even define your own css for the group labeling.
496```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400497kbl(dt) %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400498 kable_paper("striped", full_width = F) %>%
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400499 add_indent(c(1, 3, 5))
500```
501
502## Group rows via multi-row cell
Hao Zhu72917f92019-03-15 18:41:42 -0400503Function `pack_rows` is great for showing simple structural information on rows but sometimes people may need to show structural information with multiple layers. When it happens, you may consider to use `collapse_rows` instead, which will put repeating cells in columns into multi-row cells. The vertical allignment of the cell is controlled by `valign` with default as "top".
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400504
505```{r}
506collapse_rows_dt <- data.frame(C1 = c(rep("a", 10), rep("b", 5)),
507 C2 = c(rep("c", 7), rep("d", 3), rep("c", 2), rep("d", 3)),
508 C3 = 1:15,
509 C4 = sample(c(0,1), 15, replace = TRUE))
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400510kbl(collapse_rows_dt, align = "c") %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400511 kable_paper(full_width = F) %>%
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400512 column_spec(1, bold = T) %>%
Hao Zhu6107f372018-05-21 00:23:26 -0400513 collapse_rows(columns = 1:2, valign = "top")
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400514```
515
516# Table Footnote
Hao Zhu1fc48a62017-03-01 14:07:54 -0500517
Hao Zhu4f8eaa22018-01-11 16:14:25 -0500518> Now it's recommended to use the new `footnote` function instead of `add_footnote` to make table footnotes.
519
520Documentations for `add_footnote` can be found [here](http://haozhu233.github.io/kableExtra/legacy_features#add_footnote).
521
522There are four notation systems in `footnote`, namely `general`, `number`, `alphabet` and `symbol`. The last three types of footnotes will be labeled with corresponding marks while `general` won't be labeled. You can pick any one of these systems or choose to display them all for fulfill the APA table footnotes requirements.
Hao Zhu1fc48a62017-03-01 14:07:54 -0500523```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400524kbl(dt, align = "c") %>%
525 kable_classic(full_width = F) %>%
Hao Zhu4f8eaa22018-01-11 16:14:25 -0500526 footnote(general = "Here is a general comments of the table. ",
527 number = c("Footnote 1; ", "Footnote 2; "),
528 alphabet = c("Footnote A; ", "Footnote B; "),
529 symbol = c("Footnote Symbol 1; ", "Footnote Symbol 2")
530 )
Hao Zhu1fc48a62017-03-01 14:07:54 -0500531```
532
Hao Zhu6107f372018-05-21 00:23:26 -0400533You can also specify title for each category by using the `***_title` arguments. Default value for `general_title` is "Note: " and "" for the rest three. You can also change the order using `footnote_order`. You can even display footnote as chunk texts (default is as a list) using `footnote_as_chunk`. The font format of the titles are controlled by `title_format` with options including "italic" (default), "bold" and "underline".
Hao Zhu4f8eaa22018-01-11 16:14:25 -0500534
Hao Zhu1fc48a62017-03-01 14:07:54 -0500535```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400536kbl(dt, align = "c") %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400537 kable_paper(full_width = F) %>%
Hao Zhu4f8eaa22018-01-11 16:14:25 -0500538 footnote(general = "Here is a general comments of the table. ",
539 number = c("Footnote 1; ", "Footnote 2; "),
540 alphabet = c("Footnote A; ", "Footnote B; "),
541 symbol = c("Footnote Symbol 1; ", "Footnote Symbol 2"),
542 general_title = "General: ", number_title = "Type I: ",
543 alphabet_title = "Type II: ", symbol_title = "Type III: ",
Hao Zhu6107f372018-05-21 00:23:26 -0400544 footnote_as_chunk = T, title_format = c("italic", "underline")
Hao Zhu4f8eaa22018-01-11 16:14:25 -0500545 )
Hao Zhu1fc48a62017-03-01 14:07:54 -0500546```
547
Hao Zhu4f8eaa22018-01-11 16:14:25 -0500548If you need to add footnote marks in table, you need to do it manually (no fancy) using `footnote_mark_***()`. Remember that similar with `cell_spec`, you need to tell this function whether you want it to do it in `HTML` (default) or `LaTeX`. You can set it for all using the `knitr.table.format` global option. ALso, if you have ever use `footnote_mark_***()`, you need to put `escape = F` in your `kable` function to avoid escaping of special characters.
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400549
Hao Zhu1fc48a62017-03-01 14:07:54 -0500550```{r}
Hao Zhu4f8eaa22018-01-11 16:14:25 -0500551dt_footnote <- dt
552names(dt_footnote)[2] <- paste0(names(dt_footnote)[2],
553 footnote_marker_symbol(1))
554row.names(dt_footnote)[4] <- paste0(row.names(dt_footnote)[4],
555 footnote_marker_alphabet(1))
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400556kbl(dt_footnote, align = "c",
Hao Zhu4f8eaa22018-01-11 16:14:25 -0500557 # Remember this escape = F
558 escape = F) %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400559 kable_paper(full_width = F) %>%
Hao Zhu4f8eaa22018-01-11 16:14:25 -0500560 footnote(alphabet = "Footnote A; ",
561 symbol = "Footnote Symbol 1; ",
562 alphabet_title = "Type II: ", symbol_title = "Type III: ",
563 footnote_as_chunk = T)
Hao Zhu1fc48a62017-03-01 14:07:54 -0500564```
Hao Zhuf9aa4c42017-05-22 15:53:35 -0400565
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400566# HTML Only Features
567## Scroll box
568If you have a huge table and you don't want to reduce the font size to unreadable, you may want to put your HTML table in a scroll box, of which users can pick the part they like to read. Note that scroll box isn't printer friendly, so be aware of that when you use this feature.
Hao Zhuf9aa4c42017-05-22 15:53:35 -0400569
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400570When you use `scroll_box`, you can specify either `height` or `width`. When you specify `height`, you will get a vertically scrollable box and vice versa. If you specify both, you will get a two-way scrollable box.
Hao Zhu6ff9d502017-06-13 17:13:03 -0400571
572```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400573kbl(cbind(mtcars, mtcars)) %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400574 kable_paper() %>%
Hao Zhu4b0c51e2017-08-01 15:21:07 -0400575 scroll_box(width = "500px", height = "200px")
Hao Zhu6ff9d502017-06-13 17:13:03 -0400576```
Irene62a3b362018-04-17 15:20:43 -0700577
578<br>
579
580You can also specify width using a percentage.
581
582```{r}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400583kbl(cbind(mtcars, mtcars)) %>%
Hao Zhu72917f92019-03-15 18:41:42 -0400584 add_header_above(c("a" = 5, "b" = 18)) %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400585 kable_paper() %>%
Irene62a3b362018-04-17 15:20:43 -0700586 scroll_box(width = "100%", height = "200px")
587```
Hao Zhu6107f372018-05-21 00:23:26 -0400588
Hao Zhu72917f92019-03-15 18:41:42 -0400589Starting from version 1.1.0, if you have a fixed-height box, the header row is fixed
590
Hao Zhu6107f372018-05-21 00:23:26 -0400591## Save HTML table directly
592If you need to save those HTML tables but you don't want to generate them through rmarkdown, you can try to use the `save_kable()` function. You can choose whether to let those HTML files be self contained (default is yes). Self contained files packed CSS into the HTML file so they are quite large when there are many.
593```{r, eval=FALSE}
Hao Zhu8b16a6c2020-08-18 16:59:20 -0400594kbl(mtcars) %>%
Hao Zhu5fe235c2020-08-26 00:26:49 -0400595 kable_paper() %>%
Hao Zhu6107f372018-05-21 00:23:26 -0400596 save_kable(file = "table1.html", self_contained = T)
597```
598
Hao Zhu8f46db82020-08-18 21:48:23 -0400599## Use it with sparkline
Hao Zhu16d66192020-08-19 10:15:34 -0400600Well, this is not a feature but rather a documentation of how to use the `sparkline` package together with this package. The easiest way is sort of a hack. You can call `sparkline::sparkline(0)` somewhere on your document where no one would mind so its dependencies could be loaded without any hurdles. Then you use `sparkline::spk_chr()` to generate the text. For a working example, see: [Chinese names in US babynames](https://cranky-chandrasekhar-cfefcd.netlify.app/)
Hao Zhu8f46db82020-08-18 21:48:23 -0400601
Hao Zhu16d66192020-08-19 10:15:34 -0400602```{r, eval=FALSE}
603# Not evaluated
Hao Zhu8f46db82020-08-18 21:48:23 -0400604library(sparkline)
605sparkline(0)
606```
607
Hao Zhu16d66192020-08-19 10:15:34 -0400608```{r,eval=FALSE}
Hao Zhu8f46db82020-08-18 21:48:23 -0400609spk_dt <- data.frame(
610 var = c("mpg", "wt"),
611 sparkline = c(spk_chr(mtcars$mpg), spk_chr(mtcars$wt))
612)
613
614kbl(spk_dt, escape = F) %>%
615 kable_paper(full_width = F)
616```
617
618
619
Hao Zhu6107f372018-05-21 00:23:26 -0400620# From other packages
621Since the structure of `kable` is relatively simple, it shouldn't be too difficult to convert HTML or LaTeX tables generated by other packages to a `kable` object and then use `kableExtra` to modify the outputs. If you are a package author, feel free to reach out to me and we can collaborate.
622
623## `tables`
Hao Zhuec169362018-05-21 01:05:29 -0400624The latest version of [`tables`](https://CRAN.R-project.org/package=tables) comes with a `toKable()` function, which is compatiable with functions in `kableExtra` (>=0.9.0).
Hao Zhua171b452019-01-15 17:14:34 -0600625
626## `xtable`
627For `xtable` users, if you want to use `kableExtra` functions on that, check out this `xtable2kable()` function shipped with kableExtra 1.0.
628
629```{r, eval=F}
630# Not evaluating
631xtable::xtable(mtcars[1:4, 1:4], caption = "Hello xtable") %>%
632 xtable2kable() %>%
633 column_spec(1, color = "red")
634```