group_border_sort {reactablefmtr}

Add a styled border beneath rows of specified groups on sort. Must be placed within reactable::rowStyle(). Credit to Greg Lin, creator of reactable for writing the JS function.

Description

Add a styled border beneath rows of specified groups on sort. Must be placed within reactable::rowStyle(). Credit to Greg Lin, creator of reactable for writing the JS function.

Usage

group_border_sort(
  columns = NULL,
  border_width = "thin",
  border_color = "#777",
  border_style = "solid"
)

Arguments

columns

Name of the column(s). Can provide up to four column names.

border_width

The width of the border. 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. Default is 'thin'.

border_color

The color of the border. 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. Default is #777.

border_style

The style of the border. 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. Default is 'solid'.

Value

a function that applies a bottom border to each group in a column of a reactable table.

Examples

data <- MASS::Cars93[1:20, c("Manufacturer", "Model", "Type", "MPG.city")]

## Add border beneath each unique group within a column on sort:
reactable(data,
pagination = FALSE,
rowStyle = group_border_sort("Manufacturer")
)

## Can specify up to 4 columns:
reactable(data,
pagination = FALSE,
rowStyle = group_border_sort(columns = c("Manufacturer","Model","Type"))
)

## Apply styles to the border:
reactable(data,
pagination = FALSE,
rowStyle = group_border_sort(columns = c("Manufacturer","Model","Type"),
                             border_color = "red",
                             border_style = "dashed",
                             border_width = "3px")
)