How do I get images to display more economically in a gt table (less blank space) using gt_img_rows?

30 Views Asked by At

I am creating a gt table and with headshot images of baseball player and the images are displaying in suboptimal fashion. What I want is to for the cell borders to converge more tightly around the image, so that there is barely any blank space between the borders and the player's head/torso. Instead, I get the following:

Example Output. Far too much blank space surrounding headshots

My code:

library(gt)
library(gtExtras)
library(tidyverse)

data <- structure(list(Extension = c(91, 92, 93, 94, 95), 
`4.8` = c("https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
                                                                    "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
                                                                    "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
                                                                    "https://a.espncdn.com/combiner/i?img=/i/headshots/mlb/players/full/34928.png", 
                                                                    "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png"
), 
`5` = c("https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
           "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
           "https://a.espncdn.com/combiner/i?img=/i/headshots/mlb/players/full/36093.png", 
           "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
           "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png"
), 
`5.2` = c("https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
             "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
             "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
             "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
             "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png"
), 
`5.4` = c("https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
             "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
             "https://a.espncdn.com/combiner/i?img=/i/headshots/mlb/players/full/36002.png", 
             "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
             "https://a.espncdn.com/combiner/i?img=/i/headshots/mlb/players/full/4705673.png"
)), class = c("tbl_df", "tbl", "data.frame"), row.names = c(NA, 
                                                            -5L))

data %>% 
  gt() %>% 
  gt_theme_espn() %>% 
  
  ## for some reason using cols_width misaligns images (to the right)
  # cols_width(
  # everything() ~ px(40)
  #  ) %>%
  
  gt_img_rows(2, height = 40) %>% #add headshots
  gt_img_rows(3, height = 40) %>% 
  gt_img_rows(4, height = 40) %>% 
  gt_img_rows(5, height = 40) %>% 
  tab_header(title = "Avg. Velo and Extension") %>%

  cols_align(
    align = "center",
    columns = c(1:5)) %>%
  
tab_style(
    style = list(
      cell_fill(color = "#FFFFFF")
    ),
    locations = cells_body()) %>% 
  
tab_style(
    style = cell_borders(
      sides = c("top", "bottom", "left","right"),
      color = "gray",
      weight = px(1.5),
      style = "solid"
    ),
    locations = cells_body()
  ) %>% 
  
tab_spanner(label = "Extension (ft)", columns = c(
    2:5)) %>% 
  
cols_label(Extension = md("Avg<br />Velo"))

Note that I've tinkered with cols_width (see commented code in above chunk) but to no avail. Grateful for any help here.

1

There are 1 best solutions below

1
ihecker On BEST ANSWER

tab_options() has two arguments for adjusting vertical (data_row.padding =) and horizontal (data_row.padding.horizontal =) padding. When set to 0, it removes most of the excess blank space.

library(gt)
library(gtExtras)
library(tidyverse)

data <- structure(list(Extension = c(91, 92, 93, 94, 95), 
                       `4.8` = c("https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
                                 "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
                                 "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
                                 "https://a.espncdn.com/combiner/i?img=/i/headshots/mlb/players/full/34928.png", 
                                 "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png"
                       ), 
                       `5` = c("https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
                               "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
                               "https://a.espncdn.com/combiner/i?img=/i/headshots/mlb/players/full/36093.png", 
                               "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
                               "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png"
                       ), 
                       `5.2` = c("https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
                                 "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
                                 "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
                                 "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
                                 "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png"
                       ), 
                       `5.4` = c("https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
                                 "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
                                 "https://a.espncdn.com/combiner/i?img=/i/headshots/mlb/players/full/36002.png", 
                                 "https://upload.wikimedia.org/wikipedia/commons/1/12/White_background.png", 
                                 "https://a.espncdn.com/combiner/i?img=/i/headshots/mlb/players/full/4705673.png"
                       )), class = c("tbl_df", "tbl", "data.frame"), row.names = c(NA, 
                                                                                   -5L))

data %>% 
  gt() %>% 
  gt_theme_espn() %>% 
  
  ## for some reason using cols_width misaligns images (to the right)
  # cols_width(
  # everything() ~ px(40)
  #  ) %>%
  
  gt_img_rows(2, height = 40) %>% #add headshots
  gt_img_rows(3, height = 40) %>% 
  gt_img_rows(4, height = 40) %>% 
  gt_img_rows(5, height = 40) %>% 
  tab_header(title = "Avg. Velo and Extension") %>%
  
  cols_align(
    align = "center",
    columns = c(1:5)) %>%
  
  tab_style(
    style = list(
      cell_fill(color = "#FFFFFF")
    ),
    locations = cells_body()) %>% 
  
  tab_style(
    style = cell_borders(
      sides = c("top", "bottom", "left","right"),
      color = "gray",
      weight = px(1.5),
      style = "solid"
    ),
    locations = cells_body()
  ) %>% 
  
  tab_spanner(label = "Extension (ft)", columns = c(
    2:5)) %>% 
  
  cols_label(Extension = md("Avg<br />Velo")) %>% 
  
  tab_options(data_row.padding = px(0),
              data_row.padding.horizontal = px(0))