You can conditionally style a table using functions that return inline styles or CSS classes. Just like with custom rendering, style functions can either be in R or JavaScript:
R functions | JavaScript functions |
---|---|
|
|
Whichever one to use depends on the situation and personal preference. You might prefer to use R functions except when you need more dynamic behavior (e.g., style based on sorted state).
We can use R’s built-in color utilities to apply a color scale to a column:
data <- iris[1:5, ]
orange_pal <- function(x) rgb(colorRamp(c("#ffe4cc", "#ffb54d"))(x), maxColorValue = 255)
reactable(
data,
columns = list(
Petal.Length = colDef(
style = function(value) {
normalized <- (value - min(data$Petal.Length)) / (max(data$Petal.Length) - min(data$Petal.Length))
color <- orange_pal(normalized)
list(background = color)
}
)
)
)
To style sorted columns, we need to use a JavaScript function to determine whether a column is currently being sorted:
Both style
and class
take an R function with up to 3 optional arguments:
colDef(
style = function(value, index, name) {
# input:
# - value, the cell value
# - index, the row index (optional)
# - name, the column name (optional)
#
# output:
# - a named list with camelCased property names
list(color = "red", marginLeft = "30px")
# - or an inline style string
"color: red; margin-left: 30px;"
},
class = function(value, index, name) {
# input:
# - value, the cell value
# - index, the row index (optional)
# - name, the column name (optional)
#
# output:
# - CSS class names
"class1 class2"
}
)
NOTE: R functions cannot apply styles to aggregated cells.
Or a JavaScript function, wrapped in JS()
, with up to 3 optional arguments:
colDef(
style = JS("
function(rowInfo, colInfo, state) {
// input:
// - rowInfo, an object containing row info
// - colInfo, an object containing column info (optional)
// - state, an object containing the table state (optional)
//
// output:
// - a style object with camelCased property names
return { backgroundColor: 'gray' }
}
"),
class = JS("
function(rowInfo, colInfo, state) {
// input:
// - rowInfo, an object containing row info
// - colInfo, an object containing column info (optional)
// - state, an object containing the table state (optional)
//
// output:
// - CSS class names
return 'class1 class2'
}
")
)
Both rowStyle
and rowClass
take an R function with a single argument:
reactable(
rowStyle = function(index) {
# input:
# - index, the row index
#
# output:
# - a named list with camelCased property names
list(color = "red", marginLeft = "30px")
# - or an inline style string
"color: red; margin-left: 30px;"
},
rowClass = function(index) {
# input:
# - index, the row index
#
# output:
# - CSS class names
"class1 class2"
}
)
NOTE: R functions cannot apply styles to aggregated rows.
Or a JavaScript function with up to 2 optional arguments:
reactable(
rowStyle = JS("
function(rowInfo, state) {
// input:
// - rowInfo, an object containing row info
// - state, an object containing the table state (optional)
//
// output:
// - a style object with camelCased properties
return { backgroundColor: 'gray' }
}
"),
rowClass = JS("
function(rowInfo, state) {
// input:
// - rowInfo, an object containing row info
// - state, an object containing the table state (optional)
//
// output:
// - CSS class names
return 'class1 class2'
}
")
)