Skip to contents

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 = "#67a9cf",
  empty_color = "lightgrey",
  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

data

Dataset containing at least one numeric column.

icon

A single icon from the Font Awesome library (via shiny). Default icon is a circle.

fill_color

A single color for the filled icons. Default color is #1e90ff.

empty_color

A single color for the empty icons. Default color is lightgrey.

fill_opacity

A value between 0 and 1 that adjusts the opacity in fill_color. A value of 0 is fully transparent, a value of 1 is fully opaque. Default is 1.

empty_opacity

A value between 0 and 1 that adjusts the opacity in empty_color. A value of 0 is fully transparent, a value of 1 is fully opaque. Default is 1.

align_icons

Choose how to align the icons in a column. Options are left, right, or center. Default is left.

icon_size

A value representing the size of the icon in px. Default is 16.

buckets

Optionally divide values in a column into buckets by providing a numeric value. Icons are then assigned by rank from lowest to highest. Default is set to NULL.

number_fmt

Optionally format numbers using formats from the scales package. Default is set to NULL.

seq_by

A numerical input that determines what number each icon represents. Ex. instead of displaying 100 icons for the number 100, can set seq_by = 10 to show only 10 icons. Default value is set to 1.

show_values

Optionally display values next to icons. Options are "left", "right", above", "below", or "none". Default is none.

animation

Control the duration and timing function of the animation when sorting/updating values shown on a page. See [CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/transition) for available timing functions and examples. Animation can be turned off by setting to "none". Default is "1s ease".

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))))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## 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"))))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Assign any icon from the Font Awesome Library
reactable(data,
columns = list(
Sepal.Length = colDef(cell = icon_assign(data,
icon = "fan"))))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Optionally divide values into buckets and assign icons based on rank.
reactable(data,
columns = list(
Sepal.Length = colDef(cell = icon_assign(data,
buckets = 3))))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Optionally display values next to icons.
reactable(data,
columns = list(
Sepal.Length = colDef(cell = icon_assign(data,
show_values = "right"))))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Change the alignment of the icons within a column.
reactable(data,
columns = list(
Sepal.Length = colDef(cell = icon_assign(data,
align_icons = "center"))))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator