How to set the page width in R Shiny?

Question

I have a fluidPage with a sidebarLayout. In the mainPanel, I have a very wide dataTableOutput (in a tabPanel).

Currently, the columns are being squished together and each row is text-wrapped to span many lines. However, I want each row of the table not to be text-wrapped and to enable horizontal scrolling on the page.

Minimal working example:

library(shiny)
nrow <- 20; ncol <- 26
runApp(list(
    ui = fluidPage(
        sidebarLayout(
            sidebarPanel(helpText("Hello world")),
            mainPanel(
                tabsetPanel(
                    tabPanel("Table", dataTableOutput("table"))
                )
            )
        )
    ),
    server = function(input, output, session) {
        output$table <- renderDataTable(
            as.data.frame(
                matrix(nrow = nrow,
                    rep("The quick brown fox jumps over the lazy dog", nrow*ncol)
                )
            )
        )
    }
))

...which outputs:

Now, how to prevent "The quick brown fox jumps over the lazy dog" from being text-wrapped and so occupy just a single line?

Is there some option I can set to make the page wider?

Answer 1

Surrond your tabpanel with a div giving a width. Add some css to change the max-width of a fluid container

library(shiny)
nrow <- 20; ncol <- 26
runApp(list(
  ui = fluidPage(
    sidebarLayout(
      sidebarPanel(helpText("Hello world")),
      mainPanel(

        tabsetPanel(
          div(tabPanel("Table", dataTableOutput("table")), style = 'width:5500px;')
        )
        , 
        tags$head(tags$style(type="text/css", ".container-fluid {  max-width: 12600px; /* or 950px */}"))
      )
    )
  ),
  server = function(input, output, session) {
    output$table <- renderDataTable({
      as.data.frame(
        matrix(nrow = nrow,
               rep("The quick brown fox jumps over the lazy dog", nrow*ncol)
        )
      )
    })
  }
))

Answer 2

Move the div from enclosing the tabPanel to enclose the tabPanel contents as illustrated below:

  tabsetPanel(
    tabPanel("Table", div(dataTableOutput("table"), style = 'width:5500px;'))
    tabPanel("Table2", div(dataTableOutput("table2"), style = 'width:5500px;'))
    )

enclosing the tabPanels inside the div, results in a single tabPanel containing both tables instead of two tabPanels each containing one table.