Reduce or adjust height of datatable output in box of Shiny Dashboard

Question

I want to reduce the height of a dataframe output in a box of shiny, becouse I'll have more than 6 dataframes in a single panel, so I want that all of them could be in each box. I made a simplied code to show my problem:

library(shiny)
library(shinydashboard)


a<- c("A", "B", "C", "D", "E", "F", "G", "H","I",
      "J","K")
b<- c(1,2,3,4,5,6,7,8,9,10,11)
df<-as.data.frame(cbind(a,b))
names(df)<-c("Letters", "Numbers")


ui<-dashboardPage(title= "Dashboard", skin= "green",
                  dashboardHeader(title="PROYECTO"),
                  dashboardSidebar(
                    sidebarMenu(id="sidebarID",
                                menuItem("OVERVIEW",tabName = "datos"
                                )                                
                    )                   
                    
                  ),
                  dashboardBody(
                    
                    tabItems(tabItem(tabName = "datos", 
                                     fluidRow(
                                       box(width=6, column( width=6,
                                                            
                                                      dataTableOutput("d", height = "50%")
                                       ),
                                       height = 200))                                                    
                                     
                    )
                    )))

server <- function(input, output,session) { 
  
  output$d <-DT::renderDataTable(df
    
  )
}
shinyApp(ui, server)

The problem is that the height of datatable is more than box height:

I want to adjust the height of datatable so It can be inside the box. I tryied with "height = "50%"" or less, but it's not working.

Answer 1

You could use CSS to set overflow: scroll on the .box (maybe create a custom box, if you don't want that applied to all boxes).

And we can also set pageLength in the datatable options to a smaller number, in the example below 3.

library(shiny)
library(shinydashboard)
library(DT)

a<- c("A", "B", "C", "D", "E", "F", "G", "H","I",
      "J","K")
b<- c(1,2,3,4,5,6,7,8,9,10,11)
df<-as.data.frame(cbind(a,b))
names(df)<-c("Letters", "Numbers")


shinyApp(ui =
  dashboardPage(title= "Dashboard",
                skin= "green",
                
    dashboardHeader(title="PROYECTO"),
    
    dashboardSidebar(
      sidebarMenu(id="sidebarID",
        menuItem("OVERVIEW",
                 tabName = "datos"
                 )
        )
      ),
    
    dashboardBody(
      
      tags$head(
        tags$style(HTML("
      .box {
        overflow: scroll;
      }"))
      ),
      
      tabItems(
        tabItem(tabName = "datos",
                       
          fluidRow(
            
            box(width=6,
            dataTableOutput("d"),
            height = 200)
            )
          )
        )
      )
    ),

 server = function(input, output,session) { 
  
  output$d <-DT::renderDataTable(df,
        options = list(
          "pageLength" = 3
          ))
})