R Remove padding from datatable cells - css

Question

I have a datatable in my shiny web app in which I have inserted checkboxes. However, my actual dataset is quite large. Therefore I would like to compress the datatable respectively reduce the padding.
Although I have already found some approaches, this did not work with the checkboxes.
Can anyone help me?
Many thanks in advane!
Here is my reproducible example:
library(shiny)
library(DT)
library(tidyverse)
shinyApp(
ui <- fluidPage(
DT::dataTableOutput('x1')
),
server<-function(input, output, session) {
# create a character vector of shiny inputs
shinyInput<-function(FUN, len, id, ...) {
inputs <- character(len)
for (i in seq_len(len)) {
inputs[i] <- as.character(FUN(paste0(id, i), label=NULL, ...))
}
inputs
}
# a sample data frame
values <- reactiveValues(res=data.frame(
iris %>% slice(10),
v2=shinyInput(checkboxInput, 10, 'v2_', value=FALSE)
)
)
# render the table containing shiny inputs
output$x1 <- DT::renderDataTable(
datatable(values$res, escape = F),
server=FALSE,
escape=FALSE
)
}
)

Answer 1

You need a little CSS. Strictly speaking of the padding, that's straight forward. This rule targets table data cells elements (<td>) contained within the table with the id "x1"
ui <- fluidPage(
DT::dataTableOutput('x1'),
tags$style(HTML("
#x1 td {
padding-top: 0;
padding-bottom: 0;
}
"))
)
This compacts it some. If you want to compact it more, you'll need to find what's driving the row height then target that. For example, the checkboxes have a bottom margin. You could remove that as well. If you're not aware, you can see the applied css by using using your browser's devtools. For Chrome, right click on a row and select "Inspect"