如何调整含复选框列的Shiny中DT::datatable行高？

我在Shiny的DT表格中添加了复选框列后，发现原本可以通过DT::formatStyle()调整行高的方法失效了，而无复选框列的表格则能正常生效。以下是复现该问题的最小示例代码：

library(shiny)
library(DT)
runApp(
  list(ui = fluidPage(
    column(width = 6,
           dataTableOutput("cars_table")),
    column(width = 6,
           dataTableOutput("cars_table_check"))),
  server = function(input, output, session) {
    
    shinyInput <- function(FUN, id, num, ...) {
      inputs <- character(num)
      for (i in seq_len(num)) {
        inputs[i] <- as.character(FUN(paste0(id, i), label = NULL, ...))
      }
      inputs
    }
    
    output$cars_table <- renderDataTable({
      formatStyle(datatable(
        mtcars,
        selection = 'none', escape = F),
        0, target = "row", lineHeight = "50%")
    })
    
    output$cars_table_check <- renderDataTable({
      formatStyle(datatable(
        cbind(Pick = shinyInput(checkboxInput, "srows_", nrow(mtcars), value = NULL, width = 1), mtcars),
        options = list(drawCallback= JS('function(settings) {Shiny.bindAll(this.api().table().node());}')),
        selection = 'none', escape = F),
        0, target = "row", lineHeight = "50%")
    })
  })
)

输出效果：

解决方案 #

问题根源在于复选框元素自带默认的margin和padding样式，这些样式会撑开表格行高，仅设置行的lineHeight无法覆盖该影响。我们需要同时调整复选框的样式和表格单元格的内边距，具体修改如下：

library(shiny)
library(DT)
runApp(
  list(ui = fluidPage(
    column(width = 6,
           dataTableOutput("cars_table")),
    column(width = 6,
           dataTableOutput("cars_table_check"))),
  server = function(input, output, session) {
    
    shinyInput <- function(FUN, id, num, ...) {
      inputs <- character(num)
      for (i in seq_len(num)) {
        inputs[i] <- as.character(FUN(paste0(id, i), label = NULL, ...))
      }
      inputs
    }
    
    output$cars_table <- renderDataTable({
      formatStyle(datatable(
        mtcars,
        selection = 'none', escape = F),
        0, target = "row", lineHeight = "50%")
    })
    
    output$cars_table_check <- renderDataTable({
      datatable(
        cbind(Pick = shinyInput(checkboxInput, "srows_", nrow(mtcars), value = NULL, width = 1), mtcars),
        options = list(
          drawCallback= JS('function(settings) {Shiny.bindAll(this.api().table().node());}'),
          # 初始化完成后调整复选框样式
          initComplete = JS("function(settings, json) {
            $(this.api().table().body()).find('input[type=\"checkbox\"]').css({'margin': '0', 'padding': '0'});
          }")
        ),
        selection = 'none', escape = F
      ) %>%
        # 同时设置行高和单元格内边距
        formatStyle(0, target = "row", lineHeight = "50%", padding = "2px 4px")
    })
  })
)

说明 #

1. 通过initComplete回调注入CSS，去除复选框默认的margin和padding，避免其撑开行高；
2. 在formatStyle中添加padding参数，调整表格单元格的内边距，配合lineHeight实现预期的行高效果。

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