Skip to contents

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))
  )
)
Make
Cylinders
MPG.city
Price
Acura Integra
25
15.9
Acura Legend
18
33.9
Audi 90
20
29.1
Audi 100
19
37.7
BMW 535i
22
30
Buick Century
22
15.7
Buick LeSabre
19
20.8
Buick Roadmaster
16
23.7
Buick Riviera
19
26.3
Cadillac DeVille
16
34.7
1–10 of 20 rows

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"))
  )
)
Make
Cylinders
MPG.city
Price
Acura Integra
15.9
Acura Legend
33.9
Audi 90
29.1
Audi 100
37.7
BMW 535i
30
Buick Century
15.7
Buick LeSabre
20.8
Buick Roadmaster
23.7
Buick Riviera
26.3
Cadillac DeVille
34.7
1–10 of 20 rows

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))
  )
)
Make
Cylinders
MPG.city
Price
Acura Integra
15.9
Acura Legend
33.9
Audi 90
29.1
Audi 100
37.7
BMW 535i
30
Buick Century
15.7
Buick LeSabre
20.8
Buick Roadmaster
23.7
Buick Riviera
26.3
Cadillac DeVille
34.7
1–10 of 20 rows

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"))
  )
)
Make
Cylinders
MPG.city
Price
Acura Integra
25
15.9
Acura Legend
18
33.9
Audi 90
20
29.1
Audi 100
19
37.7
BMW 535i
22
30
Buick Century
22
15.7
Buick LeSabre
19
20.8
Buick Roadmaster
16
23.7
Buick Riviera
19
26.3
Cadillac DeVille
16
34.7
1–10 of 20 rows

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))
  )
)
Make
Cylinders
MPG.city
Price
Acura Integra
25
$15.90
Acura Legend
18
$33.90
Audi 90
20
$29.10
Audi 100
19
$37.70
BMW 535i
22
$30
Buick Century
22
$15.70
Buick LeSabre
19
$20.80
Buick Roadmaster
16
$23.70
Buick Riviera
19
$26.30
Cadillac DeVille
16
$34.70
1–10 of 20 rows

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")
  )
)
Make
Passengers
Acura Integra
Acura Legend
Audi 90
Audi 100
BMW 535i
Buick Century
Buick LeSabre
Buick Roadmaster
Buick Riviera
Cadillac DeVille
1–10 of 20 rows