Search code examples
rshinydatatablesdtcolumn-width

formatting data table in RShiny

For my data table I have the following ui.R file:

tabItem(tabName = "maForwardVsSpot", fluidRow(DT::dataTableOutput(outputId = "maForwardVsSpotTABLE"))

My server.R looks like this:

output$maForwardVsSpotTABLE <- DT::renderDataTable({

      DT::datatable(dt.FvsS, rownames = FALSE, escape = FALSE, class = 'cell-border stripe',
                    colnames = c("Date", "Spot", input$maStrategy, "Mean Difference"),
                    options = list(pageLength = 10, autoWidth = TRUE, scrollX = TRUE,
                                   columnDefs = list(list(className = 'dt-center', targets = c(0,1,2,3), width = '200px')),
                                   initComplete = JS("function(settings, json) {",
                                                     "$(this.api().table().header()).css({'background-color': '#007d3c', 'color': '#fff'});",
                                                     "}")
                    )
      )
  
})

This results in the following data table, whereby the parts circled in red do not fit me, because they should start flush with the data table and not be far away from it to the left and right.

enter image description here

Solution

  • This seems to work:

    tabItem(
  tabName = "maForwardVsSpot", 
  tags$div(
    style = "width: fit-content;",
    DT::dataTableOutput(outputId = "maForwardVsSpotTABLE")
  )
)