Datatable column auto resizing

Question

I have a shiny app with two datatables side by side. Are there any options to automatically resize the table or column when the width of the window is changed?

Ideally I'd like to see all columns (maybe reduced font size) with no X scroll bar in both tables, and the tables side by side. The code below makes the tables overlap as the window size reduces.

library(shiny)
library(DT)

shinyApp(
    ui = fluidPage(
      fluidRow(
        column(5,
               dataTableOutput('table.1')
        ),
        column(2
        ),
        column(5,
               dataTableOutput('table.2')
        )
      )
    ),
    server = function(input, output) {
      output$table.1 <- renderDataTable(iris,options = list(autoWidth = TRUE))

      output$table.2 <-  renderDataTable(iris,options = list(autoWidth = TRUE))
    }
  )

You could use the `responsive` extension to [DT](https://rstudio.github.io/DT/extensions.html), this won't resize the font, but it will resize columns and collapse to fit width. — Kevin Arseneau, Apr 24 '18 at 00:26
@KevinArseneau thanks, but that collapses columns, I was hoping to show all columns but reduce font size as the width reduces — Zeus, Apr 24 '18 at 00:38
DT doesn't do what you are looking for on it's own, you can look at [this](https://stackoverflow.com/a/44479132) answer for some hints at using CSS to change font size. — Kevin Arseneau, Apr 24 '18 at 00:53
thanks I didn't see that question. The method works, but the font size doesn't change dynamically, so although it works its not exactly what I'd like. Does ``renderTable`` have a method that works? — Zeus, Apr 24 '18 at 01:02

score 2 · Accepted Answer · answered Apr 24 '18 at 04:56

2

As mentioned in the comments CSS can handle this for you using viewport based text sizes. I took the liberty of also including the syntax for specifying a maximum text size in case users have exceptionally wide screens:

library("shiny")
library("DT")

shinyApp(
  fluidPage(
    tags$head(
      tags$style(
        HTML("
          .datatables {
              font-size: 1.5vw;
          }

          @media screen and (min-width: 1024px) {
              .datatables {
                  font-size: 12px;
              }
          }
        ")
      )
    ),
    dataTableOutput("iris")),
  function(input, output) {
    output$iris = renderDataTable({
      datatable(iris)
    })
  }
)

This answer has more on viewport percentage lengths and this answer provides the example for the max size.

answered Apr 24 '18 at 04:56

mlegge

6,763
3
40
67

1

thanks that works! It stops working when the window is very narrow, but that should be expected. Do you know how to reduce the white space between columns? ``autoWidth=TRUE`` didn't work – Zeus Apr 24 '18 at 05:18
1

by "reduce whitespace" do you mean shrink the table so its not so spread out when the viewport isn't tiny? – mlegge Apr 24 '18 at 05:32
1

Yes that's right. Its more obvious when the table is a reasonable size to see the space between columns – Zeus Apr 24 '18 at 07:45

Datatable column auto resizing

1 Answers1