jrowen / rhandsontable

A htmlwidgets implementation of Handsontable.js
http://jrowen.github.io/rhandsontable/
Other
386 stars 148 forks source link

0.3.7 crashes when columns are added (iff columnSorting enabled) #303

Open ambevill opened 5 years ago

ambevill commented 5 years ago

I'm working with an app that needs to dynamically add/remove columns from the rhandsontable. Starting in release 0.3.7, the app crashes if I add two or more columns. This only occurs if columnSorting is enabled.

MWE:

library(shiny)
library(rhandsontable)
`%>%` = dplyr::`%>%`

complete_table = data.frame(bool = TRUE,
                            val = 1:1000,
                            big = LETTERS[1:10],
                            small = letters[1:10],
                            dt = seq(from = Sys.Date(), by = "days", length.out = 10),
                            stringsAsFactors = FALSE)

ui = shinyUI(fluidPage(
  actionButton('show_all', 'Show all'),
  rHandsontableOutput("hot", height="850px")))

server = shinyServer(function(input, output, session) {

  # start with just a few columns
  vars = reactiveValues(shown_table = complete_table[1:3])

  # but add columns if requested
  observeEvent(input$show_all, { vars$shown_table = complete_table })

  # render with columnSorting = TRUE
  output$hot <- renderRHandsontable({
    vars$shown_table %>%
      rhandsontable() %>%
      hot_cols(columnSorting = TRUE)
  })

})

runApp(list(ui = ui, server = server))

Clicking "Show all" should show all five columns. Instead the handsontable widget freezes and the following JS error appears in Chrome:

Uncaught TypeError: Cannot read property 'indicator' of undefined
    at t.value (handsontable.full.min.js:34)
    at i.<anonymous> (handsontable.full.min.js:34)
    at e.value (handsontable.full.min.js:29)
    at i.runHooks (handsontable.full.min.js:29)
    at r.appendColHeader (handsontable.full.min.js:34)
    at e.value (handsontable.full.min.js:29)
    at handsontable.full.min.js:34
    at u (handsontable.full.min.js:29)
    at handsontable.full.min.js:34
    at r (handsontable.full.min.js:29)
ambevill commented 5 years ago

Chrome Version 72.0.3626.109 (Official Build) (64-bit) R 3.5.1

ryanpfalz commented 5 years ago

Having the same issue. Turning off columnSorting solved the issue.

mtseman commented 5 years ago

I have the same issue as well. I found this work around that allows for columnSorting = T

I removed the UI and then added it back using shiny's removeUI and insertUI.

library(shiny)
library(rhandsontable)
`%>%` = dplyr::`%>%`

complete_table = data.frame(bool = TRUE,
                            val = 1:1000,
                            big = LETTERS[1:10],
                            small = letters[1:10],
                            dt = seq(from = Sys.Date(), by = "days", length.out = 10),
                            stringsAsFactors = FALSE)

ui = shinyUI(fluidPage(
  fluidRow(column(2,actionButton('show_all', 'Show all')),column(2,offset=1,actionButton('show_less', 'Show less'))),br(),br(),
  tags$div(id="hot_container",
      rHandsontableOutput("hot", height="850px")
  )
))

server = shinyServer(function(input, output, session) {

  # start with just all columns
  vars = reactiveValues(shown_table = complete_table)

  # add columns if requested
  observeEvent(input$show_all, { 

    vars$shown_table = complete_table 

    removeUI(selector = "#hot")

    insertUI(
      selector = "#hot_container",
      where = "afterEnd",
      ui = rHandsontableOutput("hot", height="850px")
    )

  })

  # show less  columns if requested
  observeEvent(input$show_less, { 

    vars$shown_table = complete_table[,1:3] 

    removeUI(selector = "#hot")

    insertUI(
      selector = "#hot_container",
      where = "afterEnd",
      ui = rHandsontableOutput("hot", height="850px")
    )

  })

  # render with columnSorting = TRUE
  output$hot <- renderRHandsontable({

      rhandsontable(vars$shown_table) %>%
      hot_cols(columnSorting = TRUE)

  })

})

runApp(list(ui = ui, server = server))