Use reactableTheme() to customize the default styling of a table.
You can set theme variables to change the default styles, or add custom CSS
to specific elements of the table.
The color variables are specified as character strings of CSS color values.
The width and padding variables are specified as either character strings
of CSS width and padding values, or numeric pixel values. The style arguments
take custom CSS as named lists of camelCased properties.
To set the default theme for all tables, use the global reactable.theme option.
Usage
reactableTheme(
color = NULL,
backgroundColor = NULL,
borderColor = NULL,
borderWidth = NULL,
stripedColor = NULL,
highlightColor = NULL,
cellPadding = NULL,
style = NULL,
tableStyle = NULL,
headerStyle = NULL,
groupHeaderStyle = NULL,
tableBodyStyle = NULL,
rowGroupStyle = NULL,
rowStyle = NULL,
rowStripedStyle = NULL,
rowHighlightStyle = NULL,
rowSelectedStyle = NULL,
cellStyle = NULL,
footerStyle = NULL,
inputStyle = NULL,
filterInputStyle = NULL,
searchInputStyle = NULL,
selectStyle = NULL,
paginationStyle = NULL,
pageButtonStyle = NULL,
pageButtonHoverStyle = NULL,
pageButtonActiveStyle = NULL,
pageButtonCurrentStyle = NULL
)Arguments
- color
Default text color.
- backgroundColor
Default background color.
- borderColor
Default border color.
- borderWidth
Default border width.
- stripedColor
Default row stripe color.
- highlightColor
Default row highlight color.
- cellPadding
Default cell padding.
- style
Additional CSS for the table.
- tableStyle
Additional CSS for the table element (excludes the pagination bar and search input).
- headerStyle
Additional CSS for header cells.
- groupHeaderStyle
Additional CSS for group header cells.
- tableBodyStyle
Additional CSS for the table body element.
- rowGroupStyle
Additional CSS for row groups.
- rowStyle
Additional CSS for rows.
- rowStripedStyle
Additional CSS for striped rows.
- rowHighlightStyle
Additional CSS for highlighted rows.
- rowSelectedStyle
Additional CSS for selected rows.
- cellStyle
Additional CSS for cells.
- footerStyle
Additional CSS for footer cells.
- inputStyle
Additional CSS for inputs.
- filterInputStyle
Additional CSS for filter inputs.
- searchInputStyle
Additional CSS for the search input.
- selectStyle
Additional CSS for table select controls.
- paginationStyle
Additional CSS for the pagination bar.
- pageButtonStyle, pageButtonHoverStyle, pageButtonActiveStyle, pageButtonCurrentStyle
Additional CSS for page buttons, page buttons with hover or active states, and the current page button.
Value
A theme options object that can be used to customize the default
styling in reactable().
Details
You can use nested CSS selectors in style arguments to target
the current element, using & as the selector, or other child elements
(just like in Sass). This is useful for adding pseudo-classes like &:hover,
or adding styles in a certain context like .outer-container &.
Examples
reactable(
iris[1:30, ],
searchable = TRUE,
striped = TRUE,
highlight = TRUE,
bordered = TRUE,
theme = reactableTheme(
borderColor = "#dfe2e5",
stripedColor = "#f6f8fa",
highlightColor = "#f0f5f9",
cellPadding = "8px 12px",
style = list(
fontFamily = "-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif"
),
searchInputStyle = list(width = "100%")
)
)
# Set the default theme for all tables
options(reactable.theme = reactableTheme(
color = "hsl(233, 9%, 87%)",
backgroundColor = "hsl(233, 9%, 19%)",
borderColor = "hsl(233, 9%, 22%)",
stripedColor = "hsl(233, 12%, 22%)",
highlightColor = "hsl(233, 12%, 24%)",
inputStyle = list(backgroundColor = "hsl(233, 9%, 25%)"),
selectStyle = list(backgroundColor = "hsl(233, 9%, 25%)"),
pageButtonHoverStyle = list(backgroundColor = "hsl(233, 9%, 25%)"),
pageButtonActiveStyle = list(backgroundColor = "hsl(233, 9%, 28%)")
))
reactable(
iris[1:30, ],
filterable = TRUE,
showPageSizeOptions = TRUE,
striped = TRUE,
highlight = TRUE,
details = function(index) paste("Details for row", index)
)
# Use nested selectors to highlight headers when sorting
reactable(
iris[1:30, ],
columns = list(Sepal.Length = colDef(sortable = FALSE)),
showSortable = TRUE,
theme = reactableTheme(
headerStyle = list(
"&:hover[aria-sort]" = list(background = "hsl(0, 0%, 96%)"),
"&[aria-sort='ascending'], &[aria-sort='descending']" = list(background = "hsl(0, 0%, 96%)"),
borderColor = "#555"
)
)
)