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)
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.