R datatable row padding size modification

Question

I have a small R shiny app https://kormir.shinyapps.io/dt_test/

library(shiny)
library(DT)

ui <- fluidPage(
            column(4,
                   br(),
                   br(),
                   dataTableOutput('dt1')
                   )
)

server <- function(input, output) {
    output$dt1 <- renderDataTable({
        datatable(mtcars[1:4,1:4])
    })
}

shinyApp(ui = ui, server = server)

In uses the datatable package to create dynamic tables. I would like to reduce the internal paddings but by css skills aren't good enough to do so.

I need to remove that yellow area or make it very very small. For instance I figured out the class of the rows and tried to force the size of these paddings to 0.

 .odd {
    background-color: red!important;
    border-collapse: collapse!important;
    padding: 0!important;
    border : 0px !important;
} 

It does not work...

Answer 1

Edit

My initial solution did not account for the interactive changes to the table while in session. The following js injection upon DataTables initialization function(){$('tbody td').css({'padding': '0px'});} applies the padding change to the initial state of the table but any changes such as sorting and pagination would cause the table to revert back to its initial display setting.

How about injecting some javascript upon DataTables initialization with the initComplete argument in Options?

For this, you must have the package htmlwidgets installed so you can use the JS() function. JS() treats strings as javascript code.

DT::datatable() has an options argument that corresponds to the Options in DataTables. options takes a list of named arguments in DataTables Options.

In options, supply a named list with the initComplete argument. In there, inject some js with htmlwidgets::JS() and the js callback will be executed upon your DataTables initialization.

DataTables has some default styling options, including one called compact. Here is what enabling the compact styling option does (quote from here):

Reduce the amount of white-space the default styling for the DataTable uses, increasing the information density on screen

OK, so next step is to add the class compact to your DataTables object in the DOM like so:

The js portion that matters is:

function(){$(this).addClass('compact');}

$(...) is jQuery's syntax to access elements in the DOM. What goes inside $(...) is the selector of the DOM element you want to select. Fortunately, because you are injecting this js code in the DataTables event, you can use the this selector to refer to the table. The next method is addClass(). It does what it says: it adds a class to the selected object in the DOM. You want to add the class compact to your table and then DataTables will take care of the rest.

Ok, here is the code:

library(shiny)
library(DT)

ui <- fluidPage(
  column(4,
         br(),
         br(),
         dataTableOutput('dt1')
  )
)

server <- function(input, output) {
  output$dt1 <- renderDataTable({
    datatable(mtcars, 
              options = list(
                initComplete = JS(
                  "function(){$(this).addClass('compact');}")
              )
    )
  })
}

shinyApp(ui = ui, server = server, options = list(launch.browser=TRUE))

Result:

After changing pagination and sorted by cyl:

compact styling still applies.