Extend width of column with renderDataTable in Shiny

I am having trouble understanding the behavior of renderDataTable function using Shiny.
I am trying to extend the width of one specific column .
When I am not using Shiny, and just trying to visualize the output of the table, I write the below and I get the expected output in the plot ( Amazon Title column is extended):

Category <- c("Tools & Home Improvement", "Tools & Home Improvement")
AmazonTitle <- c("0.15,Klein Tools NCVT-2 Non Contact Voltage Tester- Dual Range Pen Voltage Detector for Standard and Low Voltage with 3 m Drop Protection", " ABCDFGEGEEFE")
ASIN_url <- c("<a href='https://www.amazon.com/dp/B004FXJOQO'>https://www.amazon.com/dp/B004FXJOQO</a>", "<a href='https://www.amazon.com/dp/B004FXJOQO'>https://www.amazon.com/dp/B0043XJOQO</a>")
ASIN <- c("B004FXJOQO", "B0043XJOQO")

All_ASIN_Information <- data.frame(Category, AmazonTitle, ASIN_url, ASIN)

DT::datatable(All_ASIN_Information, escape=FALSE, 
              options = list(
                pageLength = 20, autoWidth = TRUE,
                columnDefs = list(list( targets = 2, width = '600px'))
              )
)

But when I use this exact block inside a DT::renderDataTable function for Shiny, the result is different and the column width is not extended....
See behavior for Shiny with below code:

library(shiny)
library(DT)


ui <- fluidPage(

  mainPanel(

    DT::dataTableOutput("Table_ASIN")))


server <- function(input, output){

  output$Table_ASIN <- DT::renderDataTable(

    DT::datatable(All_ASIN_Information, escape=FALSE, 
                  options = list(
                    pageLength = 20, autoWidth = TRUE,
                    columnDefs = list(list( targets = 2, width = '600px'))
                  )))

}

shinyApp(ui, server)

I don't know if this behavior is caused by the hyperlinks created in column 'ASIN_url' but I would really need them anyway.

Any help much appreciated on this !

Hi @Maverick. The problem is the width of the data table is not enough to display. You may enable the scrollX to maintain the layout of the data table.

library(shiny)
library(DT)


ui <- fluidPage(
  
  mainPanel(
    
    DT::dataTableOutput("Table_ASIN")))


server <- function(input, output){
  
  output$Table_ASIN <- DT::renderDataTable(
    
    DT::datatable(All_ASIN_Information, escape=FALSE, 
                  options = list(
                    pageLength = 20, autoWidth = TRUE,
                    columnDefs = list(list( targets = 2, width = '600px')),
                    scrollX = TRUE
                  )))
  
}

shinyApp(ui, server)
2 Likes

hi @raytong the solution suggested worked ! Thanks a lot. Just one question, how can I know that the width of the data table is not large enough ? I mean where can I see that? Thx !

Hi @Maverick. The default column width of data table is the length of longest single word. So, if not manually defined, the content will auto format to fit the column width (like column 1). And in shiny, the width of the whole data table fit the container. If the width of data table excess the container, the column width will use default width. So, use scrollX to hide the excess content and remain the defined layout of the data table.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.