CODEWITHSUNDEEP
rshinydt
InesGuardans
InesGuardans

Reputation: 141

Prevent data table column width from changing size Shiny

I have a data table with the right column width that is updated every time the "ADD" button is clicked. When an extra row is added, it automatically resizes to fit the whole main panel, despite the fact that the text fits well.

Here's my REPREX:

library(shiny)
library(DT)

this_table = data.frame(bins = c(30, 50), cb = c(T, F))

ui <- fluidPage(
    
    sidebarLayout(
        sidebarPanel(
            sliderInput("bins",
                        "Number of bins:",
                        min = 1,
                        max = 50,
                        value = 30),
            checkboxInput("cb", "T/F"),
            actionButton("add_btn", "Add")
        ),
        
        mainPanel(
            DTOutput("shiny_table")
        )
    )
)

server <- function(input, output) {
    
    this_table <- reactiveVal(this_table)
    
    observeEvent(input$add_btn, {
        t = rbind(data.frame(bins = input$bins,
                             cb = input$cb), this_table())
        this_table(t)
    })
    

    output$shiny_table <- renderDT({
        datatable(this_table(),
                  rownames = FALSE,
                  options = list(
                      autoWidth = TRUE,
                      columnDefs = list(list(width = "40%", targets = "_all"), list(className = "dt-center", targets = "_all")),
                      pageLength = 23, info = FALSE, lengthMenu = 30,
                      paging = FALSE,
                      #searching = FALSE,
                      lengthChange = FALSE,
                      ordering = FALSE ))
    })
}

shinyApp(ui = ui, server = server)

How do you prevent that from happening so that the column width stays the same?

Upvotes: 0

Views: 611

Answers (1)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84519

That's weird. It looks like the width option disappears when a row is added. You can wrap the DTOutput in a div element with a given width, and set margin: auto to center it:

mainPanel(
  div(
    style = "width: 300px; margin: auto;",
    DTOutput("shiny_table")
  )
)

Upvotes: 1

Related Questions