### Initialize data for color_tiles

Source: https://kcuilla.github.io/reactablefmtr/reference/color_tiles.html

Example of preparing a subset of the iris dataset for use with color_tiles.

```R
data <- iris[10:29, ]
```

--------------------------------

### Examples of applying Google Fonts

Source: https://kcuilla.github.io/reactablefmtr/reference/google_font.html

Demonstrates applying default and custom-styled Google Fonts to a reactable table.

```R
if (FALSE) {
data <- iris[10:29, ]

## Default 'Poppins' font from Google Fonts
reactable(data) %>%
google_font()

## Apply styles to fonts
reactable(data) %>%
google_font("Roboto Mono", font_weight = 500, font_style = "italic")
}
```

--------------------------------

### Load Required Packages

Source: https://kcuilla.github.io/reactablefmtr/articles/sparklines.html

Initial setup to load the necessary libraries for data manipulation and table creation.

```R
# Load packages
library(reactablefmtr)
library(tidyverse)
library(palmerpenguins)
```

--------------------------------

### Install reactablefmtr

Source: https://kcuilla.github.io/reactablefmtr/index.html

Commands to install the package from CRAN or the development version from GitHub.

```R
install.packages("reactablefmtr")
```

```R
remotes::install_github("kcuilla/reactablefmtr")
```

--------------------------------

### Applying highlight_min in reactable

Source: https://kcuilla.github.io/reactablefmtr/reference/highlight_min.html

Examples demonstrating default styling, custom font colors, and background highlighting for minimum values.

```R
data <- MASS::road[11:17, ]

## By default, the minimum value is bold with a red font color
reactable(data,
defaultColDef = colDef(
    style = highlight_min(data)))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Assign a different font color
reactable(data,
defaultColDef = colDef(
    style = highlight_min(data,
    font_color = "green")))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Highlight the background of the cell for the minimum value in each column
reactable(data,
defaultColDef = colDef(
    style = highlight_min(data,
    highlighter = "yellow")))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator
```

--------------------------------

### Apply subtitles to reactable tables

Source: https://kcuilla.github.io/reactablefmtr/reference/add_subtitle.html

Examples demonstrating how to pipe subtitles into reactable tables and customize their appearance.

```R
if (FALSE) {
## Create the reactable table and then pipe in the subtitle
table <- reactable(iris[10:29, ])

table %>%
  add_subtitle("This is a subtitle")

## If a title proceeds a subtitle, the subtite will be placed below the title
table %>%
  add_title("This is a title") %>%
  add_subtitle("This is a subtitle")

## Use options to adjust the style and position of the subtitle
table %>%
  add_subtitle("This is a subtitle", align = "center", font_color = "red")
}
```

--------------------------------

### Usage examples for cosmo theme

Source: https://kcuilla.github.io/reactablefmtr/reference/cosmo.html

Demonstrates applying the default cosmo theme and a customized version to a reactable table.

```R
data <- iris[10:29, ]

## Standard cosmo theme
reactable(data,
          theme = cosmo())
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Additional options applied
reactable(data,
          theme = cosmo(font_size = 12, font_color = "grey", cell_padding = 3))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator
```

--------------------------------

### Applying highlight_max in reactable

Source: https://kcuilla.github.io/reactablefmtr/reference/highlight_max.html

Examples demonstrating default styling, custom font colors, and background highlighting for maximum values in a reactable table.

```R
data <- MASS::road[11:17, ]

## By default, the maximum value is bold with a green font color
reactable(data,
defaultColDef = colDef(
    style = highlight_max(data)))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Assign a different font color
reactable(data,
defaultColDef = colDef(
    style = highlight_max(data,
    font_color = "red")))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Highlight the background of the cell for the maximum value in each column
reactable(data,
defaultColDef = colDef(
    style = highlight_max(data,
    highlighter = "yellow")))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator
```

--------------------------------

### Apply pff theme to reactable

Source: https://kcuilla.github.io/reactablefmtr/reference/pff.html

Examples demonstrating the application of the pff theme to a reactable object, including default and custom settings.

```R
data <- iris[10:29, ]

## Standard pff theme
reactable(data,
          theme = pff())
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Additional options applied
reactable(data,
          theme = pff(font_size = 12, font_color = "grey", cell_padding = 3))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator
```

--------------------------------

### Apply default theme to reactable

Source: https://kcuilla.github.io/reactablefmtr/reference/default.html

Examples of applying the default theme with standard settings or custom overrides to a reactable object.

```R
data <- iris[10:29, ]

## Standard default theme
reactable(data,
          theme = default())
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Additional options applied
reactable(data,
          theme = default(font_size = 12, font_color = "grey", cell_padding = 3))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator
```

--------------------------------

### Merge columns in a reactable table

Source: https://kcuilla.github.io/reactablefmtr/reference/merge_column.html

Examples demonstrating how to stack text from one column with another and how to customize the appearance of the merged output.

```R
data <- MASS::Cars93[20:49, c("Manufacturer", "Model", "MPG.city", "MPG.highway")]

## Stack text from one column with another column:
reactable(
data,
columns = list(
Manufacturer = colDef(name = "Manufacturer/Model",
                      cell = merge_column(data, merged_name = "Model"
                      )),
Model = colDef(show = FALSE)))
```

```R
## Control the appearance of both the current and merged columns:
reactable(
data,
columns = list(
Manufacturer = colDef(name = "Manufacturer/Model",
                      cell = merge_column(data,
                                          merged_name = "Model",
                                          merged_size = 16,
                                          merged_color = "blue",
                                          merged_style = "italic",
                                          size = 18,
                                          color = "red"
                                          )),
Model = colDef(show = FALSE)))
```

--------------------------------

### Create bubble grid charts with reactablefmtr

Source: https://kcuilla.github.io/reactablefmtr/reference/bubble_grid.html

Examples demonstrating default settings, custom color palettes, shape changes, tooltip configuration, and value scaling for bubble grids.

```R
data <- iris[10:29, ]

## By default, the bubble_grid() function uses a blue-white-orange three-color pattern:
reactable(
  data,
  columns = list(
    Petal.Length = colDef(
      align = "center",
      cell = bubble_grid(data))))
```

```R
## You can specify your own color palette or a single color across all values with `colors`;
reactable(
  data,
  columns = list(
    Petal.Length = colDef(
      align = "center",
      cell = bubble_grid(data,
                         colors = c("orange")))))
```

```R
## Use squares instead of circles:
reactable(
  data,
  columns = list(
    Petal.Length = colDef(
      align = "center",
      cell = bubble_grid(data,
                         shape = "squares"))))
```

```R
## Hide text and show on hover by enabling the tooltip:
reactable(
  data,
  columns = list(
    Petal.Length = colDef(
      align = "center",
      cell = bubble_grid(data,
                         show_text = FALSE,
                         tooltip = TRUE))))
```

```R
## Control the scale of the circles by adjusting the min and max values:
reactable(
  data,
  columns = list(
    Petal.Length = colDef(
      align = "center",
      cell = bubble_grid(data,
                         min_value = 1,
                         max_value = 2))))
```

--------------------------------

### Examples of adding an icon legend

Source: https://kcuilla.github.io/reactablefmtr/reference/add_icon_legend.html

Demonstrates how to pipe a reactable table into add_icon_legend with various configurations like alignment, custom labels, and titles.

```R
if (FALSE) {
## Create the reactable table and then pipe in the legend
library(dplyr)
data <- iris[10:29, ]
table <- reactable(data,
columns = list(Petal.Length = colDef(
cell = icon_sets(data, icon_set = "medals"))))

table %>%
  add_icon_legend(icon_set = "medals")

## The legend can be aligned to the left or right of the table
table %>%
  add_icon_legend(icon_set = "medals", align = "left")

## Add custom labels to each icon in the legend
table %>%
  add_icon_legend(icon_set = "medals", labels = c("Shortest Length","Avg Length","Longest Length"))

## Add a title and footer to the legend
table %>%
  add_icon_legend(icon_set = "medals", title = "Icon Legend Title", footer = "Icon Legend Footer")
}
```

--------------------------------

### Apply pill_buttons to reactable Columns

Source: https://kcuilla.github.io/reactablefmtr/reference/pill_buttons.html

Examples demonstrating how to apply pill_buttons to a column and how to use color_ref for conditional styling.

```R
library(dplyr)
data <- iris[45:54, ]

## Surround text with pill buttons:
reactable(
data,
columns = list(
Species = colDef(cell = pill_buttons(data))))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Conditionally apply colors from another column:
data %>%
mutate(color_assign = case_when(
Species == "setosa" ~ "red",
Species == "versicolor" ~ "forestgreen",
TRUE ~ "grey")) %>%
reactable(.,
columns = list(
Species = colDef(cell = pill_buttons(., color_ref = "color_assign"))))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator
```

--------------------------------

### Examples of group_border_sort

Source: https://kcuilla.github.io/reactablefmtr/reference/group_border_sort.html

Demonstrates applying group borders to single or multiple columns, as well as customizing border styles.

```R
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")
)
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Can specify up to 4 columns:
reactable(data,
pagination = FALSE,
rowStyle = group_border_sort(columns = c("Manufacturer","Model","Type"))
)
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## 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")
)
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator
```

--------------------------------

### Apply icon_assign to reactable columns

Source: https://kcuilla.github.io/reactablefmtr/reference/icon_assign.html

Examples demonstrating various configurations of icon_assign within a reactable colDef.

```R
data <- iris[10:29, ]
## By default, icon_assign() assigns a cirlce icon for each value up to the maximum value.
## If a value is 5 and the maximum value in the column is 6,
## It will assign 5 blue icons and 1 grey icon.
reactable(data,
columns = list(
Sepal.Length = colDef(cell = icon_assign(data))))
```

```R
## Assign colors to filled icons and empty icons
reactable(data,
columns = list(
Sepal.Length = colDef(cell = icon_assign(data,
fill_color = "red",
empty_color = "white"))))
```

```R
## Assign any icon from the Font Awesome Library
reactable(data,
columns = list(
Sepal.Length = colDef(cell = icon_assign(data,
icon = "fan"))))
```

```R
## Optionally divide values into buckets and assign icons based on rank.
reactable(data,
columns = list(
Sepal.Length = colDef(cell = icon_assign(data,
buckets = 3))))
```

```R
## Optionally display values next to icons.
reactable(data,
columns = list(
Sepal.Length = colDef(cell = icon_assign(data,
show_values = "right"))))
```

```R
## Change the alignment of the icons within a column.
reactable(data,
columns = list(
Sepal.Length = colDef(cell = icon_assign(data,
align_icons = "center"))))
```

--------------------------------

### Apply custom styles to reactable cells

Source: https://kcuilla.github.io/reactablefmtr/reference/cell_style.html

Examples demonstrating how to apply styles based on row indices or specific column values.

```R
if (FALSE) {
## 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"))))
}
```

--------------------------------

### Load NFL play-by-play data

Source: https://kcuilla.github.io/reactablefmtr/articles/data_bars.html

Fetches and processes NFL data for image-based table examples.

```R
## load multiple seasons
seasons <- 2018:2019
pbp <- map_df(seasons, function(x) {
  readRDS(url(
    paste0(
      "https://raw.githubusercontent.com/guga31bb/nflfastR-data/master/data/play_by_play_",
      x,
      ".rds"
    )
  ))
})
## figures with QB stats
qbs <- pbp %>%
  filter(week <= 17,!is.na(epa)) %>%
  group_by(id, name) %>%
  summarize(
    epa = mean(qb_epa),
    cpoe = mean(cpoe, na.rm = T),
    n_dropbacks = sum(pass),
    n_plays = n(),
    team = last(posteam)
  ) %>%
  ungroup() %>%
  filter(n_dropbacks > 100 & n_plays > 1000)
```

--------------------------------

### Apply ESPN Theme to NFL Player Data

Source: https://kcuilla.github.io/reactablefmtr/articles/themes.html

This snippet displays the same NFL player data as the previous example but applies the 'espn' theme from reactablefmtr. Instead of icon sets, it uses 'color_tiles()' to visually represent the performance metrics. This highlights how different themes and cell rendering functions can be used to customize the table's appearance.

```R
data %>%
left_join(teams_colors_logos, by = c('Team' = 'team_abbr')) %>%
  select(Name, POS, GP, team_logo_espn, Team, Off, Pass, Run, team_logo_espn) %>%
  reactable(.,
    pagination = FALSE,
    highlight = TRUE,
    striped = TRUE,
    defaultSorted = "Off",
    defaultSortOrder = "desc",
    theme = espn(),
    defaultColDef = colDef(align = "left"),
    columns = list(
      Team = colDef(show = FALSE),
      team_color = colDef(show = FALSE),
      Name = colDef(maxWidth = 280),
      POS = colDef(maxWidth = 70),
      GP = colDef(maxWidth = 70),
      team_logo_espn = colDef(name = "TEAM", maxWidth = 100,
          cell = embed_img(., label = "Team", height = 20, width = 20)),
      Off = colDef(align = "center", maxWidth = 130, cell = color_tiles(., colors = color_set)),
      Pass = colDef(align = "center", maxWidth = 130, cell = color_tiles(., colors = color_set)),
      Run = colDef(align = "center", maxWidth = 130, cell = color_tiles(., colors = color_set))
    ))

```

--------------------------------

### Initialize Data and Libraries

Source: https://kcuilla.github.io/reactablefmtr/articles/color_tiles.html

Load necessary libraries and prepare the gapminder dataset for table visualization.

```R
library(reactablefmtr)
library(tidyverse)
library(gapminder)
```

--------------------------------

### Apply add_title to a reactable table

Source: https://kcuilla.github.io/reactablefmtr/reference/add_title.html

Examples of adding a basic title and a styled, centered title to a reactable object.

```R
if (FALSE) {
## Create the reactable table and then pipe in the title
table <- reactable(iris[10:29, ])

table %>%
  add_title("This is a title")

## Use options to adjust the style and position of the title
table %>%
  add_title("This is a title", align = "center", font_color = "red")
}
```

--------------------------------

### Implement sunrise theme in reactable

Source: https://kcuilla.github.io/reactablefmtr/reference/sunrise.html

Demonstrates applying the default sunrise theme and a customized version to a reactable table.

```R
data <- iris[10:29, ]

## Standard sunrise theme
reactable(data,
          theme = sunrise())
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Additional options applied
reactable(data,
          theme = sunrise(font_size = 12, font_color = "grey", cell_padding = 3))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator
```

--------------------------------

### Create a basic reactable table

Source: https://kcuilla.github.io/reactablefmtr/articles/nfl_standings_tutorial.html

This code snippet shows how to create a basic reactable table from a data frame. Ensure the 'reactable' and 'tidyverse' packages are loaded.

```r
library(reactablefmtr)
library(tidyverse)

reactable(data)
```

--------------------------------

### Create initial data frame for icons

Source: https://kcuilla.github.io/reactablefmtr/articles/data_bars.html

Defines a data frame with company names, primary colors, and values for icon demonstration.

```R
data <- data.frame(
  Company = c("facebook", "twitter", "linkedin", "reddit", "youtube", "instagram", "pinterest", "snapchat"),
  Primary = c("#4267B2", "#1DA1F2", "#0E76A8", "#FF4500", "#FF0000", "#833AB4", "#E60023", "#FFFC00"),
  Values = c(75, 120, 90, 100, 80, 70, 60, 40)
)
reactable(
  data,
  defaultSorted = "Values",
  defaultSortOrder = "desc",
  columns = list(
    Values = colDef(
      cell = data_bars(data, 
                       fill_color = "black",
                       fill_opacity = 0.8, 
                       text_position = "inside-end"))
  )
)
```

--------------------------------

### Create Heatmap with Color Scales and Tooltips

Source: https://kcuilla.github.io/reactablefmtr/articles/reactablefmtr_cookbook.html

Generate heatmaps using `color_scales()` and `tooltip()`. Hide text with `show_text = FALSE` and enable hover information with `tooltip = TRUE`. Customize colors and bias for the scale.

```r
sanmarcos_sales <- txhousing %>
  filter(city == 'San Marcos' & year > 2004 & year < 2015) %>
  group_by(year, month) %>
  summarize(sales = mean(sales, na.rm = TRUE)) %>
  mutate(month = month.abb[month]) %>
  pivot_wider(names_from = 'month', values_from = 'sales') %>
  ungroup() %>
  mutate(year = as.character(year),
         total = rowSums(across(where(is.numeric))))

sanmarcos_legend <- txhousing %>
  filter(city == 'San Marcos' & year > 2004 & year < 2015) %>
  group_by(year, month) %>
  summarize(sales = mean(sales, na.rm = TRUE)) %>
  mutate(month = month.abb[month]) 

reactable(
  sanmarcos_sales,
  pagination = FALSE,
  showSortIcon = FALSE,
  theme = void(
    centered = TRUE, 
    cell_padding = 0,
    header_font_color = 'black',
    font_color = 'black'
    ),
  defaultColDef = colDef(
    maxWidth = 50,
    align = 'center',
    cell = tooltip(),
    style = color_scales(
      data = sanmarcos_sales,
      span = 2:13,
      colors = c('#002347','#003366','#003F7D','#FF8E00','#FD7702','#FF5003'),
      bias = 1.4,
      opacity = 0.9,
      show_text = FALSE
    )
  ),
  columns = list(
    total = colDef(
      maxWidth = 225,
      cell = data_bars(
        data = sanmarcos_sales,
        fill_color = c('#002347','#003366','#003F7D','#FF8E00','#FD7702','#FF5003'),
        bias = 1.4,
        fill_opacity = 0.9,
        background = 'transparent',
        bar_height = 40,
        text_position = 'center'
        ),
      style = list(borderLeft = "2px solid #999999")
    )
  )
) %>
  add_title(
    title = html("San Marcos Housing Sales <i class='fas fa-home'></i>"),
    align = 'center',
    margin = reactablefmtr::margin(t=10,r=0,b=2,l=0)
  ) %>
  add_subtitle(
    subtitle = 'Hover over cells to see values',
    font_style = 'italic',
    font_color = '#777777',
    font_size = 18,
    align = 'center',
    margin = reactablefmtr::margin(t=0,r=0,b=10,l=0)
  ) %>
  add_legend(
    data = sanmarcos_legend,
    align = 'left',
    title = '# of Sales (Jan - Dec)',
    col_name = 'sales',
    colors = c('#002347','#003366','#003F7D','#FF8E00','#FD7702','#FF5003'),
    bias = 1.4,
    bins = 6
  )
```

--------------------------------

### Position Text Center in Data Bars

Source: https://kcuilla.github.io/reactablefmtr/articles/data_bars.html

Align text labels to the center of the filled bars with `text_position = "center"`. This example includes percentage formatting.

```r
reactable(
  data,
  pagination = FALSE,
  defaultColDef = colDef(
    cell = data_bars(data,
                     text_position = "center", 
                     number_fmt = scales::percent)
  )
)
```

--------------------------------

### Apply fivethirtyeight theme to reactable

Source: https://kcuilla.github.io/reactablefmtr/reference/fivethirtyeight.html

Demonstrates applying the theme to a reactable object with default and custom settings.

```R
data <- iris[10:29, ]

## Standard fivethirtyeight theme
reactable(data,
          theme = fivethirtyeight())
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Additional options applied
reactable(data,
          theme = fivethirtyeight(font_size = 12, font_color = "grey", cell_padding = 3))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator
```

--------------------------------

### Apply Standard Midnight Theme

Source: https://kcuilla.github.io/reactablefmtr/reference/midnight.html

Applies the default midnight theme to an iris dataset subset. Note: This example may produce an error if the environment is not set up correctly.

```R
data <- iris[10:29, ]

## Standard midnight theme
reactable(data,
          theme = midnight())
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator
```

--------------------------------

### Create a Complex Table with Icon Legends and Gauges

Source: https://kcuilla.github.io/reactablefmtr/articles/reactablefmtr_cookbook.html

Demonstrates advanced table formatting including merged columns, gauge charts, icon sets, and adding an icon legend.

```R
cars <- mtcars %>%
  rownames_to_column(var = 'model') %>% 
  select(c(model,cyl,am,hp,qsec)) %>%
  mutate(rank = rank(qsec)) %>% 
  relocate(rank, .before = 'model') %>% 
  mutate(medals = case_when(
    rank <= 3 ~ 'medal',
    TRUE ~ ''
  ),
  medal_colors = case_when(
    rank == 1 ~ '#D6AF36',
    rank == 2 ~ '#D7D7D7',
    rank == 3 ~ '#A77044',
    TRUE ~ 'grey'
  )) %>% 
    mutate(transmission = case_when(
    am == 0 ~ 'Automatic',
    am == 1 ~ 'Manual',
    TRUE ~ 'Missing'
  )) %>% 
  select(-am) %>%
  select(c(rank,medal_colors,medals,model,transmission,hp,cyl,qsec)) %>%
  filter(rank <= 11)

reactable(cars,
  theme = nytimes(centered = TRUE, font_color = '#444444'),
  compact = TRUE,
  defaultSortOrder = 'asc',
  defaultSorted = 'qsec',
  pagination = FALSE,
  showSortIcon = FALSE,
  columns = list(
    model = colDef(
      name = 'MODEL / TRANS.',
      maxWidth = 150,
      cell = merge_column(
        data = cars,
        merged_name = 'transmission',
        merged_position = 'below',
        size = 13,
        merged_size = 13
      )
    ),
    cyl = colDef(
      maxWidth = 70, 
      align = 'center',
        cell = icon_assign(
          cars,
          fill_color = 'slategrey',
          empty_color = 'lightgrey',
          empty_opacity = 0.8,
          icon_size = 12
          )
      ),
    hp = colDef(
      align = 'center', 
      maxWidth = 70,
        cell = gauge_chart(
          data = cars,
          size = 1,
          fill_color =  rev(MetBrewer::met.brewer('Troy')), 
          min_value = 50
          )
        ),
    rank = colDef(
      maxWidth = 45,
      cell = icon_sets(
        data = cars,
        icon_ref = 'medals',
        icon_color_ref = 'medal_colors',
        icon_position = 'left',
        number_fmt = scales::number_format(accuracy = 1)
      )
    ),
    transmission = colDef(show = FALSE),
    medals = colDef(show = FALSE),
    medal_colors = colDef(show = FALSE),
    qsec = colDef(
      name = '1/4 mile time',
      align = 'left',
      minWidth = 200,
      format = colFormat(digits = 0),
      cell = data_bars(
        data = cars,
        fill_color = c('#FAFAFA','#E7E7E7','#D3D3D3','#BFBFBF'),
        fill_gradient = TRUE,
        bold_text = TRUE,
        background = 'transparent',
        text_position = 'inside-base',
        text_color = '#222222',
        number_fmt = scales::number_format(accuracy = 0.1, suffix = 's'),
        bar_height = 12,
        min_value = 13,
        max_value = 17.5,
        img = 'https://www.pngkit.com/png/detail/54-544889_45-top-view-of-car-clipart-images-racecar.png',
        img_height = 20,
        img_width = 25
      )
    )
  )
) %>% 
  add_title(
    title = html("Top 10 Fastest Cars <i class='fas fa-flag-checkered'></i>"),
    font_color = 'black',
    margin = reactablefmtr::margin(t=0,r=0,b=2,l=0)
  ) %>% 
  add_subtitle(
    subtitle = "Motor Trend Car Road Tests (mtcars data set)",
    font_size = 18,
    font_color = '#222222',
    margin = reactablefmtr::margin(t=0,r=0,b=4,l=0)
  ) %>% 
  add_icon_legend(
    icon_set = 'medals'
  )
```

--------------------------------

### Default Text Position in Data Bars

Source: https://kcuilla.github.io/reactablefmtr/articles/data_bars.html

By default, values are positioned on the 'inside-end' of the filled bars. This example sets up a reactable table with data bars and percentage formatting.

```r
data <- data.frame(
  Group = c("Red Group 1","Red Group 2","Red Group 3","Red Group 4","Red Group 5",
            "Blue Group 1","Blue Group 2","Blue Group 3","Blue Group 4","Blue Group 5",
            "Green Group 1","Green Group 2","Green Group 3","Green Group 4","Green Group 5"),
  Pct1 = c(.27, .82, .44, .68, .78, 
           .74, .66, .33, .23, .20, 
           .50, .55, .40, .70, .60),
  Pct2 = c(.33, .17, .87, .54, .37,
           .84, .72, .61, .48, .77,
           .21, .39, .60, .55, .81)
)
reactable(
  data,
  pagination = FALSE,
  defaultColDef = colDef(
    cell = data_bars(data, 
                     number_fmt = scales::percent)
  )
)
```

--------------------------------

### Apply dark theme to reactable

Source: https://kcuilla.github.io/reactablefmtr/reference/dark.html

Demonstrates applying the dark theme to a reactable table with default and custom settings.

```R
data <- iris[10:29, ]

## Standard dark theme
reactable(data,
          theme = dark())
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Additional options applied
reactable(data,
          theme = dark(font_size = 12, font_color = "red", cell_padding = 3))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator
```

--------------------------------

### Hide Text in Data Bars

Source: https://kcuilla.github.io/reactablefmtr/articles/data_bars.html

Completely hide text labels within the data bars by setting `text_position = "none"`. This example does not specify number formatting.

```r
reactable(
  data,
  pagination = FALSE,
  defaultColDef = colDef(
    cell = data_bars(data, 
                     text_position = "none")
  )
)
```

--------------------------------

### Using External Color Palettes (e.g., viridis)

Source: https://kcuilla.github.io/reactablefmtr/articles/color_scales.html

Illustrates how to use color palettes from other R packages, such as the 'Mako' palette from the `viridis` package.

```APIDOC
## Using External Color Palettes

### Description
Applies color scales to table columns using palettes from external R packages, demonstrated with the `viridis::mako()` palette.

### Method
`color_scales(data, colors)`

### Parameters
#### Arguments
- **data** (data.frame) - The input data frame for the table.
- **colors** (character vector) - A vector of color codes, potentially generated from another package's palette function.

### Request Example
```R
library(viridis)

reactable(
  data,
  defaultSorted = 'MPG.highway',
  defaultSortOrder = 'desc',
  columns = list(
    MPG.city = colDef(
      style = color_scales(data, colors = viridis::mako(5))
      ),
    MPG.highway = colDef(
      style = color_scales(data, colors = viridis::mako(5))
      )
  )
)
```

### Response
Displays a reactable table with columns colored using the specified external color palette.
```

--------------------------------

### Apply espn theme to reactable

Source: https://kcuilla.github.io/reactablefmtr/reference/espn.html

Demonstrates applying the theme to a reactable table with default and custom settings.

```R
data <- iris[10:29, ]

## Standard espn theme
reactable(data,
          theme = espn())
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator

## Additional options applied
reactable(data,
          theme = espn(font_size = 12, font_color = "grey", cell_padding = 3))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator
```

--------------------------------

### Control Color Opacity in Color Scales

Source: https://kcuilla.github.io/reactablefmtr/articles/color_scales.html

Sets the opacity of the color scale applied to table columns using the 'opacity' argument in `color_scales()`. An opacity of 0.5 is used in this example.

```r
reactable(
  data,
  defaultSorted = 'MPG.highway',
  defaultSortOrder = 'desc',
  columns = list(
    MPG.city = colDef(
      style = color_scales(data, colors = my_color_pal, opacity = 0.5)
      ),
    MPG.highway = colDef(
      style = color_scales(data, colors = my_color_pal, opacity = 0.5)
      )
  )
)
```

--------------------------------

### Join team logos to dataset

Source: https://kcuilla.github.io/reactablefmtr/articles/data_bars.html

Prepare the dataset by joining team logo and color information.

```R
qbs <- qbs %>%
  left_join(teams_colors_logos, by = c('team' = 'team_abbr')) %>% 
  select(name, team_logo_espn, team_color, cpoe, epa)
```

--------------------------------

### Position Text Outside End in Data Bars

Source: https://kcuilla.github.io/reactablefmtr/articles/data_bars.html

Set text position to 'outside-end' for values positioned outside the end of the filled bars. This example uses percentage formatting.

```r
reactable(
  data,
  pagination = FALSE,
  defaultColDef = colDef(
    cell = data_bars(data,
                     text_position = "inside-end",
                     number_fmt = scales::percent)
  )
)
```

--------------------------------

### Embed Images in a reactable Column

Source: https://kcuilla.github.io/reactablefmtr/reference/embed_img.html

Use the embed_img() function within the cell argument of reactable::colDef to display images from a URL column. This example shows basic embedding.

```r
reactable(data,
columns = list(
 img = colDef(cell = embed_img())))
```

--------------------------------

### Prepare data for visualization

Source: https://kcuilla.github.io/reactablefmtr/articles/reactablefmtr_cookbook.html

Processes park spending data to identify top spenders for subsequent visualization.

```R
# read in data
parks <- readr::read_csv('https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2021/2021-06-22/parks.csv')

# remove dollar sign and convert to numeric
parks_df <- parks %>% 
  filter(year == 2020) %>% 
  mutate(spend_per_resident_data = parse_number(spend_per_resident_data)) %>% 
  select(city, spend_per_resident_data)

# top 10 spend/resident
top10 <- parks_df %>% 
  top_n(10, spend_per_resident_data) %>% 
  mutate(spenders = 'Top 10 spenders')
```

--------------------------------

### Build Interactive NBA Table with reactablefmtr

Source: https://kcuilla.github.io/reactablefmtr/articles/nba_player_ratings.html

This script loads NBA data, sets up crosstalk filters, and configures a reactable table with custom styling, icons, and conditional formatting.

```R
library(reactablefmtr)
library(htmltools)
library(crosstalk) # for control filters

### load data from 538
data <- read.csv(file = "RAPTOR_by_team_19-20.csv")

### create shared dataset for crosstalk
crosstalk_data <- SharedData$new(data)

### crosstalk team filter
team_filter <- filter_select(
  id = "team",
  label = "TEAM",
  sharedData = crosstalk_data,
  group = ~ TEAM_NAME
)

### crosstalk conference filter
conference_filter <- filter_select(
  id = "conf",
  label = "CONFERENCE",
  sharedData = crosstalk_data,
  group = ~ CONFERENCE
)

### crosstalk minutes filter
minutes_filter <- filter_slider(
  id = "minutes",
  label = "MINUTES PLAYED",
  sharedData = crosstalk_data,
  column = ~ MIN,
  ticks = TRUE,
  dragRange = FALSE,
  step = 100,
  width = "50%"
)

### load font from google fonts
htmltools::tags$link(href = "https://fonts.googleapis.com/css?family=Chivo:400,600,700&display=swap", rel = "stylesheet")

nba_table <-  reactable(
  crosstalk_data,
  theme = fivethirtyeight(centered = TRUE),
  compact = TRUE,
  ### add column group header
  columnGroups = list(
    colGroup(name = "OVERALL RAPTOR", columns = c("OFF","DEF","TOT"))
    ),
  showSortIcon = FALSE,
  searchable = TRUE,
  language = reactableLang(
    searchPlaceholder = "SEARCH FOR A PLAYER..."),
  defaultPageSize = 100,
  columns = list(
    TEAM_NAME = colDef(show = FALSE),
    CONFERENCE = colDef(show = FALSE),
    RANK = colDef(maxWidth = 55, name = ""),
    PLAYER = colDef(maxWidth = 225),
    ### add logos using embed_img()
    TEAM_LOGO = colDef(
      name = "TEAM",
      maxWidth = 70,
      align = "center",
      cell = embed_img(height = 25, width = 40)
    ),
    ### add icons using icon_assign()
    MIN = colDef(
      maxWidth = 85,
      align = "center",
      cell = icon_assign(
        data,
        icon = "stopwatch",
        fill_color = "#555555",
        buckets = 5
      ),
      style = list(borderRight = "1px dashed rgba(0, 0, 0, 0.3)")
    ),
    ### add color scales using color_scales()
    OFF = colDef(
      maxWidth = 60,
      cell = function(x)
        sprintf("%+0.1f", x),
      style = color_scales(data, colors = c("#fd84a9", "white", "#42c2ca"))
    ),
    ### add color scales using color_scales()
    DEF = colDef(
      maxWidth = 60,
      cell = function(x)
        sprintf("%+0.1f", x),
      style = color_scales(data, colors = c("#fd84a9", "white", "#42c2ca"))
    ),
    ### add color scales using color_scales()
    TOT = colDef(
      maxWidth = 60,
      cell = function(x)
        sprintf("%+0.1f", x),
      style = color_scales(data, colors = c("#fd84a9", "white", "#42c2ca"))
    ),
    ### add bars using data_bars_pos_neg()
    WAR = colDef(
      maxWidth = 280,
      align = "center",
      cell = data_bars(
        data,
        fill_color = c("#fd84a9", "#fee6ed", "#d9f2f4", "#42c2ca"),
        number_fmt = scales::number_format(accuracy = 0.1)
      ),
      style = list(borderLeft = "1px dashed rgba(0, 0, 0, 0.3)")
    )
  )
)

### display crosstalk filters
div(bscols(
  widths = c(4, NA, NA),
    list(team_filter,
         conference_filter,
         minutes_filter))
)

### display table
div(nba_table)
```

--------------------------------

### Apply Standard nytimes Theme

Source: https://kcuilla.github.io/reactablefmtr/reference/nytimes.html

Applies the default New York Times theme to an iris dataset subset. Note: This example may produce an error if the reactable package is not fully set up.

```r
data <- iris[10:29, ]

## Standard nytimes theme
reactable(data,
          theme = nytimes())
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator
```

--------------------------------

### Apply sunrise theme to reactable

Source: https://kcuilla.github.io/reactablefmtr/reference/sunrise.html

Defines the configuration parameters for the sunrise theme.

```R
sunrise(
  font_size = 15,
  font_color = "#8069ff",
  header_font_size = 15,
  header_font_color = "#8069ff",
  cell_padding = 6,
  centered = FALSE
)
```

--------------------------------

### Customize Color Palette in Color Scales

Source: https://kcuilla.github.io/reactablefmtr/articles/color_scales.html

Applies a custom color palette to table columns using the 'colors' argument in `color_scales()`. The example uses a predefined R color vector 'my_color_pal'.

```r
my_color_pal = c('#e5f5e0', '#a1d99b', '#31a354')

reactable(
  data,
  defaultSorted = 'MPG.highway',
  defaultSortOrder = 'desc',
  columns = list(
    MPG.city = colDef(
      style = color_scales(data, colors = my_color_pal)
      ),
    MPG.highway = colDef(
      style = color_scales(data, colors = my_color_pal)
      )
  )
)
```

--------------------------------

### Apply Standard Journal Theme

Source: https://kcuilla.github.io/reactablefmtr/reference/journal.html

Applies the default journal theme to an iris dataset subset. Note: This example may produce an error if the reactable package is not fully set up or if there are environment issues.

```R
data <- iris[10:29, ]

## Standard journal theme
reactable(data,
          theme = journal())
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator
```

--------------------------------

### Define default theme parameters

Source: https://kcuilla.github.io/reactablefmtr/reference/default.html

Configuration function for setting font, color, and padding properties in a reactable table.

```R
default(
  font_size = 15,
  font_color = "#333333",
  header_font_size = 15,
  header_font_color = "#333333",
  cell_padding = 6,
  centered = FALSE
)
```

--------------------------------

### Conditional Color Assignments by Numeric Condition in reactable

Source: https://kcuilla.github.io/reactablefmtr/articles/color_scales.html

Apply conditional coloring based on numeric values in a column using dplyr::case_when and color_scales with color_ref. This example highlights cars with MPG.city >= 23.

```r
car_data <- car_data %>%
  mutate(mpg_colors = dplyr::case_when(
  MPG.city >= 23 ~ 'darkgreen',
  TRUE ~ 'grey'
  ))

reactable(
  car_data,
  defaultSorted = 'MPG.city',
  defaultSortOrder = 'desc',
  defaultColDef = colDef(
    style = color_scales(car_data, color_ref = 'mpg_colors')
    ),
  columns = list(
    car_colors = colDef(show = FALSE),
    mpg_colors = colDef(show = FALSE))
)
```

--------------------------------

### minty()

Source: https://kcuilla.github.io/reactablefmtr/reference/minty.html

Applies a Bootstrap-inspired minty theme to a reactable table.

```APIDOC
## minty()

### Description
Applies a Bootstrap-inspired minty theme to a reactable table.

### Parameters
- **font_size** (numeric) - Optional - Size of the font within the table (in px). Default is 15.
- **font_color** (string) - Optional - Color of the font for the text within the table and group headers. Default is #9a9a9a.
- **header_font_size** (numeric) - Optional - Size of the font within the table header (in px). Default is 16.
- **header_font_color** (string) - Optional - Color of the font for the header text. Default is #c9e7de.
- **cell_padding** (numeric) - Optional - Padding size between cells (in px). Default is 6.
- **centered** (logical) - Optional - Vertically center the contents of the table. Default is FALSE.

### Value
An object of class theme that is applied to a reactable table.

### Request Example
reactable(data, theme = minty(font_size = 12, font_color = "grey", cell_padding = 3))
```

--------------------------------

### Apply Standard Cyborg Theme

Source: https://kcuilla.github.io/reactablefmtr/reference/cyborg.html

Applies the default cyborg theme to an iris dataset subset. Note: The example output shows an error, indicating potential issues with the environment or data in the original context.

```r
data <- iris[10:29, ]

## Standard cyborg theme
reactable(data,
          theme = cyborg())
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator
```

--------------------------------

### Merge Cells and Add Borders on Sort

Source: https://kcuilla.github.io/reactablefmtr/articles/nfl_standings_tutorial.html

Use `group_border_sort()` in `rowStyle` and `group_merge_sort()` in `style` to merge cells and add borders between groups when sorting by a specific column. This example merges and adds borders based on the 'Division' column.

```r
data %>
  reactable(.,
            theme = fivethirtyeight(centered = TRUE, header_font_size = 11),
            defaultSorted = "Division",
            # add border between groups when sorting by the Division column
            rowStyle = group_border_sort("Division"),
            columns = list(
              Division = colDef(
                name = "Div.",
                # hide rows containing duplicate values on sort 
                style = group_merge_sort("Division")
              ))
  )

```

--------------------------------

### Create Basic Sparkline

Source: https://kcuilla.github.io/reactablefmtr/articles/sparklines.html

Render a standard sparkline chart inside a reactable column.

```R
reactable(
  df,
  columns = list(
    species = colDef(maxWidth = 90),
    sex = colDef(maxWidth = 85),
    flipper_length = colDef(
      cell = react_sparkline(df)
    )
  )
)
```

--------------------------------

### Apply Midnight Theme with Custom Options

Source: https://kcuilla.github.io/reactablefmtr/reference/midnight.html

Applies the midnight theme with custom font size, font color, and cell padding to an iris dataset subset. Note: This example may produce an error if the environment is not set up correctly.

```R
reactable(data,
          theme = midnight(font_size = 12, font_color = "grey", cell_padding = 3))
#> Error in x$width %||% settings$fig.width * settings$dpi: non-numeric argument to binary operator
```

--------------------------------

### Define void theme parameters

Source: https://kcuilla.github.io/reactablefmtr/reference/void.html

Configure the visual properties of the void theme, such as font size, colors, and border widths.

```R
void(
  font_size = 14,
  font_color = "#222222",
  header_font_size = 15,
  header_font_color = "transparent",
  border_color = "transparent",
  border_width = 0,
  header_border_color = "transparent",
  header_border_width = 0,
  centered = FALSE,
  cell_padding = 6
)
```