Leaflet map inside reactable table R Shiny

Question

I would like to include maps in one of the columns of a reactable table, each map would be occupy a cell inside the table. Something like this:

I've tried this:

library(shiny)
library(reactable)
library(leaflet)

ui <- fluidPage(
  mainPanel(
    reactableOutput("table")  
  )
)

server <- function(input, output, session) {
  df_aus <- data.frame(country = "australia",
                        latitude = -35.31,
                        longitude = 149.13)
  
  df_belg <- data.frame(country = "belgium",
                         latitude = 50.83,
                         longitude = 4.33)
  
  map_aus = leaflet(df_aus) %>%
    addProviderTiles("CartoDB.Positron")%>%
    addMarkers(
      label = ~ country,
      layerId = ~ country
      )
  map_belg = leaflet(df_belg) %>%
    addProviderTiles("CartoDB.Positron")%>%
    addMarkers(
      label = ~ country,
      layerId = ~ country
    )
  
  df <- data.frame(country = c("australia","belgium"),
                   values = c(10, 20),
                   map = c(map_aus,map_belg))
  
  output$table <- renderReactable({
    reactable(df)
  })
}

shinyApp(ui, server)

However this returns an error, even though the two maps work. I'm thinking that I might have to include a renderLeaflet() for the columns, but I'm not sure where.

I also tried adding the renderLeaflet() like this: But it did not work either.

  df <- data.frame(country = c("australia","belgium"),
                   values = c(10, 20),
                   map = c(leafletOutput('map_1'), leafletOutput('map_2'))
                   )
  
  output$map_1 <- renderLeaflet(map_aus)
  output$map_2 <- renderLeaflet(map_belg)

Answer 1

You need to do this:

library(shiny)
library(reactable)
library(leaflet)

ui <- fluidPage(
    mainPanel(
        reactableOutput("table")  
    )
)

server <- function(input, output, session) {
    df_aus <- data.frame(country = "australia",
                         latitude = -35.31,
                         longitude = 149.13)
    
    df_belg <- data.frame(country = "belgium",
                          latitude = 50.83,
                          longitude = 4.33)
    
    map_aus = leaflet(df_aus, height = "100px") %>%
        addProviderTiles("CartoDB.Positron")%>%
        addMarkers(
            label = ~ country,
            layerId = ~ country
        )
    map_belg = leaflet(df_belg, height = "100px") %>%
        addProviderTiles("CartoDB.Positron")%>%
        addMarkers(
            label = ~ country,
            layerId = ~ country
        )
    maps <- list(map_aus, map_belg)
    df <- data.frame(country = c("australia","belgium"),
                     values = c(10, 20),
                     map = NA)
    
    output$table <- renderReactable({
        reactable(data = df, columns = list(
            map = colDef(cell = function(value, index) {
                maps[[index]]
            })
        ), )
    })
}

shinyApp(ui, server)

To define a custom column, you need to use colDef and define a function for this column.