Package 'reactablefmtr'

Description

Use 'add_icon_legend()' to place a legend below a reactable table. The legend can be used to display the icon set used within 'icon_sets()'. The legend can be aligned to the right or left of the table. Custom labels can be applied to the upper and lower bounds of the legend.

Usage

add_icon_legend(
  table = NULL,
  icon_set = NULL,
  show_labels = TRUE,
  labels = NULL,
  align = "right",
  title = NULL,
  footer = NULL,
  margin = NULL
)

Arguments

Value

a function that adds a source below a reactable table.

Examples

## Not run: 
## Create the reactable table and then pipe in the legend
library(dplyr)
data <- iris[10:29, ]
table <- reactable(data,
columns = list(Petal.Length = colDef(
cell = icon_sets(data, icon_set = "medals"))))

table %>%
  add_icon_legend(icon_set = "medals")

## The legend can be aligned to the left or right of the table
table %>%
  add_icon_legend(icon_set = "medals", align = "left")

## Add custom labels to each icon in the legend
table %>%
  add_icon_legend(icon_set = "medals", labels = c("Shortest Length","Avg Length","Longest Length"))

## Add a title and footer to the legend
table %>%
  add_icon_legend(icon_set = "medals", title = "Icon Legend Title", footer = "Icon Legend Footer")

## End(Not run)

Description

Use 'add_legend()' to place a legend below a reactable table. The legend can be used to display the color scale of a color palette used within the table. Supply the name of the dataset used with 'data' and the name of the column you would like to show a legend for with 'col_name'. By default, the colors within 'colors' are the default color palette used in 'color_tiles()' and 'color_scales()', but can be modified to match the color palette used in the column of the reactable table. The number of bins for the legend can be changed to any number. By default, label bins are given. The labels under the bins can be formatted with 'number_fmt' or hidden by setting 'labels' to FALSE. Use 'title' to place a title above the legend, and 'footer' to place a footer below the legend. The legend can be aligned to either the bottom-left or bottom-right of the table.

Usage

add_legend(
  table,
  data = NULL,
  col_name = NULL,
  bins = 5,
  colors = NULL,
  bias = 1,
  labels = TRUE,
  number_fmt = NULL,
  title = NULL,
  footer = NULL,
  align = "right"
)

Arguments

Value

a function that adds a legend below a reactable table.

Examples

library(magrittr)
## Create the reactable table and then pipe in the legend
data <- iris[10:29, ]
table <- reactable(data,
columns = list(Sepal.Length = colDef(
cell = color_tiles(data))))

table %>%
  add_legend(data = data,
             col_name = "Sepal.Length")

## The legend can be aligned to either the left or right side
table %>%
  add_legend(data = data,
             col_name = "Sepal.Length",
             align = "left")

## Change the number of bins within the legend
table %>%
  add_legend(data = data,
             col_name = "Sepal.Length",
             bins = 9)

## Add a title and footer to the legend
table %>%
  add_legend(data = data,
             col_name = "Sepal.Length",
             title = "Sepal Length",
             footer = "measured in cm")

## If custom colors are used in the table, you can assign those to the legend as well
table <- reactable(data,
columns = list(Sepal.Length = colDef(
style = color_scales(data, colors = c("red","white","blue")))))

table %>%
  add_legend(data = data,
             col_name = "Sepal.Length",
             colors = c("red","white","blue"))

Description

Use 'add_source()' to place a source below a reactable or reactablefmtr table. The same options that are present in 'add_title()' and 'add_subtitle()' are also available in 'add_source()'. The source can be aligned to the left, right, or center with the align option. The text properties of the source, such as the font size and font style can be customized. The background color of the source can also be adjusted as well as the margin around the source.

Usage

add_source(
  table = NULL,
  source = NULL,
  align = "left",
  font_color = "#000",
  font_size = 16,
  font_style = "normal",
  font_weight = "normal",
  text_decoration = NULL,
  text_transform = NULL,
  letter_spacing = NULL,
  word_spacing = NULL,
  text_shadow = NULL,
  background_color = "#FFFFFF",
  margin = NULL
)

Arguments

Value

a function that adds a source below a reactable table.

Examples

## Not run: 
## Create the reactable table and then pipe in the source
table <- reactable(iris[10:29, ])

table %>%
  add_source("This is a source")

## Use options to adjust the style and position of the source
table %>%
  add_source("This is a source", font_style = "italic", font_color = "grey")

## End(Not run)

Description

Use 'add_subtitle()' to place a subtitle above a reactable or reactablefmtr table. The same options that are present in 'add_title()' and 'add_source()' are also available in 'add_subtitle()'. The subtitle can be aligned to the left, right, or center with the align option. The text properties of the subtitle, such as the font size and font style can be customized. The background color of the subtitle can also be adjusted as well as the margin around the subtitle.

Usage

add_subtitle(
  table = NULL,
  subtitle = NULL,
  align = "left",
  font_color = "#000",
  font_size = 24,
  font_style = "normal",
  font_weight = "bold",
  text_decoration = NULL,
  text_transform = NULL,
  letter_spacing = NULL,
  word_spacing = NULL,
  text_shadow = NULL,
  background_color = "#FFFFFF",
  margin = NULL
)

Arguments

Value

a function that adds a subtitle above a reactable table.

Examples

## Not run: 
## Create the reactable table and then pipe in the subtitle
table <- reactable(iris[10:29, ])

table %>%
  add_subtitle("This is a subtitle")

## If a title proceeds a subtitle, the subtite will be placed below the title
table %>%
  add_title("This is a title") %>%
  add_subtitle("This is a subtitle")

## Use options to adjust the style and position of the subtitle
table %>%
  add_subtitle("This is a subtitle", align = "center", font_color = "red")

## End(Not run)

Description

Use 'add_title()' to place a title above a reactable or reactablefmtr table. The title can be aligned to the left, right, or center with the align option. The text properties of the title, such as the font size and font style can be customized. The background color of the title can also be adjusted as well as the margin around the title.

Usage

add_title(
  table = NULL,
  title = NULL,
  align = "left",
  font_color = "#000",
  font_size = 32,
  font_style = "normal",
  font_weight = "bold",
  text_decoration = NULL,
  text_transform = NULL,
  letter_spacing = NULL,
  word_spacing = NULL,
  text_shadow = NULL,
  background_color = "#FFFFFF",
  margin = NULL
)

Arguments

Value

a function that adds a title above a reactable table.

Examples

## Not run: 
## Create the reactable table and then pipe in the title
table <- reactable(iris[10:29, ])

table %>%
  add_title("This is a title")

## Use options to adjust the style and position of the title
table %>%
  add_title("This is a title", align = "center", font_color = "red")

## End(Not run)

Description

The 'background_img()' function fills the background of a cell with an image from the web. The image must be provided with a http or https address. The difference between 'background_img()' and 'embed_img()' is the image in 'background_img()' takes up the entire contents of a cell whereas 'embed_img()' does not. 'background_img()' can be used in conjunction with 'embed_img()' and the image will be placed behind the image from 'embed_img()'. 'background_img()' will also directly accept a singular image URL within 'img' that does not come from the column itself. Additionally, images can be assigned from another column by providing the name of the column containing the img URL's in quotes within 'img_ref'. 'background_img()' should be placed within the style argument of reactable::colDef.

Usage

background_img(
  data,
  height = "100%",
  width = "100%",
  position = "center",
  img = NULL,
  img_ref = NULL
)

Arguments

Value

a function that renders a background image to a column containing a valid web link.

Examples

## If no image links are in the original dataset, you need to assign them like so:
library(dplyr)
data <- iris %>%
 mutate(
 img = case_when(
 Species == "setosa" ~
 "https://upload.wikimedia.org/wikipedia/commons/d/d9/Wild_iris_flower_iris_setosa.jpg",
 Species == "versicolor" ~
 "https://upload.wikimedia.org/wikipedia/commons/7/7a/Iris_versicolor.jpg",
 Species == "virginica" ~
 "https://upload.wikimedia.org/wikipedia/commons/9/9f/Iris_virginica.jpg",
 TRUE ~ "NA"))

reactable(data,
 columns = list(
  img = colDef(style = background_img())))

## By default, images are given a size of 100% to fill the entire cell,
## but you can adjust the size using height and width:
reactable(data,
 columns = list(
  img = colDef(style = background_img(height = "50%", width = "50%"))))

## An image can be applied directly over an existing column using img:
reactable(data,
 columns = list(
  Species = colDef(
  style = background_img(
  img = "https://upload.wikimedia.org/wikipedia/commons/2/26/Colored_flowers_e.jpg"))))

## Conditionally assigned images can be applied directly over an existing column using img_ref:
reactable(data,
 columns = list(
  Species = colDef(style = background_img(data, img_ref = "img"))))

Description

The 'bubble_grid()' function creates a customizable bubble grid chart within a reactable table. The size of the bubbles are in relation to the values within each column - the bigger the value, the bigger the size of the bubble. There are two shapes available for the bubble grid: circles and squares, which can be specified with 'shape'. The colors can be provided within a vector in 'colors' or via another column in the dataset by referencing the column by name with 'color_ref'. If more than one color is provided in 'colors', the colors will be assigned to the values from low to high within the palette. This is the default setting of 'bubble_grid()', which applies a blue-to-orange color palette to the bubbles. However, a singular color can be provided instead if desired. 'bubble_grid()' can be applied to columns containing character data by referencing another column with numeric values in it with 'color_by'. The opacity of the colors provided can be adjusted by providing a value between 0 and 1 in 'opacity'. 'text_color' can be used to change the color of the values displayed within the bubbles. If values are displayed within a dark-colored background, 'brighten_text' will display the values in white text so they are more visible. For smaller values with a dark-colored background, the values may not be visible. If you would like these numbers to be visible, you could do so by either: A) setting 'brighten_text' to FALSE and assigning a universal color to the text within 'text_color'. B) leaving 'brighten_text' as TRUE and setting 'brighten_text_color' to a darker color other than the default white color. If the user wants to assign colors row-wise instead of column-wise, set 'span' equal to TRUE to apply across all columns. Or can provide the names of the columns by either column name or column position number to apply to only a subset of the columns. The format of the numbers within the bubbles can be changed by defining the format from a package such as the scales package within 'number_fmt'. 'bubble_grid()' needs to placed within the cell argument in reactable::colDef.

Usage

bubble_grid(
  data,
  shape = "circles",
  colors = c("#15607A", "#FFFFFF", "#FA8C00"),
  color_ref = NULL,
  color_by = NULL,
  min_value = NULL,
  max_value = NULL,
  opacity = 1,
  bias = 1,
  number_fmt = NULL,
  text_size = NULL,
  text_color = "black",
  text_color_ref = NULL,
  show_text = TRUE,
  brighten_text = TRUE,
  brighten_text_color = "white",
  bold_text = FALSE,
  span = FALSE,
  box_shadow = FALSE,
  tooltip = FALSE,
  animation = "background 1s ease"
)

Arguments

Value

a function that builds a bubble grid chart to a column of values.

Examples

data <- iris[10:29, ]

## By default, the bubble_grid() function uses a blue-white-orange three-color pattern:
reactable(
  data,
  columns = list(
    Petal.Length = colDef(
      align = "center",
      cell = bubble_grid(data))))

## You can specify your own color palette or a single color across all values with `colors`;
reactable(
  data,
  columns = list(
    Petal.Length = colDef(
      align = "center",
      cell = bubble_grid(data,
                         colors = c("orange")))))

## Use squares instead of circles:
reactable(
  data,
  columns = list(
    Petal.Length = colDef(
      align = "center",
      cell = bubble_grid(data,
                         shape = "squares"))))

## Hide text and show on hover by enabling the tooltip:
reactable(
  data,
  columns = list(
    Petal.Length = colDef(
      align = "center",
      cell = bubble_grid(data,
                         show_text = FALSE,
                         tooltip = TRUE))))

## Control the scale of the circles by adjusting the min and max values:
reactable(
  data,
  columns = list(
    Petal.Length = colDef(
      align = "center",
      cell = bubble_grid(data,
                         min_value = 1,
                         max_value = 2))))

## Use span to apply bubbles to values in relation to the entire data set:
reactable(
  data,
  defaultColDef = colDef(
    cell = bubble_grid(data,
                       span = TRUE)))

## Use number_fmt to format numbers using the scales package:
car_prices <- MASS::Cars93[20:49, c("Make", "Price")]

reactable(car_prices,
  defaultColDef = colDef(
    align = "center",
    cell = bubble_grid(car_prices,
                       number_fmt = scales::dollar)))

Description

Use 'cell_style()' to customize the appearance of certain cells in a reactable or reactablefmtr table. Assign custom styles by either row number(s) or by values within a particular column. The font color, font size, font style, and font weight can all be modified. Borders can also be placed around cells and customized by style, width, and color. By default, animation is applied to the cells that are styled, but can be turned off by setting to 'none'. Some options within 'cell_style()' will work with other reactablefmtr formatters (such as data_bars() and color_tiles()), but it is not fully supported and should be used separately, not together. 'cell_style()' needs to be placed within the style argument of reactable::colDef.

Usage

cell_style(
  data,
  rows = NULL,
  values = NULL,
  font_color = NULL,
  font_size = NULL,
  font_style = "normal",
  font_weight = "normal",
  horizontal_align = "right",
  vertical_align = "top",
  text_decoration = NULL,
  border_width = NULL,
  border_style = NULL,
  border_color = NULL,
  background_color = NULL,
  animation = "1s ease"
)

Arguments

Value

a function that adds a custom style to a row or rows in a reactable table.

Examples

## Not run: 
## Add a dotted blue border around the third row in Sepal.Length
data <- iris[10:29, ]
reactable(data,
         columns = list(
           Sepal.Length = colDef(
             style = cell_style(data,
                                rows = 3,
                                border_width = "thick",
                                border_color = "blue",
                                border_style = "dotted"))))

## For all setosa species, highlight cell yellow and assign red font color
data <- iris[10:100, ]
reactable(data,
         columns = list(
         Species = colDef(
             style = cell_style(data,
                                values = "setosa",
                                font_color = "red",
                                background_color = "yellow"))))

## End(Not run)

Description

Bootstrap-inspired cerulean theme

Usage

cerulean(
  font_size = 14,
  font_color = "#141415",
  header_font_size = 15,
  header_font_color = "#cfe9f7",
  background_color = NULL,
  cell_padding = 6,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard cerulean theme
reactable(data,
          theme = cerulean())

## Additional options applied
reactable(data,
          theme = cerulean(font_size = 12, font_color = "grey", cell_padding = 3))

Description

Simple clean-look theme

Usage

clean(
  font_size = 14,
  font_color = "#222222",
  header_font_size = 15,
  header_font_color = "#222222",
  background_color = NULL,
  cell_padding = 6,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard clean theme
reactable(data,
          theme = clean())

## Additional options applied
reactable(data,
          theme = clean(font_size = 12, font_color = "grey", cell_padding = 3))

Description

The 'color_scales()' function conditionally colors each cell of a column depending on their value in relation to other values in that particular column. The colors can be provided within a vector in 'colors' or via another column in the dataset by referencing the column by name with 'color_ref'. The opacity of the colors provided can be adjusted by providing a value between 0 and 1 in 'opacity'. 'text_color' can be used to change the color of the values. If values are displayed within a dark-colored background, 'brighten_text' will display the values in white text so they are more visible. The color of 'brighten_text_color' can be changed to a color other than white if desired. If the user wants to assign colors row-wise instead of column-wise, set 'span' equal to TRUE to apply across all columns. Or can provide the names of the columns by either column name or column position number to apply to only a subset of the columns. 'color_scales()' should be placed within the style argument in reactable::colDef.

Usage

color_scales(
  data,
  colors = c("#15607A", "#FFFFFF", "#FA8C00"),
  color_ref = NULL,
  color_by = NULL,
  opacity = 1,
  bias = 1,
  min_value = NULL,
  max_value = NULL,
  even_breaks = FALSE,
  text_size = NULL,
  text_color = "black",
  text_color_ref = NULL,
  show_text = TRUE,
  brighten_text = TRUE,
  brighten_text_color = "white",
  bold_text = FALSE,
  border_width = NULL,
  border_style = NULL,
  border_color = NULL,
  span = FALSE,
  animation = "background 1s ease"
)

Arguments

Value

a function that applies conditional colors to a column of numeric values.

Examples

data <- iris[10:29, ]

## By default, the colors_scales() function uses a blue-white-orange three-color pattern
reactable(data,
 columns = list(
 Petal.Length = colDef(style = color_scales(data))))

## If only two colors are desired,
## you can specify them with colors = 'c(color1, color2)';
reactable(data,
 columns = list(
 Petal.Length = colDef(style = color_scales(data,
 colors = c("red", "green")))))

## Apply color_scales() across all numeric columns using reactable::defaultColDef
reactable(data,
defaultColDef = colDef(style = color_scales(data)))

## Use span to apply colors to values in relation to the entire dataset
reactable(data,
defaultColDef = colDef(style = color_scales(data, span = TRUE)))

## Span can take column names
reactable(data,
defaultColDef = colDef(style = color_scales(data, span = c("Sepal.Length", "Sepal.Width"))))

## Or it can also take column positions instead
reactable(data,
defaultColDef = colDef(style = color_scales(data, span = 1:2)))

Description

The 'color_tiles()' function conditionally colors the background of each cell similarly to color_scales(). The difference is that color_tiles() uses round colored tiles around values instead of the entire background of the cell. Another difference is color_tiles() allows number formatting with number_fmt whereas color_scales() does not. The colors can be provided within a vector in 'colors' or via another column in the dataset by referencing the column by name with 'color_ref'. The opacity of the colors provided can be adjusted by providing a value between 0 and 1 in 'opacity'. 'text_color' can be used to change the color of the values. If values are displayed within a dark-colored background, 'brighten_text' will display the values in white text so they are more visible. The color of 'brighten_text_color' can be changed to a color other than white if desired. If the user wants to assign colors row-wise instead of column-wise, set 'span' equal to TRUE to apply across all columns. Or can provide the names of the columns by either column name or column position number to apply to only a subset of the columns. 'color_tiles()' needs to placed within the cell argument in reactable::colDef.

Usage

color_tiles(
  data,
  colors = c("#15607A", "#FFFFFF", "#FA8C00"),
  color_ref = NULL,
  color_by = NULL,
  opacity = 1,
  bias = 1,
  number_fmt = NULL,
  min_value = NULL,
  max_value = NULL,
  even_breaks = FALSE,
  text_size = NULL,
  text_color = "black",
  text_color_ref = NULL,
  show_text = TRUE,
  brighten_text = TRUE,
  brighten_text_color = "white",
  bold_text = FALSE,
  box_shadow = FALSE,
  border_width = NULL,
  border_style = NULL,
  border_color = NULL,
  span = FALSE,
  animation = "background 1s ease",
  tooltip = FALSE,
  tooltip_show_name = FALSE,
  tooltip_number_fmt = NULL,
  tooltip_style = NULL,
  tooltip_dotted_line = FALSE,
  tooltip_theme = "material",
  tooltip_arrow = TRUE,
  tooltip_trigger = "mouseenter",
  tooltip_animation = "fade",
  tooltip_duration = c(275, 250),
  tooltip_distance = 10,
  tooltip_placement = "top",
  tooltip_auto_adjust = TRUE,
  tooltip_img_size = c(26, 26),
  tooltip_secondary_columns = NULL,
  tooltip_show_name_secondary = TRUE,
  tooltip_number_fmt_secondary = NULL,
  tooltip_style_secondary = NULL
)

Arguments

Value

a function that applies conditional color tiles to a column of numeric values.

Examples

data <- iris[10:29, ]

## By default, the colors_tiles() function uses a blue-white-orange three-color pattern
reactable(data,
 columns = list(
 Petal.Length = colDef(cell = color_tiles(data))))

## If only two colors are desired,
## you can specify them with colors = 'c(color1, color2)';
reactable(data,
 columns = list(
 Petal.Length = colDef(cell = color_tiles(data,
 colors = c("red", "green")))))

## Use span to apply colors to values in relation to the entire dataset
reactable(data,
defaultColDef = colDef(cell = color_tiles(data, span = TRUE)))

## Span can take column names
reactable(data,
defaultColDef = colDef(cell = color_tiles(data, span = c("Sepal.Length", "Sepal.Width"))))

## Or it can also take column positions instead
reactable(data,
defaultColDef = colDef(cell = color_tiles(data, span = 1:2)))

## Use number_fmt to format numbers using the scales package
car_prices <- MASS::Cars93[20:49, c("Make", "Price")]

reactable(car_prices,
defaultColDef = colDef(cell = color_tiles(car_prices,
number_fmt = scales::dollar)))

Description

Bootstrap-inspired cosmo theme

Usage

cosmo(
  font_size = 14,
  font_color = "#141415",
  header_font_size = 15,
  header_font_color = "#ffffff",
  background_color = "#f8f9fa",
  cell_padding = 6,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard cosmo theme
reactable(data,
          theme = cosmo())

## Additional options applied
reactable(data,
          theme = cosmo(font_size = 12, font_color = "grey", cell_padding = 3))

Description

Bootstrap-inspired cyborg theme

Usage

cyborg(
  font_size = 14,
  font_color = "#888888",
  header_font_size = 15,
  header_font_color = "#7b7b7b",
  background_color = "#060606",
  cell_padding = 6,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard cyborg theme
reactable(data,
          theme = cyborg())

## Additional options applied
reactable(data,
          theme = cyborg(font_size = 12, font_color = "grey", cell_padding = 3))

Description

dark table theme

Usage

dark(
  font_size = 15,
  font_color = "#FFFFFF",
  header_font_size = 16,
  header_font_color = "#FFFFFF",
  background_color = "#252525",
  cell_padding = 6,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard dark theme
reactable(data,
          theme = dark())

## Additional options applied
reactable(data,
          theme = dark(font_size = 12, font_color = "red", cell_padding = 3))

Description

Bootstrap-inspired darkly theme

Usage

darkly(
  font_size = 14,
  font_color = "#ffffff",
  header_font_size = 15,
  header_font_color = "#afbdcc",
  background_color = "#222222",
  cell_padding = 6,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard darkly theme
reactable(data,
          theme = darkly())

## Additional options applied
reactable(data,
          theme = darkly(font_size = 12, font_color = "grey", cell_padding = 3))

Description

The 'data_bars()' function adds a horizontal bar to each row of a column. The length of the bars are relative to the value of the row in relation to other values within the same column. The maximum width of the filled bars can be adjusted. Ex. if you are displaying percentages, and the maximum value in your column is 50 you could increase the maximum fill to 100 The values for the bars can be displayed inside or outside the filled bars with the 'text_position' option. By default, the values are displayed on the outside-end of the filled bars. The fill_color of both the fill and the background of the bars can be adjusted. To adjust the fill_color of the filled bar, use 'fill_color'. If more than one color is provided, a conditional color palette will be applied to to the values, or if 'fill_gradient' is set to TRUE, a left-to-right gradient fill color will be applied. The fill colors can also be provided via another column in the dataset by referencing the column by name with 'fill_color_ref'. 'text_color' can be used to change the color of the text_position. By default, the label color is black. If values are displayed inside the bars and a dark color palette is used to fill the bars, 'brighten_text' will display the values in white text so the values are visible by default. The color of 'brighten_text_color' can be changed to a color other than white if desired. The border around the filled bars can be controlled via three different border options: 'border_style', 'border_width', and 'border_color'. An icon or image can be added to the data bars with 'icon' or 'img'. Alternatively, icons and images can be assigned from another column with 'icon_ref' and 'img_ref', similar to 'fill_color_ref'. The color of the icons can be assigned through either 'icon_color' (a single color) or 'icon_color_ref' (from another column). The size of the images can be adjusted using 'img_height' and 'img_width'. The size of the icons can be adjusted using 'icon_size'. 'data_bars()' works with columns containing both positive and negative values. It should be placed within the cell argument in reactable::colDef.

Usage

data_bars(
  data,
  fill_color = "#15607A",
  fill_color_ref = NULL,
  fill_by = NULL,
  fill_opacity = 1,
  fill_gradient = FALSE,
  background = "#EEEEEE",
  bias = 1,
  max_value = NULL,
  min_value = NULL,
  align_bars = "left",
  bar_height = NULL,
  text_position = "inside-end",
  force_outside = NULL,
  text_color = "black",
  text_color_ref = NULL,
  text_size = NULL,
  brighten_text = TRUE,
  brighten_text_color = "white",
  bold_text = FALSE,
  number_fmt = NULL,
  border_width = NULL,
  border_style = NULL,
  border_color = NULL,
  icon = NULL,
  icon_ref = NULL,
  icon_size = 20,
  icon_color = NULL,
  icon_color_ref = NULL,
  img = NULL,
  img_ref = NULL,
  img_height = 20,
  img_width = 20,
  box_shadow = FALSE,
  round_edges = FALSE,
  tooltip = FALSE,
  animation = "width 1s ease"
)

Arguments

Value

a function that applies data bars to a column of numeric values.

Examples

data <- MASS::Cars93[20:49, c("Make", "MPG.city", "MPG.highway")]

## By default, data bars are aligned left and text_position are placed on the inside end
reactable(data,
          defaultColDef = colDef(
            cell = data_bars(data)))

## Align the bars to the right
reactable(data,
          defaultColDef = colDef(
            cell = data_bars(data,
                             align_bars = "right")))

## Move the text labels outside of the filled bars
reactable(data,
          defaultColDef = colDef(
            cell = data_bars(data,
                             text_position = "outside-end")))

## Apply multiple fill_color to the filled bars
reactable(data,
          defaultColDef = colDef(
            cell = data_bars(data,
                             fill_color = c("lightblue","royalblue","navy"))))

## Apply a fill_gradient pattern to the filled bars
reactable(data,
          defaultColDef = colDef(
            cell = data_bars(data,
                             fill_color = c("lightblue","royalblue","navy"),
                             fill_gradient = TRUE,
                             text_position = "outside-end")))

Description

The 'data_bars_gradient()' function is depreciated. The new version of 'data_bars()' can convert colors into gradients with 'gradient = TRUE'. Please use 'data_bars()' instead.

Usage

data_bars_gradient(
  data,
  colors = c("#1efffd", "#1e20ff"),
  background = "white",
  number_fmt = NULL
)

Arguments

Value

a function that applies data bars to a column of numeric values.

Examples

data <- MASS::Cars93[20:49, c("Make", "MPG.city", "MPG.highway")]

## By default, colors are provided
reactable(data,
defaultColDef = colDef(
align = "left",
cell = data_bars(data,
fill_color = c("#1efffd", "#1e20ff"),
fill_gradient = TRUE)))

Description

The 'data_bars_pos_neg()' function is depreciated. The new version of 'data_bars()' can handle both positive and negative values now. Please use 'data_bars()' instead.

Usage

data_bars_pos_neg(data, colors = c("red", "green"), number_fmt = NULL)

Arguments

Value

a function that applies positive and negative data bars to a column of numeric values.

Examples

data <- data.frame(
company = sprintf("Company%02d", 1:10),
profit_chg = c(0.2, 0.685, 0.917, 0.284, 0.105, -0.701, -0.528, -0.808, -0.957, -0.11))

## By default, the negative values are assigned a red bar,
## and the positive values are assigned a green bar
reactable(data,
bordered = TRUE,
columns = list(
 company = colDef(name = "Company",
 minWidth = 100),
 profit_chg = colDef(
   name = "Change in Profit",
   defaultSortOrder = "desc",
   align = "center",
   minWidth = 400,
   cell = data_bars(data))))

## You can apply a relative color scale to the bars by assigning three or more colors
reactable(data,
bordered = TRUE,
columns = list(
  company = colDef(name = "Company",
  minWidth = 100),
  profit_chg = colDef(
  name = "Change in Profit",
  defaultSortOrder = "desc",
  align = "center",
  minWidth = 400,
  cell = data_bars(data,
  fill_color = c("#ff3030", "#ffffff", "#1e90ff")))))

Description

Reactable-inspired default theme

Usage

default(
  font_size = 15,
  font_color = "#333333",
  header_font_size = 15,
  header_font_color = "#333333",
  background_color = NULL,
  cell_padding = 6,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard default theme
reactable(data,
          theme = default())

## Additional options applied
reactable(data,
          theme = default(font_size = 12, font_color = "grey", cell_padding = 3))

Description

The 'embed_img()' function adds images obtained from the web to a column within reactable. It should be placed within the cell argument in reactable::colDef.

Usage

embed_img(
  data,
  height = 24,
  width = 24,
  horizontal_align = "center",
  label = NULL,
  label_position = "right"
)

Arguments

Value

a function that renders an image to a column containing a valid web link.

Examples

## If no image links are in the original dataset, you need to assign them like so:
library(dplyr)
data <- iris %>%
 mutate(
 img = case_when(
 Species == "setosa" ~
 "https://upload.wikimedia.org/wikipedia/commons/d/d9/Wild_iris_flower_iris_setosa.jpg",
 Species == "versicolor" ~
 "https://upload.wikimedia.org/wikipedia/commons/7/7a/Iris_versicolor.jpg",
 Species == "virginica" ~
 "https://upload.wikimedia.org/wikipedia/commons/9/9f/Iris_virginica.jpg",
 TRUE ~ "NA"))

## Then use embed_img() to display images
reactable(data,
columns = list(
 img = colDef(cell = embed_img())))

## By default, images are given a size of 24px by 24px,
## but you can adjust the size using height and width:
reactable(data,
columns = list(
 img = colDef(cell = embed_img(height = 50, width = 45))))

## Optionally assign a label to the image from another column
reactable(data,
columns = list(
 img = colDef(cell = embed_img(data, label = "Species"))))

Description

ESPN-inspired table theme

Usage

espn(
  font_size = 12,
  font_color = "#6C6D6F",
  header_font_size = 11,
  header_font_color = "#48494a",
  background_color = NULL,
  cell_padding = 7,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard espn theme
reactable(data,
          theme = espn())

## Additional options applied
reactable(data,
          theme = espn(font_size = 12, font_color = "grey", cell_padding = 3))

Description

538-inspired table theme

Usage

fivethirtyeight(
  font_size = 14,
  font_color = "#222222",
  header_font_size = 12,
  header_font_color = "#000000",
  background_color = NULL,
  cell_padding = 5,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard fivethirtyeight theme
reactable(data,
          theme = fivethirtyeight())

## Additional options applied
reactable(data,
          theme = fivethirtyeight(font_size = 12, font_color = "grey", cell_padding = 3))

Description

Bootstrap-inspired flatly theme

Usage

flatly(
  font_size = 14,
  font_color = "#212529",
  header_font_size = 15,
  header_font_color = "#ffffff",
  background_color = NULL,
  cell_padding = 6,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard flatly theme
reactable(data,
          theme = flatly())

## Additional options applied
reactable(data,
          theme = flatly(font_size = 12, font_color = "grey", cell_padding = 3))

Description

The 'gauge_chart()' function displays numeric values in a column in a gauge or aka a speedometer chart. The minimum and maximum values that are present in the column can be added to the gauge chart by setting 'show_min_max' to TRUE. By default, the minimum and maximum bounds of the gauge chart are the min/max of the column, but can be changed with 'min_value' and 'max_value'. The format of the min/max values and the values shown within the gauge chart can be changed with 'number_fmt'. There are two sizes available for the gauge. The smaller default size 1 and the bigger size 2. The size can be specified within 'size'. Many options that are available in 'data_bars()' are also available in 'gauge_chart()'. There are a few different ways to color the fill of the gauge. One way would be to apply either a single or multiple colors within 'fill_color'. Colors may be assigned via another column if referenced within 'fill_color_ref'. The opacity of the fill color can be controlled with 'opacity'. If multiple colors are used within 'fill_color', the bias of the color normalization can be controlled with 'bias'. The empty fill of the gauge can be colored with 'background'. The color of the values within the gauge can be changed using 'text_color'. Or they can be assigned via another column with 'text_color_ref'. 'gauge_chart()' needs to placed within the cell argument in reactable::colDef.

Usage

gauge_chart(
  data,
  fill_color = "#15607A",
  background = "#EEEEEE",
  show_min_max = FALSE,
  size = 1,
  min_value = NULL,
  max_value = NULL,
  number_fmt = NULL,
  fill_color_ref = NULL,
  text_color = "black",
  bold_text = FALSE,
  min_text_color = "black",
  max_text_color = "black",
  text_color_ref = NULL,
  text_size = NULL,
  bias = 1,
  opacity = 1,
  tooltip = FALSE,
  animation = "transform 1s ease"
)

Arguments

Value

a function that displays values in a column in a gauge chart.

Examples

library(dplyr)
data <- iris[45:54, ]

## Show values within a gauge chart:
reactable(
data,
defaultColDef = colDef(
align = "left",
maxWidth = 150,
cell = gauge_chart(data)))

## Show the min and max below the gauge:
reactable(
data,
defaultColDef = colDef(
align = "left",
maxWidth = 150,
cell = gauge_chart(data, show_min_max = TRUE)))

## Adjust the min and max value of the gauge:
reactable(
data,
defaultColDef = colDef(
align = "left",
maxWidth = 150,
cell = gauge_chart(data, show_min_max = TRUE, min_value = 0, max_value = 7)))

## Increase the size of the gauge chart:
reactable(
data,
defaultColDef = colDef(
align = "left",
maxWidth = 150,
cell = gauge_chart(data, size = 2)))

## Assign multiple colors to create a normalized fill based on value:
reactable(
data,
defaultColDef = colDef(
align = "left",
maxWidth = 150,
cell = gauge_chart(data, fill_color = c("blue","white","orange"))))

## Conditionally apply colors from another column:
data %>%
mutate(color_assign = case_when(
Species == "setosa" ~ "red",
Species == "versicolor" ~ "forestgreen",
TRUE ~ "grey")) %>%
reactable(
.,
defaultColDef = colDef(
align = "left",
maxWidth = 150,
cell = gauge_chart(., fill_color_ref = "color_assign")))

## Change the color of the empty fill of the gauge:
reactable(
data,
defaultColDef = colDef(
align = "left",
maxWidth = 150,
cell = gauge_chart(data, background = "transparent")))

Description

Apply a font from Google Fonts <https://fonts.google.com/> to the table.

Usage

google_font(
  table = NULL,
  font_family = "Poppins",
  font_weight = 400,
  font_style = "normal"
)

Arguments

Value

a function that applies a font to a reactable table.

Examples

## Not run: 
data <- iris[10:29, ]

## Default 'Poppins' font from Google Fonts
reactable(data) %>%
google_font()

## Apply styles to fonts
reactable(data) %>%
google_font("Roboto Mono", font_weight = 500, font_style = "italic")

## End(Not run)

Description

Add a styled border beneath rows of specified groups on sort. Must be placed within reactable::rowStyle(). Credit to Greg Lin, creator of reactable for writing the JS function.

Usage

group_border_sort(
  columns = NULL,
  border_width = "thin",
  border_color = "#777",
  border_style = "solid"
)

Arguments

Value

a function that applies a bottom border to each group in a column of a reactable table.

Examples

data <- MASS::Cars93[1:20, c("Manufacturer", "Model", "Type", "MPG.city")]

## Add border beneath each unique group within a column on sort:
reactable(data,
pagination = FALSE,
rowStyle = group_border_sort("Manufacturer")
)

## Can specify up to 4 columns:
reactable(data,
pagination = FALSE,
rowStyle = group_border_sort(columns = c("Manufacturer","Model","Type"))
)

## Apply styles to the border:
reactable(data,
pagination = FALSE,
rowStyle = group_border_sort(columns = c("Manufacturer","Model","Type"),
                             border_color = "red",
                             border_style = "dashed",
                             border_width = "3px")
)

Description

Hide rows containing duplicate values on sort. Must be placed within reactable::colDef(style). Credit to Greg Lin, creator of reactable for writing the JS function.

Usage

group_merge_sort(col_name = NULL)

Arguments

Value

a function that hides duplicate values on sort in a reactable table.

Examples

data <- MASS::Cars93[1:20, c("Manufacturer", "Model", "Type", "MPG.city")]

## Merge unique groups in a column:
reactable(data,
pagination = FALSE,
columns = list(Manufacturer = colDef(
style = group_merge_sort("Manufacturer")
))
)

## Works with columns containing numeric data as well:
reactable(data,
pagination = FALSE,
columns = list(MPG.city = colDef(
style = group_merge_sort("MPG.city")
))
)

Description

Color of highlight used in 'react_sparkbar'.

Usage

highlight_bars(
  first = "transparent",
  last = "transparent",
  min = "transparent",
  max = "transparent"
)

Arguments

Value

a function that provides colors for specific bars.

Description

The 'highlight_max()' function assigns a font color and/or background color to the maximum value in a column. It should be placed within the style argument in reactable::colDef.

Usage

highlight_max(data, font_color = "green", highlighter = NULL)

Arguments

Value

a function that applies a color to the maximum value in a column of numeric values.

Examples

data <- MASS::road[11:17, ]

## By default, the maximum value is bold with a green font color
reactable(data,
defaultColDef = colDef(
    style = highlight_max(data)))

## Assign a different font color
reactable(data,
defaultColDef = colDef(
    style = highlight_max(data,
    font_color = "red")))

## Highlight the background of the cell for the maximum value in each column
reactable(data,
defaultColDef = colDef(
    style = highlight_max(data,
    highlighter = "yellow")))

Description

The 'highlight_min()' function assigns a font color and/or background color to the minimum value in a column. It should be placed within the style argument in reactable::colDef.

Usage

highlight_min(data, font_color = "red", highlighter = NULL)

Arguments

Value

a function that applies a color to the minimum value in a column of numeric values.

Examples

data <- MASS::road[11:17, ]

## By default, the minimum value is bold with a red font color
reactable(data,
defaultColDef = colDef(
    style = highlight_min(data)))

## Assign a different font color
reactable(data,
defaultColDef = colDef(
    style = highlight_min(data,
    font_color = "green")))

## Highlight the background of the cell for the minimum value in each column
reactable(data,
defaultColDef = colDef(
    style = highlight_min(data,
    highlighter = "yellow")))

Description

The 'highlight_min_max()' function assigns a font color and/or background color to both the minimum and maximum values in a column. It should be placed within the style argument in reactable::colDef.

Usage

highlight_min_max(
  data,
  min_font_color = "red",
  max_font_color = "green",
  min_highlighter = NULL,
  max_highlighter = NULL
)

Arguments

Value

a function that applies a color to the minimum and maximum values in a column of numeric values.

Examples

data <- MASS::road[11:17, ]

## By default, the minimum and maximum values are bold with a red and green font color respectively
reactable(data,
defaultColDef = colDef(
    style = highlight_min_max(data)))

## Assign a different font color to the min and max values
reactable(data,
defaultColDef = colDef(
    style = highlight_min_max(data,
    min_font_color = "orange",
    max_font_color = "blue")))

## Highlight the background of the cell for the min and max values in each column
reactable(data,
defaultColDef = colDef(
    style = highlight_min_max(data,
    min_highlighter = "salmon",
    max_highlighter = "skyblue")))

Description

Color of points used in 'react_sparkline'.

Usage

highlight_points(
  all = "transparent",
  first = "transparent",
  last = "transparent",
  min = "transparent",
  max = "transparent"
)

Arguments

Value

a function that provides colors for specific points.

Description

Changes from light-themed to dark-themed on hover

Usage

hoverdark(
  font_size = 15,
  font_color = "#222222",
  header_font_size = 15,
  background_color = NULL,
  cell_padding = 4,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard hoverdark theme
reactable(data,
          theme = hoverdark())

## Additional options applied
reactable(data,
          theme = hoverdark(font_size = 12, font_color = "grey", cell_padding = 3))

Description

Changes from dark-themed to light-themed on hover

Usage

hoverlight(
  font_size = 15,
  font_color = "#ffffff",
  header_font_size = 15,
  background_color = "#000000",
  cell_padding = 4,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard hoverlight theme
reactable(data,
          theme = hoverlight())

## Additional options applied
reactable(data,
          theme = hoverlight(font_size = 12, font_color = "grey", cell_padding = 3))

Description

Use 'html()' to apply HTML attributes to text within 'add_title()', 'add_subtitle()', and 'add_source()'.

Usage

html(text, ...)

Arguments

Value

an object of class HTML.

Examples

## Not run: 
## Change the title color to blue
data <- iris[10:29, ]
reactable(data) %>%
add_title(html("Normal title. <span style='color:DodgerBlue;'>Blue title.</span>"))

## Add emojis to the source
data <- iris[10:100, ]
reactable(data) %>%
add_source(html("<p>Made with &#128151; by: John Doe &#128512;</p>"))

## End(Not run)

Description

The 'icon_assign()' function assigns icons from the Font Awesome library (via shiny) to each cell of a numeric column depending on the value in each row. By default, the number of icons assigned will be equal to the value in that cell. If the value is less than the max, it will receive empty icons. Both the icon shape, size, and color of the filled and empty icons can be modified through the parameters. Values can optionally be shown with the icons if desired. It should be placed within the cell argument in reactable::colDef.

Usage

icon_assign(
  data,
  icon = "circle",
  fill_color = "#15607A",
  empty_color = "#EEEEEE",
  fill_opacity = 1,
  empty_opacity = 1,
  align_icons = "left",
  icon_size = 16,
  buckets = NULL,
  number_fmt = NULL,
  seq_by = 1,
  show_values = "none",
  animation = "1s ease"
)

Arguments

Value

a function that applies colored icons to a column of numeric values.

Examples

data <- iris[10:29, ]
## By default, icon_assign() assigns a cirlce icon for each value up to the maximum value.
## If a value is 5 and the maximum value in the column is 6,
## It will assign 5 blue icons and 1 grey icon.
reactable(data,
columns = list(
Sepal.Length = colDef(cell = icon_assign(data))))

## Assign colors to filled icons and empty icons
reactable(data,
columns = list(
Sepal.Length = colDef(cell = icon_assign(data,
fill_color = "red",
empty_color = "white"))))

## Assign any icon from the Font Awesome Library
reactable(data,
columns = list(
Sepal.Length = colDef(cell = icon_assign(data,
icon = "fan"))))

## Optionally divide values into buckets and assign icons based on rank.
reactable(data,
columns = list(
Sepal.Length = colDef(cell = icon_assign(data,
buckets = 3))))

## Optionally display values next to icons.
reactable(data,
columns = list(
Sepal.Length = colDef(cell = icon_assign(data,
show_values = "right"))))

## Change the alignment of the icons within a column.
reactable(data,
columns = list(
Sepal.Length = colDef(cell = icon_assign(data,
align_icons = "center"))))

Description

The 'icon_sets()' function conditionally adds an icon from the Font Awesome library (via shiny) to each cell of a column and assigns a color depending on their value in relation to other values in that particular column. Any number of icons and any number of colors can be used. The number of icons and colors determines how the values are shown from low values to high values. The icons can be positioned over, above, below, or to the right or left of the values. The size of the icon can be adjusted. Icons and icon colors can be provided via another reference column in the dataset which is useful when assigning icons/colors to particular occurrences. It should be placed within the cell argument in reactable::colDef.

Usage

icon_sets(
  data,
  icons = c("circle"),
  icon_set = NULL,
  colors = c("#15607A", "#B0B0B0", "#FA8C00"),
  opacity = 1,
  icon_position = "right",
  icon_ref = NULL,
  icon_size = 16,
  icon_color_ref = NULL,
  number_fmt = NULL,
  tooltip = FALSE,
  animation = "1s ease"
)

Arguments

Value

a function that applies an icon to a column of numeric values.

Examples

data <- MASS::Cars93[20:49, c("Make", "MPG.city", "MPG.highway")]

## By default, icon_sets() assigns blue circles to the lowest-third values,
## grey circles to the middle-third values,
## and orange to the top-third values
reactable(data,
defaultColDef = colDef(cell = icon_sets(data)))

## Apply pre-set icon sets with icon_set:
reactable(data,
defaultColDef = colDef(cell = icon_sets(data,
icon_set = 'ski rating')))

## Assign custom colors
reactable(data,
defaultColDef = colDef(cell = icon_sets(data,
colors = c("tomato", "grey", "dodgerblue"))))

## Assign icons from Font Awesome's icon library
reactable(data,
defaultColDef = colDef(cell = icon_sets(data,
icons = c("arrow-down","minus","arrow-up"))))

## Use number_fmt to format numbers using the scales package
car_prices <- MASS::Cars93[20:49, c("Make", "Price")]

reactable(car_prices,
defaultColDef = colDef(cell = icon_sets(car_prices,
number_fmt = scales::dollar)))

## Position icons relative to the numbers. Options are to the left, right, above, below, or over.
reactable(car_prices,
defaultColDef = colDef(cell = icon_sets(car_prices,
icon_position = "above")))

Description

The 'icon_trend_indicator()' function conditionally adds an up/down/no-change icon from the Font Awesome library (via shiny) to a column. There are four options available for the icons: angle-double, arrow, chevron, and arrow-circle. The icons can be positioned over, above, below, or to the right or left of the values. Three colors must be provided for the icons in order from down, no-change, to up. By default, the color of the text matches the colors of the corresponding icons, but can be changed within 'text_color'. The text for values of no change (0) will automatically be hidden but can be shown with 'show_zero_label'. It should be placed within the cell argument in reactable::colDef.

Usage

icon_trend_indicator(
  data,
  icons = "arrow",
  colors = c("#15607A", "#B2B2B2", "#FA8C00"),
  icon_position = "right",
  icon_size = 16,
  show_zero_label = FALSE,
  number_fmt = NULL,
  opacity = 1,
  text_color = NULL,
  bold_text = FALSE,
  tooltip = FALSE,
  animation = "1s ease"
)

Arguments

Value

a function that applies an icon to a column of numeric values.

Examples

data <- data.frame(change = c(-0.2,0.0,0.9,-0.7,0.5))

## The default icons displayed are "arrow" with matching text color
reactable(data,
defaultColDef = colDef(cell = icon_trend_indicator(data)))

## Choose one of four icon options available
reactable(data,
defaultColDef = colDef(cell = icon_trend_indicator(data, icons = "chevron")))

## Change the color of the text next to the icons
reactable(data,
defaultColDef = colDef(cell = icon_trend_indicator(data, text_color = "black")))

## Change the position of the icons relative to the text
reactable(data,
defaultColDef = colDef(cell = icon_trend_indicator(data, icon_position = "left")))

Description

Bootstrap-inspired journal theme

Usage

journal(
  font_size = 14,
  font_color = "#222222",
  header_font_size = 15,
  header_font_color = "#fad9d8",
  background_color = NULL,
  cell_padding = 6,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard journal theme
reactable(data,
          theme = journal())

## Additional options applied
reactable(data,
          theme = journal(font_size = 12, font_color = "grey", cell_padding = 3))

Description

Bootstrap-inspired lux theme

Usage

lux(
  font_size = 14,
  font_color = "#8c8c8c",
  header_font_size = 15,
  header_font_color = "#7f7f7f",
  background_color = NULL,
  cell_padding = 6,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard lux theme
reactable(data,
          theme = lux())

## Additional options applied
reactable(data,
          theme = lux(font_size = 12, font_color = "grey", cell_padding = 3))

Description

Margin dimensions.

Usage

margin(t = 0, r = 0, b = 0, l = 0)

Arguments

Value

a function that provides margin dimensions.

Description

The 'merge_column()' function can be used to merge and style values from two columns within a reactable table. 'merge_column()' works with both numeric and non-numeric columns. The style/format of both the current column and merged column can be controlled via size, color, weight, and text decoration. Any style parameters that start with "merged_" will control the column that is being merged and specified by 'merged_name'. Any style parameters that do not start with "merged_" control the current column you are within. The position of the column to be merged relative to the current column can be controlled with 'merged_position'. The position options for the merged column are above, below, left, or right to the current column. The spacing between the current column and the merged column can be controlled with 'spacing'. 'merge_column()' needs to placed within the cell argument in reactable::colDef.

Usage

merge_column(
  data,
  merged_name = NULL,
  merged_position = "right",
  merged_size = 12,
  merged_color = "#777",
  merged_weight = "normal",
  merged_style = "normal",
  merged_decoration = "normal",
  size = 14,
  color = NULL,
  weight = "bold",
  style = "normal",
  decoration = NULL,
  spacing = 0
)

Arguments

Value

a function that merges two columns together.

Examples

data <- MASS::Cars93[20:49, c("Manufacturer", "Model", "MPG.city", "MPG.highway")]

## Stack text from one column with another column:
reactable(
data,
columns = list(
Manufacturer = colDef(name = "Manufacturer/Model",
                      cell = merge_column(data, merged_name = "Model"
                      )),
Model = colDef(show = FALSE)))

## Control the appearance of both the current and merged columns:
reactable(
data,
columns = list(
Manufacturer = colDef(name = "Manufacturer/Model",
                      cell = merge_column(data,
                                          merged_name = "Model",
                                          merged_size = 16,
                                          merged_color = "blue",
                                          merged_style = "italic",
                                          size = 18,
                                          color = "red"
                                          )),
Model = colDef(show = FALSE)))

## Combine both numeric and non-numeric columns together:
reactable(
data,
columns = list(
Model = colDef(name = "Model/MPG Highway",
                  cell = merge_column(data,
                                      merged_name = "MPG.highway",
                                      merged_position = "below",
                                      merged_size = 20,
                                      merged_color = "green"
)),
MPG.highway = colDef(show = FALSE),
MPG.city = colDef(show = FALSE)))

Description

midnight table theme

Usage

midnight(
  font_size = 15,
  font_color = "#727272",
  header_font_size = 15,
  header_font_color = "#666666",
  background_color = "#141518",
  cell_padding = 6,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard midnight theme
reactable(data,
          theme = midnight())

## Additional options applied
reactable(data,
          theme = midnight(font_size = 12, font_color = "grey", cell_padding = 3))

Description

midnightblue table theme

Usage

midnightblue(
  font_size = 15,
  font_color = "#bababa",
  header_font_size = 15,
  header_font_color = "lightgrey",
  background_color = "#002853",
  cell_padding = 6,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard midnightblue theme
reactable(data,
          theme = midnightblue())

## Additional options applied
reactable(data,
          theme = midnightblue(font_size = 12, font_color = "grey", cell_padding = 3))

Description

Bootstrap-inspired minty theme

Usage

minty(
  font_size = 15,
  font_color = "#9a9a9a",
  header_font_size = 16,
  header_font_color = "#c9e7de",
  background_color = NULL,
  cell_padding = 6,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard minty theme
reactable(data,
          theme = minty())

## Additional options applied
reactable(data,
          theme = minty(font_size = 12, font_color = "grey", cell_padding = 3))

Description

A table style with no lines or borders

Usage

no_lines(
  font_size = 14,
  font_color = "#222222",
  header_font_size = 15,
  header_font_color = "#222222",
  background_color = NULL,
  centered = FALSE,
  cell_padding = 6
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard no_lines theme
reactable(data,
          theme = no_lines())

## Additional options applied
reactable(data,
          theme = no_lines(font_size = 12, font_color = "grey", cell_padding = 3))

Description

The New York Times-inspired table theme

Usage

nytimes(
  font_size = 13,
  font_color = "#333333",
  header_font_size = 11,
  header_font_color = "#999999",
  background_color = NULL,
  border_color = "#e7e7e7",
  border_width = "1px",
  cell_padding = 5,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard nytimes theme
reactable(data,
          theme = nytimes())

## Additional options applied
reactable(data,
          theme = nytimes(font_size = 12, font_color = "grey", cell_padding = 3))

Description

Pro Football Focus-inspired table theme

Usage

pff(
  font_size = 16,
  font_color = "#878e94",
  header_font_size = 12,
  header_font_color = "#ffffff",
  background_color = NULL,
  cell_padding = 4,
  centered = FALSE
)

Arguments

Value

an object of class theme that is applied to a reactable table.

Examples

data <- iris[10:29, ]

## Standard pff theme
reactable(data,
          theme = pff())

## Additional options applied
reactable(data,
          theme = pff(font_size = 12, font_color = "grey", cell_padding = 3))

Description

The 'pill_buttons()' function surrounds text or numeric values in a column in a colored pill button. If 'pill_buttons()' is applied to a column containing text, the color of the pill button can be provided via a single color can be provided within 'color' or via another column in the dataset by referencing the column name with 'color_ref' (conditionally applying colors to text). If 'pill_buttons' is applied to a numeric column, either a single color or a vector of colors can be provided within 'color' or the colors can also be assigned via 'color_ref'. The opacity of the color(s) provided can be adjusted by providing a value between 0 and 1 in 'opacity'. The color of the text/values can be changed using 'text_color'. If text/values are displayed within a dark-colored background, 'brighten_text' will display the text/values in white so they are more visible. The color of 'brighten_text_color' can be changed to a color other than white if desired. The horizontal alignment of 'pill_buttons()' can be controlled using reactable::colDef(align = "center"). 'pill_buttons()' needs to placed within the cell argument in reactable::colDef.

Usage

pill_buttons(
  data,
  colors = "#15607A",
  color_ref = NULL,
  opacity = 1,
  number_fmt = NULL,
  show_text = TRUE,
  text_size = NULL,
  text_color = "black",
  text_color_ref = NULL,
  brighten_text = TRUE,
  brighten_text_color = "white",
  bold_text = FALSE,
  box_shadow = FALSE,
  tooltip = FALSE,
  animation = "background 1s ease"
)

Arguments

Value

a function that surrounds text/values in a column with a colored pill button.

Examples

library(dplyr)
data <- iris[45:54, ]

## Surround text with pill buttons:
reactable(
data,
columns = list(
Species = colDef(cell = pill_buttons(data))))

## Conditionally apply colors from another column:
data %>%
mutate(color_assign = case_when(
Species == "setosa" ~ "red",
Species == "versicolor" ~ "forestgreen",
TRUE ~ "grey")) %>%
reactable(.,
columns = list(
Species = colDef(cell = pill_buttons(., color_ref = "color_assign"))))

## Surround numeric values with pill buttons:
reactable(
data,
columns = list(
Petal.Width = colDef(cell = pill_buttons(data))))

## Apply multiple colors to numeric values:
reactable(
data,
columns = list(
Petal.Width = colDef(
cell = pill_buttons(data,
                    colors = c("lightpink","white","lightgreen"),
                    opacity = 0.3))))

## Apply a box shadow to the buttons to give a 3-D effect:
reactable(
data,
columns = list(
Petal.Width = colDef(
cell = pill_buttons(data,
                    box_shadow = TRUE,
                    colors = c("lightpink","white","lightgreen"),
                    opacity = 0.3))))

Description

The 'pos_neg_colors()' function assigns a color to all negative values and a color to all positive values. It should be placed within the style argument in reactable::colDef.

Usage

pos_neg_colors(neg_col, pos_col, bold = NULL)

Arguments

Value

a function that applies a color to the positive and negative values of numeric column.

Examples

data <- data.frame(
Symbol = c("GOOG", "FB", "AMZN", "NFLX", "TSLA"),
Price = c(1265.13, 187.89, 1761.33, 276.82, 328.13),
Change = c(4.14, 1.51, -19.45, 5.32, -12.45))

## Assign the color red to negative values and green to positive values
reactable(data,
columns = list(
Change = colDef(
style = pos_neg_colors("red", "green"))))

## Bold values
reactable(data,
columns = list(
Change = colDef(
style = pos_neg_colors("red", "green", bold = TRUE))))

Description

The 'react_sparkbar()' function utilizes the dataui package <https://github.com/timelyportfolio/dataui> to create an interactive sparkline bar chart. The data provided must be in a list format. The vertical height of the sparkbar can be adjusted with 'height'. By default, the height is matched to the height of a cell in a reactable table. However, the height can be increased to better see the patterns in the data. The four-sided margin around the sparkbar can be controlled with 'margin()'. When labels are added to the sparkbars, the margin will auto-adjust (in most instances) to be able to display those labels. If the labels contain large values or values with many digits, the left and right margins may need to be increased slightly for the full numbers to be visible. The fill color and fill width can be controlled with 'fill_color', 'fill_color_ref', and 'fill_opacity'. The outline color and width of the filled bars can be controlled with 'outline_color', 'outline_color_ref', and 'outline_width'. 'statline' can be used to show a horizontal dotted line that represents either the mean, median, min, or max (your choice). The appearance of the statline and statline labels can be controlled with 'statline_color' and 'statline_label_size'. A bandline can be added by using 'bandline'. The options are innerquartiles which highlights the innerquartiles of the data or range which highlights the full range of the data. By default, 'react_sparkbar()' is interactive and data points will be shown when hovering over the sparkbars. This can be turned off by setting 'tooltip' to FALSE. There are two tooltip types available within 'tooltip_type'. The size and color of the tooltip labels can be adjusted with 'tooltip_size' and 'tooltip_color'. Also by default, there are no labels on the bars themselves. However, one could add labels to the first, last, min, max, or all values within 'labels'. The labels that are shown on the sparkbar and in the tooltip are automatically rounded to the nearest whole integer. But decimals can be shown by providing the number of decimal places in 'decimals'. The minimum value of a data series is the minimum value shown for a sparkbar, but this can be adjusted with 'min_value' and the max can be adjusted with 'max_value'. 'react_sparkline()' should be placed within the cell argument in reactable::colDef.

Usage

react_sparkbar(
  data,
  height = 22,
  fill_color = "slategray",
  fill_color_ref = NULL,
  fill_opacity = 1,
  outline_color = "transparent",
  outline_color_ref = NULL,
  outline_width = 1,
  highlight_bars = NULL,
  labels = "none",
  label_size = "0.8em",
  decimals = 0,
  max_value = NULL,
  min_value = NULL,
  statline = NULL,
  statline_color = "red",
  statline_label_size = "0.8em",
  bandline = NULL,
  bandline_color = "red",
  bandline_opacity = 0.2,
  tooltip = TRUE,
  tooltip_type = 1,
  tooltip_color = NULL,
  tooltip_size = "1.1em",
  margin = NULL
)

Arguments