列标题未正确对齐 [英] Column headers are not correctly aligned

问题描述

考虑一个基本数据表，其代码如下(此链接上的呈现和相同代码:

是否有设置可以消除标题中的空白?关于文档，我注意到 renderDataTable 具有一个 options 参数，它可能是

ui.R

 #加载ggplot2软件包，该软件包提供#'mpg'数据集.库(ggplot2)fluidPage(titlePanel("Basic DataTable")，#在UI中为selectInputs创建一个新行fluidRow(栏(4，selectInput("man"，制造商:"，称呼"，唯一的(as.character(mpg $ manufacturer)))))，栏(4，selectInput("trans"，传播:"，称呼"，unique(as.character(mpg $ trans)))))，栏(4，selectInput("cyl"，汽缸:"，称呼"，唯一的(as.character(mpg $ cyl)))))，#为该表创建一个新行.fluidRow(DT :: dataTableOutput("table"))) 

解决方案

这是一个简单的样式问题.

使用常规数据表样式表，表标题的填充为 10px 18px ，而主体单元格的填充为 8px 10px .

这些选项在datatables api中不可用.

您唯一的选择是覆盖一种单元格类型的样式.这是一个重新定义标题中的填充以匹配正文的附加功能.(要添加到ui定义内的任何位置.)

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

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.

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

解决方案

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

这篇关于列标题未正确对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！