column width using dt in a shiny app

Question

Is there a way to prevent the table from resizing itself after refreshing data via the drop down menu?

I know this is exactly the same question as in R shiny - DT::renderDataTable column width but as far as I know the question was never sufficiently answered.

library(shiny)
library(tidyr)
library(dplyr)
library(DT)

ui <- fluidPage(selectInput(inputId = "dayinput", 
                            label = "Day Filter", 
                            choices = c("Monday", "Tuesday","Wednesday")), 
                dataTableOutput("table1")
                )

server <- function(input, output) {

  output$table1 <- renderDataTable({
    price <- c("12", "11", "14")
    day <- c("Monday", "Tuesday", "Wednesday")
    df <- data.frame(price, day) %>% filter(day == input$dayinput)

    datatable(df, rownames = FALSE, class = 'cell-border stripe', 
              options = list(dom = 't', pageLength = -1, lengthMenu = list(c(-1), c('All')),
                             autoWidth = TRUE, columnDefs = list(list(width = '50px', targets = "_all"))))
  })
}

shinyApp(ui =ui, server = server)

SeGa · Answer 1 · 2018-05-27T14:10:06.590

1

I think I misunderstood the question at first sight. Anyway, I think you could achieve that with some css-styling.

This is just a small example:

library(shiny)
library(tidyr)
library(dplyr)
library(DT)

ui <- fluidPage(
  tags$head(
    tags$style(HTML(
      "
#table1 {width: 250px !important}
#DataTables_Table_0 td {width: 125px !important}
      "
    ))
    ),
  selectInput(inputId = "dayinput", 
              label = "Day Filter", 
              choices = c("Monday", "Tuesday","Wednesday","Thuuuuuuuuuuuuuuuursday")), 
  dataTableOutput("table1")
)

server <- function(input, output) {

  output$table1 <- renderDataTable({
    price <- c("12", "11", "14", "15")
    day <- c("Monday", "Tuesday", "Wednesday","Thuuuuuuuuuuuuuuuursday")
    df <- data.frame(price, day) %>% filter(day == input$dayinput)

    datatable(df, rownames = FALSE, class = 'cell-border stripe', 
              options = list(dom = 't', pageLength = -1, lengthMenu = list(c(-1), c('All')),
                             autoWidth = FALSE)
    )
  })
}

shinyApp(ui =ui, server = server)

edited May 27 '18 at 14:10

answered May 22 '18 at 10:59

SeGa

9,454
3
31
70

Yes normally that would work, unfortunatelly I dont know the number of columns in advance which makes it hard to predetermine the appropriate width of the table. – Abild May 23 '18 at 18:41
Can you determine a fixed width and add `scrollX = TRUE` to the datable-options? Or fix it with some css? – SeGa May 23 '18 at 20:11
Do you mean a fixed column width? if so, can you please show some example code? If you mean fixed table width I dont see the use of scrollX? – Abild May 26 '18 at 15:21
I editd my answer. You can determine the column width alsowith css-rules. Lets say you have a table with 20 columns and you just have a limited space in the App, you could determine a fixed maximum width of the table. If the table width is bigger than the given space, scrollX definitly makes sense. – SeGa May 27 '18 at 14:12
Thanks a lot. Your help is very much appreciated! – Abild May 28 '18 at 11:29
1

DT’s ‘columnDefs’ argument does not work on my end, so I resorted to using CSS styling like you suggested to apply a max column width style. – Dale Kube Aug 28 '18 at 03:58

column width using dt in a shiny app

1 Answers1