如何移除Shiny DT表格单元格的数字、垂直滚动条并扩展尺寸？

核心修改方向 #

• 调整表格布局宽度，避免单元格空间不足导致的滚动条
• 用自定义CSS移除数字输入框的上下箭头、消除单元格滚动条，优化样式贴近Excel/SPSS
• 优化JS触发逻辑，确保表格渲染完成后自动激活编辑状态

修改后的完整代码 #

library(shiny)
library(shinydashboard)
library(DT)
library(tidyverse)
library(shinyjs)

header <- dashboardHeader(title = "Dashboard", titleWidth = 300)

sidebar <- dashboardSidebar(
  width = 300, 
  sidebarMenu(
    menuItem(
      text = "Menu 1", 
      tabName = "menu1", 
      icon = icon("chart-line")
    )
  )
)

body <- dashboardBody(
  # 自定义样式：移除箭头、消除滚动条、优化单元格视觉
  tags$style(HTML("
    /* 移除数字输入框的上下箭头 */
    input[type='number']::-webkit-inner-spin-button, 
    input[type='number']::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    input[type='number'] {
      -moz-appearance: textfield;
    }
    /* 单元格无滚动条，输入框填充整个单元格 */
    #my_datatable td {
      overflow: hidden;
      padding: 2px 4px;
    }
    #my_datatable td input {
      width: 100%;
      height: 100%;
      border: 1px solid #ccc;
      border-radius: 2px;
      padding: 2px 4px;
      box-sizing: border-box;
      background-color: white;
    }
    /* 表格边框样式贴近Excel */
    #my_datatable table {
      border-collapse: collapse;
    }
    #my_datatable th, #my_datatable td {
      border: 1px solid #ddd;
    }
  ")),
  
  tabItems(
    tabItem(
      tabName = "menu1", 
      titlePanel(
        title = HTML("<text style='background-color:#008cba; color:#f2f2f2;'>Analysis</text>")
      ), 
      fluidPage(
        column(
          id = "menusss1",
          width = 12, 
          column(
            id = "correl", 
            width = 3,  # 调整列宽，给单元格足够显示空间
            DT::DTOutput("my_datatable"),
            actionButton("go", label = "Plot Data")
          ), 
          column(
            id = "correlplot", 
            width = 6, 
            plotOutput("my_plot")
          )
        )
      )
    )
  )
)

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {
  
  v <- reactiveValues(data = { 
    data.frame(x = numeric(0) ,y = numeric(0)) %>% 
      add_row(x = rep(0, 30) ,y = rep(0, 30))
  })
  
  output$my_datatable <- DT::renderDataTable({
    # 表格初始化完成后自动触发所有单元格双击事件
    init_js <- "function(settings) {
      var table = settings.oInstance.api();
      setTimeout(function() {
        table.cells().nodes().to$().dblclick();
      }, 500);
    }"
    
    DT::datatable(
      data = v$data, 
      editable = TRUE, 
      rownames = FALSE, 
      selection = list(mode = 'none'),
      options = list(
        searching = FALSE, 
        paging = FALSE, 
        ordering = FALSE, 
        info = FALSE,
        autoWidth = TRUE,
        initComplete = JS(init_js)  # 用DT原生回调确保时机正确
      ))
  })
  
  observeEvent(input$my_datatable_cell_edit, {
    info = input$my_datatable_cell_edit
    i = as.numeric(info$row)
    j = as.numeric(info$col)
    k = as.numeric(info$value)
    if(k < 0){
      k <- k * -1
    }
    v$data[i,j] <- k
  })
  
  output$my_plot <- renderPlot({
    req(input$go)
    isolate(v$data) %>% 
      ggplot(aes(x,y)) +
      geom_point() +
      geom_smooth(method = "lm")
  })
}

shinyApp(ui = ui, server = server)

关键说明 #

1. 样式优化：通过CSS直接覆盖默认样式，彻底移除数字输入框的上下箭头，让输入框完全填充单元格，消除滚动条，同时调整边框和内边距，贴近Excel的视觉风格。
2. 触发逻辑修复：改用DT的initComplete回调执行双击触发，确保表格渲染完成后再操作，解决了原setTimeout时机不对的问题；通过DT API批量触发所有单元格的双击事件，实现自动激活编辑状态。
3. 布局调整：将表格所在列的宽度从1改为3，从根源避免了因空间不足导致的滚动条问题。

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