Rendering JavaScript breaks page navigation and reactive function in R Shiny DT (DataTable)

Question

I have a datatable built with R Shiny, and rendering data dynamically using my reactive function, filteredData(). The data I'm bringing in from Azure SQL has a couple columns (indexes 3 and 29) that contain a lot of nvarchar text; this text screws up the visual aesthetic of the table and makes viewing multiple rows a pain. My solution was to limit the viewable text in these columns' cells to 200 characters, and display the rest as a tooltip on hover.

    output$table1 <- renderDT(
        DT::datatable(filteredData(),
                            selection = "single",
                            escape = FALSE,
                            style = "bootstrap4",
                            rownames = FALSE,
                            options = list(
                                dom = 'rtip',
                                scrollX=TRUE,
                                autoWidth = TRUE,
                                searching=FALSE,
                                ordering=TRUE,
                                bFilter = FALSE,
                                pageLength = 5,
                                columnDefs = list(list(
                                    targets = c(3, 28),
                                    width = '600px'
                                    # THIS BREAKS THE TABLE, CANNOT GO TO *NEXT* PAGE
                                    ,render = JS(
                                        "function(data, type, row, meta) {",
                                        "return type === 'display' && data.length > 200 ?",
                                        "'<span title=\"' + data + '\">' + data.substr(0, 200) + '...</span>' : data;",
                                        "}")
                                )))
        ))

This solution works (kind of). The text truncates and shows a tooltip on hover as expected, but subsequently breaks the built-in buttons that allows the user to go to the next or previous page in the data table (right now I'm limiting my datatable to 5 records per page). When I click 'next', a a small, semi-opaque window pops up in the middle of the screen and says, "processing", but is stuck in this loop. It also breaks my reactive filtering of the data. Commenting out the problematic Javascript

                                    #,render = JS(
                                    #    "function(data, type, row, meta) {",
                                    #    "return type === 'display' && data.length > 200 ?",
                                    #    "'<span title=\"' + data + '\">' + data.substr(0, 200) + '...</span>' : data;",
                                    #    "}")

fixes the page navigation but then I have no tooltips or text truncation. I've checked the documentation on DT's website, and don't understand what I'm doing differently, aside from my reactive, SQL-derived data.

EDIT: I'm using these packages, for what it's worth: shinymanager, tidyverse, DT, bs4Dash. I've also called shinyjs::useShinyjs() in my dashboardBody().

It's always best to provide a [reproducible example](https://stackoverflow.com/questions/5963269/how-to-make-a-great-r-reproducible-example). However, did you call `useShinyjs()`? It seems like that gets missed sometimes. — Kat, Oct 20 '21 at 13:31
I'll try to create a reproducible example. But yes, I've called shinyjs::useShinyjs() in my dashboard body — FreyGeospatial, Oct 20 '21 at 13:36
Looking at the code now - wow, not sure why I thought this had anything to do with `shinyjs`. Yikes! When I add my own data frame and stick this into an existing shiny application, it works without an issue. Maybe your packages need to be updated? Check `DT` and `htmlwidgets`. I checked for library conflicts, as well. I didn't find any with the libraries you listed, though. — Kat, Oct 20 '21 at 15:52

score 1 · Accepted Answer · answered Oct 20 '21 at 16:16

I don't know what's going on, but you can try the ellipsis plugin:

library(DT) 

dat <- data.frame(
  A = c("fnufnufroufrcnoonfrncacfnouafc", "fanunfrpn frnpncfrurnucfrnupfenc"),
  B = c("DZDOPCDNAL DKODKPODPOKKPODZKPO", "AZERTYUIOPQSDFGHJKLMWXCVBN")
)

datatable(
  dat, 
  plugins = "ellipsis",
  options = list(
    columnDefs = list(list(
      targets = c(1, 2),
      render = JS("$.fn.dataTable.render.ellipsis( 200, false )")
    ))
  )
)

Rendering JavaScript breaks page navigation and reactive function in R Shiny DT (DataTable)

1 Answers1