Search code examples
rshinydtslickr

Adding DT datatable to slickR carousel


I am interested in rendering a DT datatable inside slickR's carousel. My actual use case will have an image followed by a table. Here's a quick example of what I am trying to do (code produces an empty shiny app though):

library(shiny)
library(dplyr)
library(purrr)
library(DT)
library(slickR)

ui <- fluidPage(
  slickROutput("iris_slickr")
)

server <- function(input, output) {
  
  output$iris_slickr <- renderSlickR({
    
    iris_split <- iris %>% 
      split(f = ~Species) 
    
    slickR(
      map(
        names(iris_split)
        ,~datatable(iris_split[[.x]])
      )
    )
    
  })
  
}

shinyApp(ui = ui, server = server)

In the example above, I would like a slide per iris species. I believe the reason why this doesn't work is because DT has its own render functions, and I am not sure how to incorporate both renderSlickR and renderDT if that's even possible. I know I could simply use datatable's pagination for this, but as mentioned my use case will also have an image above each table e.g. iris species image.


Solution

  • From my reading of the docs slickR cannot render any objects itself. Instead following the code in this related question you can export each data table object as an HTML file, which could then be included in the slickR carousel as an iframe.

    library(shiny)
    library(purrr)
    library(DT)
    library(slickR)
    
    ui <- fluidPage(
      slickROutput("iris_slickr", width = "90%")
    )
    
    server <- function(input, output) {
      output$iris_slickr <- renderSlickR({
        iris_split <- iris |>
          split(f = ~Species)
    
        filenames <- purrr::map_chr(iris_split, \(x) {
          file <- tempfile(fileext = ".html")
          datatable(x) |>
            htmlwidgets::saveWidget(file)
          
          file
        })
    
        slickR(
          purrr::map_chr(
            filenames,
            \(x) paste0(readLines(x), collapse = "\n")
          ),
          slideType = "iframe",
          height = "500px"
        )
      })
    }
    
    shinyApp(ui = ui, server = server)
    

    enter image description here