biggboss2019
biggboss2019

Reputation: 300

How to create Popup window of DataTable/plot in ShinyDashboard?

I am creating ShinyDashboard which reads the csv file inputted by user and displays 2 plots at the top and datatable at the bottom of dashboards. For this I used box to built my Dashboard. Next, I would like create popup for each boxes so the box output displays bigger in size to the enduser. For this I am following the post mentioned here. However, whenever I use ModalDialog under ui code as suggested by Pork Chop. The table output doesn't return anything. Not sure if I am using ModalDialog correctly ? Below is my ui and server code.

Thank in advance for help and effort!

ui

library(shiny)
library(shinydashboard)
library(dplyr)
library(ggplot2)
library(shinyBS)
library(DT)
   
     ui<-dashboardPage(
      dashboardHeader(title="Missing",titleWidth = 230),
      dashboardSidebar(
        fileInput("file1", "Upload CSV File below",
                  accept = c(
                    "text/csv",
                    "text/comma-separated-values,text/plain",
                    ".csv")
        )),
      dashboardBody(
        fluidRow(
        box(plotOutput("Plot1"),collapsible = TRUE,title="Columns ",solidHeader = TRUE,status = "primary"),
        box(plotOutput("Plot2"),collapsible=TRUE,title="Columns data Type",solidHeader = TRUE,status = "primary"),
        fluidRow(column(width=12,box( bsModal("modalExample", "Data Table", "My_datatable", size = "large",dataTableOutput("My_datatable")),width = NULL,collapsible = TRUE))
          )
      )
    )
    )

Server:

    server<- function(input, output,session) {
       output$Plot1 <- renderPlot({
    plot(cars)
  })
 
  output$Plot2 <- renderPlot({ plot(pressure)})
  
  output$My_datatable <- renderDT({iris[1:7,]})
  
}
  
# Run the application 
shinyApp(ui = ui, server = server)
      
      
    

Upvotes: 1

Views: 392

Answers (1)

YBS
YBS

Reputation: 21349

As shown in the answer you need to wrap each item you want to popout in a div() and give an id. Then use that id to popout and display what you wish. Try this

library(shiny)
library(shinydashboard)
library(dplyr)
library(ggplot2)
library(shinyBS)
library(DT)
#library(visdat) 
ui<-dashboardPage(
  dashboardHeader(title="Missing",titleWidth = 230),
  dashboardSidebar(
    fileInput("file1", "Upload CSV File below",
              accept = c(
                "text/csv",
                "text/comma-separated-values,text/plain",
                ".csv")
    )),
  dashboardBody(
    fluidRow(
      div(id="popme1", box(plotOutput("Plot1"),collapsible = TRUE,title="Columns with null",solidHeader = TRUE,status = "primary")),
      bsModal("modalExample1", "Plot1", "popme1", size = "large", plotOutput("Plot11")),
      div(id="popme2", box(plotOutput("Plot2"),collapsible=TRUE,title="Data Types of columns",solidHeader = TRUE,status = "primary")),
      bsModal("modalExample2", "Plot2", "popme2", size = "large", plotOutput("Plot22")),
      div(id="popme3", fluidRow(column(width=8,box(DTOutput("Missing_datatable"), width = NULL,collapsible = TRUE)) )),
      bsModal("modalExample3", "Data Table", "popme3", size = "large", DTOutput("Missing_datatable2"))
    )
  )
)

server<- function(input, output,session) {
  
  output$Plot1 <- renderPlot({
    plot(cars)
  })
  output$Plot11 <- renderPlot({
    plot(cars)
  })
  output$Plot22 <- renderPlot({ plot(pressure)})
  
  output$Plot2 <- renderPlot({ plot(pressure) })
  
  output$Missing_datatable <- renderDT({iris[1:7,]})
  output$Missing_datatable2 <- renderDT({iris[1:7,]})
}
  
# Run the application 
shinyApp(ui = ui, server = server)

Upvotes: 2

Related Questions