简体   繁体   中英

Extend width of column with renderDataTable in Shiny

I 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 !

One option would be to shorten the link like this:

ASIN_url <- c("<a href='https://www.amazon.com/dp/B004FXJOQO'>Link</a>", "<a href='https://www.amazon.com/dp/B004FXJOQO'>Link</a>")

Another would be to add a scroll bar by including scrollX = TRUE in the option list

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM