CODEWITHSUNDEEP
rshinydt
Hugh
Hugh

Reputation: 16090

Column headers are not correctly aligned

Consider a Basic DataTable, code of which is below (rendering and identical code at this link: https://shiny.rstudio.com/gallery/basic-datatable.html )

The column headers are not quite aligned with the table values; the headers are to the right of the values by about one character.

enter image description here

Is there a setting to eliminate this gap in the headers? Referring to the documentation, I note that renderDataTable has an options argument, which may be one of the options in https://datatables.net/reference/option/ . Searching through this list for 'column', the best match was columns.contentPadding, but changing this from 'mmm' to '' didn't seem to have any effect (though perhaps I'm implementing it wrongly):

options = list(columns.contentPadding = "",  # or contentPadding = ""
                autoWidth = FALSE))

server.R

# Load the ggplot2 package which provides
# the 'mpg' dataset.
library(ggplot2)

function(input, output) {

  # Filter data based on selections
  output$table <- DT::renderDataTable(DT::datatable({
    data <- mpg
    if (input$man != "All") {
      data <- data[data$manufacturer == input$man,]
    }
    if (input$cyl != "All") {
      data <- data[data$cyl == input$cyl,]
    }
    if (input$trans != "All") {
      data <- data[data$trans == input$trans,]
    }
    data
  }))

}

ui.R

# Load the ggplot2 package which provides
# the 'mpg' dataset.
library(ggplot2)

fluidPage(
  titlePanel("Basic DataTable"),

  # Create a new Row in the UI for selectInputs
  fluidRow(
    column(4,
        selectInput("man",
                    "Manufacturer:",
                    c("All",
                      unique(as.character(mpg$manufacturer))))
    ),
    column(4,
        selectInput("trans",
                    "Transmission:",
                    c("All",
                      unique(as.character(mpg$trans))))
    ),
    column(4,
        selectInput("cyl",
                    "Cylinders:",
                    c("All",
                      unique(as.character(mpg$cyl))))
    )
  ),
  # Create a new row for the table.
  fluidRow(
    DT::dataTableOutput("table")
  )
)

Upvotes: 0

Views: 2536

Answers (1)

K. Rohde
K. Rohde

Reputation: 9676

This is a simple styling issue.

Using the regular datatables style sheet, table headers have padding 10px 18px while body cells have 8px 10px.

Those options are not available through the datatables api.

Your only option is to overwrite the style of one of the cell types. Here is an addition that redefines the padding in the headers to match the body. (To be added anywhere inside the ui definition.)

tags$head(tags$style("
  table.dataTable thead th {
    padding: 8px 10px !important;
  }
"))

Upvotes: 1

Related Questions