reactablefmtr (version 2.0.0)

cell_style: Add custom styles to cells

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

data

A dataset to be displayed within a reactable table.

rows

Numeric value representing the row number to apply the custom style. Can provide a vector of rows if applying to more than one row. If no rows are provided, styles are applied to all rows/values.

values

A value, either numeric or character, that is present within a column. Can provide a vector of values if applying to more than one value. If no values are provided, styles are applied to all rows/values.

font_color

Color of the text.

font_size

Numeric value representing the size of the font of the text (in px). Default is 16.

font_style

Style of the text font. Options are "normal" or "italic". Default is "normal".

font_weight

The font weight of the text Options are "normal", "bold", "bolder", "lighter" or a value between 100 and 900. Default is "normal".

horizontal_align

The horizontal alignment of the text within a cell. Options are "left", "right", or "center". Default is "right".

vertical_align

The vertical alignment of the text within a cell. Options are "top", "bottom", or "center". Default is "top".

text_decoration

Optionally add an underline, overline, or line-through to the text Options are "underline", "overline", "underline overline", or "line-through". Default is NULL.

border_width

The width of the border around the cell. Options are "thin", "medium", "thick", or a numeric value such as "2px". May be specified using one, two, three, or four values. See [CSS border-width](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width) for more options.

border_style

The style of the border around the cell. Options are "solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", or "hidden". May be specified using one, two, three, or four values. See [CSS border-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) for more options.

border_color

The color of the border around the cell. May be specified using one, two, three, or four values. See [CSS border-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) for more options.

background_color

Color of the background of the cell.

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 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"))))
# }