Render DT datatable smoothly in R Shiny

Question

When a DT datatable initilaly renders in a shiny app it appears to grow from the top and push all other elements down the page. Is there a way to render the datatable more smoothly so that other elements are not pushed out of the way like this?

You can see in the example code the h1 renders first at the top of the screen and is then pushed down when the datatable renders. I have tried creating a div with minimum height for the table but it didn't work.

library(shiny)
library(DT)

ui <- fluidPage(

DT::dataTableOutput('table'),

h1('placeholder text'))

server <- function(input, output, session) {

    my_data <-
        data.frame(
            a = rnorm(5000),
            b = rnorm(5000),
            c = rnorm(5000),
            d = rnorm(5000)
        )

    output$table <- DT::renderDataTable({

        datatable(my_data, options = list(pageLength = 25))

    })

}

shinyApp(ui, server)

There is some nice functionality in the DT package to reload data smoothly when the data changes after the initial render (using replaceData()). However, I cannot seem to render the data smoothly initially.

Answer 1

So, you can define a height in pixels, but that may not match the pageLength argument you made on the server. I think if you want to control the height in the rendering of the page, the best way to do that is to define height in pixels, not page length. This way the height gets enforced when the page is being loaded AND when the table gets rendered:

library(shiny)
library(DT)

ui <- fluidPage(

  DT::dataTableOutput('table', height = "500px"),

  h1('placeholder text'))

server <- function(input, output, session) {

  my_data <-
    data.frame(
      a = rnorm(5000),
      b = rnorm(5000),
      c = rnorm(5000),
      d = rnorm(5000)
    )

  output$table <- DT::renderDataTable({

    datatable(my_data)

  })

}

shinyApp(ui, server)