How to keep DT table borders within tabBox()

Question

I want to control the position of a DT table output within a tabBox():

This example app gives this:

library(shiny)
library(bs4Dash)
library(DT)

shinyApp(
  ui = dashboardPage(
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      tabBox(
        id = "tabset1",
        height = 750,
        tabPanel("Hello", "This is the hello tab",
                 DT::DTOutput("myTable")
                 ))
      )
  ),
  server = function(input, output, session) {
    output$myTable <- DT::renderDT({
      DT::datatable(
        mtcars) 
    })
  }
)

As you can see the DT table is exceeding the borders of tabBox panel. How can we force DT to keep inside tabBox panel (width and height).

Desired output:

juanbarq · Answer 1 · 2023-01-29T16:39:05.783

You can include in your tabBox the width parameter, in shiny max allowed is 12. Then, your ui part is:

ui = dashboardPage(
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      tabBox(
        id = "tabset1",
        height = 750,
        width = 12,
        tabPanel("Hello", "This is the hello tab",
                 DT::DTOutput("myTable")
        ))
    )
  ),

That look like this:

Another option its include an horizontal scroll to your tabBox:

shinyApp(
  ui = dashboardPage(
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      tabBox(
        id = "tabset1",
        height = 750,
        #width = 12,
        tabPanel("Hello", "This is the hello tab",
        div(style = 'overflow-x: scroll', DT::dataTableOutput('myTable'))
        ))
    )
  ),
  server = function(input, output, session) {
    output$myTable <- DT::renderDT({
      DT::datatable(
        mtcars) 
    })
  }
)

That look like this:

This is OK. I am looking for another solution that keeps the tabBox as it is. Anyway many thanks. — TarJae, Jan 29 '23 at 16:31
I edit my answer suggesting you use an horizontal scroll, maybe you prefer this solution @TarJae — juanbarq, Jan 29 '23 at 16:40

score 1 · Accepted Answer · answered Jan 29 '23 at 21:50

1

We can also use scrollX option:

output$myTable <- DT::renderDT({
  DT::datatable(
    mtcars,
    options = list(
      scrollX = TRUE
    )
  )
})

answered Jan 29 '23 at 21:50

jpdugo17

6,816
2
11
23

How to keep DT table borders within tabBox()

2 Answers2