小型rhandsontable中Dropdown下拉列表无法显示的问题解决

这个问题源于rhandsontable默认下拉菜单会受表格容器边界限制，而日期选择器因挂载在页面body上不受容器约束。我们可以通过自定义JavaScript修改下拉编辑器配置，让下拉菜单同样挂载到body上，实现和日期选择器一致的显示效果。

修改后的完整代码如下：

if(interactive()) {
  library(shiny)
  library(rhandsontable)
  library(dplyr)
  
  ui <- fluidPage(
    br(),
    br(),
    # 自定义JS修改下拉框挂载容器
    tags$script(HTML("
      Handsontable.editors.DropdownEditor = Handsontable.editors.DropdownEditor.extend({
        createElements: function() {
          this.parentCreateElements();
          // 将下拉菜单容器改为页面body，脱离表格限制
          this.dropdownMenuContainer = document.body;
        }
      });
    ")),
    fluidRow(column(12, rHandsontableOutput("mytable")))
  )
  
  server <- function(input, output, session) {
    output$mytable <- renderRHandsontable({
      data <-
        mtcars %>%
        mutate(datecol = Sys.Date()) %>%
        head(2)
      
      rhandsontable(data, stretch = "all") %>%
        hot_col(2, type = "dropdown", source = c(4, 6, 8)) %>%
        hot_col(12, type = "date")
    })
  }
  
  shinyApp(ui = ui, server = server)
}

关键修改说明： #

• 通过JS继承并重写DropdownEditor类，把下拉菜单的挂载容器从表格内部改为document.body，避免被表格边界截断
• 修正了原代码中的拼写错误strecH为stretch

修改后无论表格行数多少，最后一行的下拉框都能像日期选择器一样正常向下展开。

内容的提问来源于stack exchange，提问作者Vishal Sharma