Assign Icons to Values

Example

With reactablefmtr, you can easily replace values in a table with icons from Font Awesome.

Using icon_assign(), we can replace the values in the Cylinders column with icons. By default, the values are assigned a blue circular icon for each cylinder in the car. The grey or empty icons show how the value compares to the maximum number of cylinders in the table.

Note that icon_assign() only works with numeric columns. The Cylinders column was a factor column in the original dataset, so we first needed to convert it to a numeric column before using icon_assign().

data <- MASS::Cars93[1:20, c("Make", "Cylinders", "MPG.city", "Price")]

### convert column to numeric
data$Cylinders <- as.numeric(as.character(data$Cylinders))

reactable(
  data, 
  defaultColDef = colDef(align = "left", maxWidth = 200), 
  columns = list(Cylinders = colDef(cell = icon_assign(data))
  )
)

Change Icon and Color

For the MPG.city column, let’s say we wanted to use an icon other than a circle to represent each car’s MPG. We can easily set the icon to the “envira” icon from the Font Awesome library, and change the color to green. Now, when we sort the MPG.city column, we can easily see that the more “green leaves” that are present, the more eco-friendly the car is in terms of fuel efficiency.

reactable(
  data,
  defaultColDef = colDef(align = "left", maxWidth = 200), 
  columns = list(
    Cylinders = colDef(cell = icon_assign(data)),
    MPG.city = colDef(cell = icon_assign(data, icon = "envira", fill_color = "forestgreen"))
  )
)

Bucketing

If you think the MPG.city column is a little overcrowded with icons, an alternative option is to break the values up into buckets of your choice with the buckets option in icon_assign(). So, if we wanted to bucket and rank MPG.city into five groups, we could just add buckets = 5 and get a column that is easier on the eyes:

reactable(
  data,
  defaultColDef = colDef(align = "left", maxWidth = 200), 
  columns = list(
    Cylinders = colDef(cell = icon_assign(data)),
    MPG.city = colDef(cell = icon_assign(data, icon = "envira", fill_color = "forestgreen", buckets = 5))
  )
)

Show Values

If we wanted to display the values alongside the icons, we can include them with show_values and set it equal to either “left” or “right” depending on which side we prefer.

Below is an example of how to add the values on the right-hand side of the icons in the MPG.city column:

reactable(
  data,
  defaultColDef = colDef(align = "left", maxWidth = 200), 
  columns = list(
    Cylinders = colDef(cell = icon_assign(data)),
    MPG.city = colDef(cell = icon_assign(data, icon = "envira", fill_color = "forestgreen", buckets = 5, show_values = "right"))
  )
)

Format Numbers

Lastly, if we want to show values and our column contains formatted numbers such as the Price column in our table, we can add dollar signs to the price for each car with number_fmt = scales::dollar, which is the same method used to format numbers in data_bars() and color_tiles().

Below, we bucketed the Price column into 5 groups like we did with the MPG.city column but included the number_fmt option. Notice also how displaying the empty icons is optional. They can be hidden by setting empty_color = "white".

reactable(
  data,
  defaultColDef = colDef(align = "left", maxWidth = 200), 
  columns = list(
    Cylinders = colDef(cell = icon_assign(data)),
    MPG.city = colDef(cell = icon_assign(data, icon = "envira", fill_color = "forestgreen", buckets = 5, show_values = "right")),
    Price = colDef(cell = icon_assign(data, icon = "dollar-sign", fill_color = "red", empty_color = "white", buckets = 5, show_values = "right", number_fmt = scales::dollar))
  )
)

Aligning Icons

Icons can be aligned within a column either to the left, right, or center with align_icons.

data <- MASS::Cars93[1:20, c("Make", "Passengers")]

reactable(
  data,
  defaultColDef = colDef(maxWidth = 300, align = "center",
                         cell = icon_assign(data, icon = "user", align_icons = "center")
  )
)