R Shiny DataTable filter cut off

Asked by At

Here is the link to the data file, you may convert it in txt format. https://docs.google.com/document/d/1agR2wu82vBBv99DbmdXAQwyS9PF6nUUaKA1bGPH6eno/edit?usp=sharing

Here is the screenshot for the cutoff When I add filter to the datatable in shiny dashboard, the dropdown box for the filter are cut off. Is there a way to fix this?( For example, for the 'Species' column, the filter dropdown box doesn't show the whole look of the two options, I need to widen the dropdown box in some way.) Here is the code which can be reproduced in Rstudio:


sidebar <- dashboardSidebar(
  menuItem("Summary", tabName = "summary"),
  menuItem("Analysis", tabName = "analysis")

body <- dashboardBody(
     tabItem(tabName = "summary",
     #column(width = 4,
      title = "Studies", width = 12, status = "danger", solidHeader = TRUE,

      div(style = 'overflow-y: scroll; max-height: 600px', DT::dataTableOutput('table'))
      #div(style = 'overflow-y: scroll; max-height: 300px', tableOutput('table'))

      title = "Type of cancer", status = "warning", width = 6, plotOutput("hist1")

      title = "Data type", status = "warning", color="yellow", width = 6, plotOutput("DataType"))
tabItem(tabName = "analysis", h2("Analysis and plots"))

ui <- dashboardPage(
   dashboardHeader(title = "Cancer research updates", titleWidth = 300),

server <- function(input, output) {
   #test.table <- data.frame(lapply(1:3, function(x) {1:20}))
   #names(test.table) <- paste0('This_is_a_very_long_name_', 1:3)
   pcdata <- read.csv("./data/ProstateCancerInput_Final.txt", sep = "\t", encoding = 'UTF-8')
   colnames(pcdata)[1] <- ''
   colnames(pcdata)[6] <- 'Data type'
   colnames(pcdata)[9] <- 'Type of cancer'
   pcdata$Link <- paste0("<a href ='",pcdata$Link,"'>","Link to data","</a>")
   output$table <- DT::renderDataTable({
   datatable(pcdata, rownames = FALSE, escape = FALSE,filter = 'top')

   #windowsFonts(Arial=windowsFont("TT Arial")) 

 shinyApp(ui = ui, server = server)

1 Answers

SOwla On

Congrats on your first SO question :) I agree with @divibisan that a reproducible example (or even a screenshot) would help. If you're not sure how to make one, check out eg. this article or this video.

From your description, I think you'd have add "overflow: visible" to the style of the div your table is in. Here are some images of the different overflow property values and you can play around with them here. Feel free to ask more questions if you're not sure what I mean.

Good luck!