First answered here.
You can use the column function to split the layout.
Please see the shiny layout-guide for further information.
You might want to delete the code to generate the dummy images, however I wanted this answer to be reproducible.
Here is what I think you are after:
library(DT)
library(shiny)
# generate dummy images
imgNames = c("carf.jpg", "truckf.jpg", "scooterf.jpg", "bikef.jpg", "cars.jpg", "trucks.jpg", "scooters.jpg", "bikes.jpg")
if(!dir.exists("www")){
dir.create("www")
}
for(imgName in imgNames){
png(file = paste0("www/", imgName), bg = "lightgreen")
par(mar = c(0,0,0,0))
plot(c(0, 1), c(0, 1), ann = F, bty = 'n', type = 'n', xaxt = 'n', yaxt = 'n')
text(x = 0.5, y = 0.5, imgName,
cex = 1.6, col = "black")
dev.off()
}
dat <- data.frame(
type = c("car", "truck", "scooter", "bike"),
frontimage = c("carf.jpg", "truckf.jpg", "scooterf.jpg", "bikef.jpg"),
sideimage = c("cars.jpg", "trucks.jpg", "scooters.jpg", "bikes.jpg")
)
# ----UI----
ui <- fluidPage(
titlePanel("Display two images for each row"),
mainPanel(
DTOutput("table"),
fluidRow(
column(6, uiOutput("img1")),
column(6, uiOutput("img2"))
)
)
)
# ----Server----
server = function(input, output, session){
# Data table with filtering
output$table = DT::renderDT({
datatable(dat, filter = list(position = "top", clear = FALSE),
selection = list(target = 'row'),
options = list(
autowidth = TRUE,
pageLength = 2,
lengthMenu = c(2, 4)
))
})
# Reactive call that only renders images for selected rows
df <- reactive({
dat[input[["table_rows_selected"]], ]
})
# Front image output
output$img1 = renderUI({
imgfr <- lapply(df()$frontimage, function(file){
tags$div(
tags$img(src=file, width="100%", height="100%"),
tags$script(src="titlescript.js")
)
})
do.call(tagList, imgfr)
})
# Side image output
output$img2 = renderUI({
imgside <- lapply(df()$sideimage, function(file){
tags$div(
tags$img(src=file, width="100%", height="100%"),
tags$script(src="titlescript.js")
)
})
do.call(tagList, imgside)
})
}
# ----APP----
# Run the application
shinyApp(ui, server)
