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', aa 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() .

Answer 1

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 )")
    ))
  )
)