With reactablefmtr, we can easily apply color tiles to
columns within a table by using color_tiles()
within
cell
of reactable::colDef()
.
By default a normalized orange-white-blue color scale is applied to each column.
df <- gapminder %>%
filter(year == 2007) %>%
select(-year) %>%
relocate(lifeExp, .after = last_col())
df %>%
reactable(
defaultColDef = colDef(
cell = color_tiles(.)
)
)
color_tiles()
customization options
Parameter | Description | Default Value |
---|---|---|
data |
name of data set | NULL |
colors |
color palette | c(‘#15607A’,‘#FFFFFF’,‘#FA8C00’) |
color_ref |
column containing color assignments | NULL |
color_by |
column containing value assignments | NULL |
opacity |
opaqueness of color palette | 1 |
bias |
the spacing between colors | 1 |
number_fmt |
the format of the values | NULL |
text_size |
the size of the text | NULL |
text_color |
the color of the text | ‘black’ |
text_color_ref |
column containing text color assignments | NULL |
show_text |
show or hide text | TRUE |
brighten_text |
auto-adjust text color based on color of cell | TRUE |
brighten_text_color |
color of the auto-adjusted text color | ‘white’ |
bold_text |
bold format text | FALSE |
span |
show as row-wise instead of column-wise | FALSE |
box_shadow |
add a box shadow around tiles | FALSE |
tooltip |
enable hover tooltip | FALSE |
animation |
animation of color transitions on sort | ‘background 1s ease’ |
Format numbers
Numbers can be formatted within the number_fmt
argument
in color_tiles()
. One method of formatting the numbers is
by utilizing the formatters from the scales package, and
the numbers can be formatted in the same way as they are in
ggplot2.
df %>%
reactable(
columns = list(
pop = colDef(
cell = color_tiles(., number_fmt = scales::label_number_si(accuracy = 0.1))
),
gdpPercap = colDef(
cell = color_tiles(., number_fmt = scales::comma)
),
lifeExp = colDef(
cell = color_tiles(., number_fmt = scales::label_number(accuracy = 1))
)
)
)
Custom color palettes
If we want to show a different color palette than the default, we can
call them within the colors
argument like so:
library(RColorBrewer)
library(viridis)
df %>%
reactable(
defaultSorted = 'pop',
defaultSortOrder = 'desc',
columns = list(
pop = colDef(
cell = color_tiles(., number_fmt = scales::label_number_si(accuracy = 0.1), colors = viridis::viridis(5))
),
gdpPercap = colDef(
cell = color_tiles(., number_fmt = scales::comma, colors = RColorBrewer::brewer.pal(7, 'Greens'))
),
lifeExp = colDef(
cell = color_tiles(., number_fmt = scales::label_number(accuracy = 1), colors = c('tomato','white','dodgerblue'))
)
)
)
add_legend()
customization options
Parameter | Description | Default Value |
---|---|---|
data |
name of dataset | NULL |
col_name |
name of column containing numeric values | NULL |
bins |
number of bins to be displayed | 5 |
colors |
color palette | c(‘#15607A’,‘#FFFFFF’,‘#FA8C00’) |
bias |
opaqueness of color palette | 1 |
labels |
show or hide value labels | TRUE |
number_fmt |
the format of the values | NULL |
title |
the title above the legend | NULL |
footer |
the footer below the legend | NULL |
align |
align to the left or right of the table | ‘right’ |
If you would like to add a legend for the color palette used within
color_tiles()
, you can do so by including
add_legend()
below the table and listing the color palette
used within color_tiles()
. If no color palette is defined
by the user within add_legend()
, it will show the default
blue-to-orange color palette used in color_tiles()
.
df %>%
reactable(
columns = list(
lifeExp = colDef(
cell = color_tiles(., number_fmt = scales::comma)
)
)
) %>%
add_legend(df, col_name = 'lifeExp')
- 83
- 76
- 72
- 57
- 40
You can add a title and a footer to the legend with
title
and footer
respectively:
df %>%
reactable(
columns = list(
lifeExp = colDef(
cell = color_tiles(., number_fmt = scales::label_number(accuracy = 1))
)
)
) %>%
add_legend(df, col_name = 'lifeExp', title = 'Life Expectancy (yrs)', footer = 'Reported as of 2007')
- 83
- 76
- 72
- 57
- 40
By default, the color palette is broken into 5 distinct bins.
However, we can increase or decrease the number of color bins we would
like to show in the legend by providing a number within
bins
:
df %>%
reactable(
columns = list(
lifeExp = colDef(
cell = color_tiles(., number_fmt = scales::label_number(accuracy = 1))
)
)
) %>%
add_legend(df, col_name = 'lifeExp', title = 'Life Expectancy (yrs)', footer = 'Reported as of 2007', bins = 9)
- 83
- 79
- 76
- 74
- 72
- 65
- 57
- 49
- 40
If you are using a different color palette than the default one
provided, you can specify the color palette in the same way that you did
within color_tiles()
:
df %>%
reactable(
columns = list(
lifeExp = colDef(
cell = color_tiles(., number_fmt = scales::label_number(accuracy = 1), colors = viridis::viridis(5))
)
)
) %>%
add_legend(df, col_name = 'lifeExp', title = 'Life Expectancy (yrs)', footer = 'Reported as of 2007', colors = viridis::viridis(5))
- 83
- 76
- 72
- 57
- 40
If the data within your column is not evenly distributed, you can set
the color bias to lean more towards the higher values or lower values
within the column with bias
. Changing the bias within the
legend is a good visual gauge of how the bias affects the distribution
of colors within the column:
df %>%
reactable(
columns = list(
lifeExp = colDef(
cell = color_tiles(., number_fmt = scales::label_number(accuracy = 1), colors = viridis::viridis(5), bias = 3)
)
)
) %>%
add_legend(df, col_name = 'lifeExp', title = 'Life Expectancy (yrs)', footer = 'Reported as of 2007', colors = viridis::viridis(5), bias = 3)
- 83
- 76
- 72
- 57
- 40
Add a box shadow
Box shadows can be added to the tiles to create a ‘3-D’ effect via
box_shadow
.
df %>%
reactable(
columns = list(
pop = colDef(
cell = color_tiles(., number_fmt = scales::label_number_si(accuracy = 0.1), box_shadow = TRUE)
),
gdpPercap = colDef(
cell = color_tiles(., number_fmt = scales::comma, box_shadow = TRUE)
),
lifeExp = colDef(
cell = color_tiles(., number_fmt = scales::label_number(accuracy = 1), box_shadow = TRUE)
)
)
)
Assign colors from another column
Colors can be conditionally assigned to values based on another
column by using color_ref
.
In the example below, we assigned a blue color to Compact cars, a red
color to Sporty cars, and a gold color to Vans using
dplyr::case_when()
.
Then within color_tiles()
, we reference the name of the
conditional column we just created to apply the colors to the values in
MPG.city and MPG.highway.
df_continents <- df %>%
mutate(
continent_cols = dplyr::case_when(
continent == 'Africa' ~ 'orange',
continent == 'Americas' ~ 'pink',
continent == 'Asia' ~ 'violet',
continent == 'Europe' ~ 'gold',
continent == 'Oceania' ~ 'skyblue',
TRUE ~ 'grey'
)
)
df_continents %>%
reactable(
defaultSorted = 'continent',
defaultSortOrder = 'desc',
columns = list(
continent_cols = colDef(show = FALSE),
pop = colDef(
cell = color_tiles(., number_fmt = scales::label_number_si(accuracy = 0.1), color_ref = 'continent_cols')
),
gdpPercap = colDef(
cell = color_tiles(., number_fmt = scales::comma, color_ref = 'continent_cols')
),
lifeExp = colDef(
cell = color_tiles(., number_fmt = scales::label_number(accuracy = 1), color_ref = 'continent_cols')
)
)
)
We can further apply the conditional colors to the entire dataset by
setting the style within defaultColDef
: