Show dataTableOutput in modal in shiny app

Question

Great R community, I am just wondering if it is possible to show DT::dataTableOutput in a modal with the push of an action button. For example, data table output as something like following.

Here is a some code to begin with:

## app.R ##
library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  
  dashboardHeader(),
  ## Sidebar content
  dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard"))
    )
  ),
  
  ## Body content
  dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "dashboard",
              actionButton("showTable", "Show Table", icon = icon("table"))
              ##fluidRow( DT::dataTableOutput('tbl') )
              ## SOME CODE TO SHOW DATA TABLE IN MODAL
      )
    )
  )
)

server <- function(input, output) { 
  output$tbl = DT::renderDataTable(
    iris, options = list(lengthChange = FALSE) 
  )
}

shinyApp(ui, server)

bsModel() in the UI from shinyBS package should do the trick. Edit: you'll need to define the modal in the server as well, but you can continue to renderDataTable() in the server. — Ryan Morton, May 02 '17 at 22:42

score 8 · Accepted Answer · edited May 23 '17 at 11:33

Thanks Ryan for your quick suggestion. Get it nailed. Here is my working example:

## app.R ##
library(shiny)
library(shinyBS)
library(shinydashboard)

ui <- dashboardPage(

  dashboardHeader(),
  ## Sidebar content
  dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard"))
    )
  ),

  ## Body content
  dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "dashboard",
              actionButton("showTable", "Show Table", icon = icon("table")),
              bsModal("modalExample", "Data Table", "showTable", size = "large",
                      dataTableOutput("tbl"))
      )
    )
  )
)

server <- function(input, output) { 
  output$tbl = renderDataTable( iris, options = list(lengthChange = FALSE))
}

shinyApp(ui, server)

Show dataTableOutput in modal in shiny app

1 Answers1

Linked