Reduce font size in renderDataTable in a shiny presentation

Question

I'm using a shiny presentation in order to display two tables. Here's my code:

tabsetPanel(
  tabPanel('iris',
           renderDataTable(iris,options = 
list(lengthMenu = c(5, 10), pageLength = 5, scrollX = TRUE), escape = 
FALSE)), 
  tabPanel('mtcars',
           renderDataTable(mtcars, options = list(lengthMenu 
= c(5, 10), pageLength = 5, scrollX = TRUE), escape = FALSE))
)

I would like to shrink the size of the tables. I tried adding div in the following way:

div(renderDataTable(mtcars, options = list(lengthMenu 
= c(5, 10), pageLength = 5, scrollX = TRUE), escape = FALSE), style = "font-
size:50% ")

But this is not working.

I also tried doing this:

mainPanel( 
  tabsetPanel(id='BLMS', 
              tabPanel("iris", fluidRow(div(dataTableOutput(outputId="iris"),  
style = "font-size:50%"))), 
              tabPanel("mtcars", 
fluidRow(div(dataTableOutput(outputId="mtcars"),  style = "font-size:50%")))
              )
  )  

output$iris<- renderDataTable({iris}, options = list(lengthMenu = c(5, 10), 
pageLength = 5, scrollX = TRUE))

output$mtcars<- renderDataTable({mtcars},options = list(lengthMenu = c(5, 
10), pageLength = 5, scrollX = TRUE))

But It's displaying a table cut in half in the presentation.

`font-size` will only reduce font size. Have you tried [`width` as well](https://stackoverflow.com/a/31948061/322912)? — Roman Luštrik, Jun 09 '17 at 10:51

score 7 · Answer 1 · answered Jun 10 '17 at 23:47

If you want to reduce the size of the table, put it in a column with width < 12. If you furthermore want to decrease the font size, shinyjs::inlineCSS comes in handy:

library(DT)
library(shinyjs)
shinyApp(shinyUI(
  fluidPage(column(width=6, dataTableOutput("iris")),
        useShinyjs(),
        inlineCSS(list("table" = "font-size: 8px")))
  ),

  shinyServer(function(input, output) {
    output$iris = renderDataTable({
        datatable(iris,options =
                    list(lengthMenu = c(5, 10), pageLength = 5, scrollX = TRUE), escape =
                    FALSE)
    })
  })
)

edit: as it was pointed out, adding a style command to your div that contains the table works even better: fluidPage(style = "font-size: 75%; width: 75%", dataTableOutput("iris")))

Reduce font size in renderDataTable in a shiny presentation

1 Answers1

Linked