Table Only Displaying Half the Rows

[phillc73]

Recently upgraded to DT v0.2 and the rendering of my tables is now incorrect.

Previously, the entire space would be filled with table data, and scrolling would yield many more rows before further data loading was required.

Scrolling down doesn't yield any more rendered rows, but then scrolling back up does start displaying new rows.

Server code producing this table is:

    DT::datatable(keyData(),
                  rownames = FALSE,
                  escape = FALSE,
                  class = 'compact cell-border stripe hover',
                  extensions = c('Scroller'),
                  options = list(dom = 'T<"clear">frtiS',
                                 deferRender = TRUE,
                                 scrollY = 500,
                                 scrollCollapse = TRUE
                                 )
                  )

Also with a number of formatStyle() tags for the cell colours.

UI code is:

div(style = 'overflow-x: scroll', DT::dataTableOutput("keyData")

This code is over a year old now, so I'm sure there's some change I haven't kept up with.

[yihui]

Sorry about that. Could you help me try two things?

1. See if the development version has fixed it: devtools::install_github('rstudio/DT');
2. If not, could you make a minimal, self-contained, and reproducible example with the iris data?

[phillc73]

Thanks for the quick response @yihui

1. Unfortunately the development version didn't rectify the issue.
2. Here's the iris example, which still exhibits the same issue:

library(shiny)
library(DT)

server <- function(input, output) {

  output$irisData <- DT::renderDataTable({

    DT::datatable(iris,
                  rownames = FALSE,
                  escape = FALSE,
                  class = 'compact cell-border stripe hover',
                  extensions = c('Scroller'),
                  options = list(dom = 'T<"clear">frtiS',
                                 deferRender = TRUE,
                                 scrollY = 500,
                                 scrollCollapse = TRUE
                  )
    )  %>%
      formatStyle(
        'Petal.Length',
        backgroundColor = styleInterval(c(1.5, 3.5, 5), c('#9BF59B', '#FFEB99', '#F3B73D', 'transparent'))
      )
  })
}

ui <- fluidPage(
  div(style = 'overflow-x: scroll', DT::dataTableOutput("irisData"))
)

shinyApp(ui = ui, server = server)

Setting scrollCollapse = FALSE seems to fix the issue

[yihui]

Thanks a lot for creating the reproducible example! The Scroller extension and scrolling options have always been my headache... I see scrollCollapse = FALSE by default in DataTables: https://datatables.net/reference/option/scrollCollapse so maybe you should just go with FALSE here.

[phillc73]

While scrollCollapse = FALSE does ensure the table displays correctly, it also slows down rendering. One of my tables is regularly between 350 - 450 rows (changes daily) and 400 columns wide. Using scrollCollapse = TRUE means the initial render is faster.

It's not urgent that this issue is resolved and I can live with scrollCollapse = FALSE in the short/medium term. However, it'd be good to see it rectified sometime in the future and also interesting to know how the regression recurred. It's not a priority though.

[phillc73]

Unfortunately, I've had to revert to DT 0.1

With scrollCollapse = FALSE rendering a large table becomes excruciatingly slow. When the setting is scrollCollapse = TRUE there is an appreciable speed up in initial rendering and much less load on the CPU. The RStudio "browser window" pretty much freezes with FALSE. Clicking and holding the scroll arrows sort of works. But clicking and dragging the scroll bars, or using the mouse scroll wheel, has no result much of the time.

I also think the "Processing...." message is a nicer user experience than just the angled purple lines.

Happy to provide an example data set and code if it would help.

[yihui]

Sorry to hear that, but I don't have time to investigate this issue at the moment. I'll take a closer look the next time I work on DT. Thanks!

[shrektan]

@phillc73 Although the issue has been opened for more than 1 year, I would like to provide a workaround to help.

It's simply adding a callback callback = JS("setTimeout(function() { table.draw(true); }, 500);").

Because it looks like the issue is caused when the table is drawing (my guess is the table gets the div height value before the scroller extension sets it), re-draw it after 0.5 seconds will be fine. (You can set a longer timeout if 0.5s is not enough for you).

The working example

library(shiny)
library(DT)

server <- function(input, output) {
  
  output$irisData <- DT::renderDataTable({
    DT::datatable(
      iris,
      rownames = FALSE,
      escape = FALSE,
      class = 'compact cell-border stripe hover',
      extensions = c('Scroller'),
      options = list(dom = 'T<"clear">frtiS',
                     deferRender = TRUE,
                     scrollY = "500px",
                     scrollCollapse = TRUE
      ), 
      ######## just add this callback ##############################
      callback = JS("setTimeout(function() { table.draw(true); }, 500);")
      #######################################################
    )  %>%
      formatStyle(
        'Petal.Length',
        backgroundColor = styleInterval(c(1.5, 3.5, 5), c('#9BF59B', '#FFEB99', '#F3B73D', 'transparent'))
      )
  })
}

ui <- fluidPage(
  div(style = 'overflow-x: scroll', DT::dataTableOutput("irisData"))
)
shinyApp(ui = ui, server = server, options = list(port = 5294))

[sirzento]

Still no fix for this? I get the same error even on the "Client-side data source (50,000 rows)" example after row 53..
@shrektan
How do I do this with a layout like this?:

 $("#Table").DataTable({
    data: Content,
    deferRender: true,
    searching: true,
    scrollCollapse: true,
    scroller: true,
});

[shrektan]

@sirzento The workaround I provided above doesn't fix the problem??? I don't understand your problem, if there's anything wrong, please provide a minimal reproducible example, thanks.

[sirzento]

I have the excact same issue like phillc73 here and I wanted to try your Workaround but I dont know how do it with the layout that I have.

And I get the same issue on this site after 53 rows too Client-side data source (50,000 rows)

[shrektan]

@sirzento I think you probably confused DT with the javascript library datatables. DT is an R package that makes the using of datatables easier for R users.

It should be a bug of Datatables itself because I can see the blank after 53 row in https://datatables.net/extensions/scroller/examples/initialisation/large_js_source.html , too

Anyway, regarding to your question, you may try passing the above callback function setTimeout(function() { table.draw(true); }, 500); (I bet you need to tweak a little bit, maybe change the table to setting?) to the datatables' callback option initComplete .

[tsolloway]

@shrektan Thank you! Very helpful!

[shrektan]

I can't reproduce the issue in the dev version anymore. It may have been addressed in the upstream. So I'll close this issue.

[D3SL]

I'm having this issue with DT 0.3. It seems the issue recurs when combining fillContainer=TRUE with Scroller. fillContainer is necessary to make column names scroll properly with their columns, without it the column headers stay static while only the contents themselves scroll.