How do I resize the row height of a DT::datatable in Shiny which includes a column of checkboxes?

Question

Using this answer, I've added a column of checkboxes to a datatable in Shiny. I can adjust the row heights with DT::formatStyle() when the checkbox column isn't present, but it doesn't work on a table that has checkboxes. Here's a minimum example:

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

And the output:

score 1 · Accepted Answer · answered Jul 14 '23 at 21:35

Add a style tag to your UI. Within this tag you can modify the underlying CSS. This is necessary for e.g. removing margins around the checkboxes (otherwise your lineheight does not have an effect).

    ui = fluidPage(
        tags$style(
            HTML(
                "
            td > div.form-group > div.checkbox {
               margin:0px;
               bottom:10px;
            }

            td > div.form-group {
                position:absolute;
            }
            "
            )
        ),
...

How do I resize the row height of a DT::datatable in Shiny which includes a column of checkboxes?

1 Answers1