Set column width while using scrollX in R

Question

I'm trying to change the width of some columns in a DT::datatable, unfortunately using the columnDefs option only appears to work when there are a small number of columns in the data.

When I add all the columns to my data the column widths no longer follow what I put in the columnDefs options.

Here is an example, as you can see the 1st table the width are all constant, whereas in the second table I have been able to manual set the widths as I desire. Removing the scrollX argument doesn't work either, and given the number of columns my data has I need it in there.


library(MASS)
library(shiny)
library(DT)

ui <- fluidPage(
    mainPanel(
      DT::dataTableOutput("table1"),
      br(),
      br(),
      br(),
      DT::dataTableOutput("table2")
    )
  )

server <- function(input, output) {

  output$table1 <- DT::renderDataTable({
    DT::datatable(
      Cars93[,-(20:27)],
      rownames = FALSE,
      options = list(
        pageLength = 5,
        autowidth = TRUE,
        scrollX = TRUE,
        searching = TRUE,
        ordering = TRUE,
        paging = TRUE,
        columnDefs = list(list(width = "200px", targets = c(0:2)),
                          list(width = "20px", targets = 3),
                          list(width = "50px", targets = 4))
      )
    )
  })
    output$table2 <- DT::renderDataTable({
      DT::datatable(
        Cars93[,-(6:27)],
        rownames = FALSE,
        options = list(
          pageLength = 5,
          autowidth = TRUE,
          scrollX = TRUE,
          searching = TRUE,
          ordering = TRUE,
          paging = TRUE,
          columnDefs = list(list(width = "200px", targets = c(0:2)),
                            list(width = "20px", targets = 3),
                            list(width = "50px", targets = 4))
        )
      )
  })
  
}

shinyApp(ui, server)

What do I need to change in my code to be able to set the column widths in the 1st table like I have them in the 2nd table while will having all the columns and scrollX?

Thanks

Stéphane Laurent Stéphane Laurent · Accepted Answer · 2021-01-11T17:56:38

Try:

ui <- fluidPage(
  tags$head(
    tags$style(
      HTML("table {table-layout: fixed;}")
    )
  ),
  ......

and replace autowidth with autoWidth.

Set column width while using scrollX in R

1 Answers