Column widths in renderDataTable of a shiny app without stretching

Question

I would like to get a DataTable (with all its ranking, search and page features) that does not stretch fully across the page, and results in large amounts of white space in each column...

... ideally with column widths similar to the "wrap" style from renderTable...

I know I can fix relative column widths, however, my table will dynamically update with different numbers of columns dependent of inputs selected. I would prefer additional columns to expand into the empty space on the right hand side and then trigger a horizontal scrollbar if it becomes wider than the browser window width.

Reproducible example of the tables in the images above...

library(shiny)
runApp(list(
  ui = navbarPage(
  title = 'Tables',
  tabPanel('dataTableOutput', dataTableOutput('ex1')),
  tabPanel('tableOutput', tableOutput('ex2'))
),
server = function(input, output) {
  output$ex1 <- renderDataTable(iris)
  output$ex2 <- renderTable(iris)
}
))

Answer 1

I think that you should use drawCallback in dataTables. Here I just changed your example a little to fix width of dataTable to 600px. you can play with possible java script function in callback function to do almost anything.

library(shiny)
runApp(list(
  ui = navbarPage(
    title = 'Tables',
    tabPanel('dataTableOutput', dataTableOutput('ex1')),
    tabPanel('tableOutput', tableOutput('ex2'))
  ),
  server = function(input, output) {
    output$ex1 <- renderDataTable( iris, 
                                   option = list( drawCallback = I("function( settings ) {document.getElementById('ex1').style.width = '600px';}")) )
    output$ex2 <- renderTable(iris)
  }
))