xaringan HTML5 演示文稿中的 R Autofit DT 表格宽度和高度

Question

我有一个 dataframe ( df ) 我试图输出为 DT rmd 中的表格xaringan 演示文稿。

代码运行良好，只是表格不适合 Chrome 浏览器页面。

我该如何解决这个问题？

我尝试了多种方法:

方法一:

datatable(df,
         style = "font-size: 75%; width: 75%")  %>%
formatStyle(names(df),
                              background = 'lightblue', angle = -90,
                            backgroundSize = '98% 88%',
                            backgroundRepeat = 'no-repeat',
                            backgroundPosition = 'center')

错误:

Error in match.arg(style, DTStyles()) : 
  'arg' should be one of “default”, “bootstrap”, “bootstrap4”, “bootstrap5”, “bulma”, “dataTables”, “foundation”, “jqueryui”, “semanticui”

方法二

datatable(df,
         options = list( autowidth = TRUE,
  columnDefs = list(list(width = '200px', targets = c(1, 3))))  %>%
  formatStyle(names(df),
                              background = 'lightblue', angle = -90,
                             backgroundSize = '98% 88%',
                             backgroundRepeat = 'no-repeat',
                           backgroundPosition = 'center'))

错误:

Error in formatColumns(table, columns, tplStyle, valueColumns, match.arg(target),  : 
  Invalid table argument; a table object created from datatable() was expected

方法三

添加<div style = "width:80%; height:auto; margin: auto;">在 block 之上什么都不做。

方法四:什么都不做

    ---
    title: "Ed Edd n Eddy"
    subtitle: ""
    author: "Ed"
    institute: "Gravy"
    date: "`r format(Sys.Date(),'%e de %B, %Y')`"
    output:
      xaringan::moon_reader:
        css: xaringan-themer.css
        lib_dir: libs
        nature:
          highlightStyle: github
          highlightLines: true
          countIncrementalSlides: false
    editor_options: 
      chunk_output_type: console
    ---
    
    <style type="text/css">
    .main-container {
      max-width: 100% !important;
      margin: auto;
    }
    </style>

```{r}
...
```

方法 5:添加参数 out.width和 out.height block 选项对 DT 没有任何影响表。

{r Data Table, out.width= "400px", out.height="600px" ,echo=FALSE, message=FALSE, warning=FALSE}

方法 6:即使这样也不会调整表格尺寸，所以现在我认为这个问题可能与 xaringan 有关.

datatable(df,
          extensions = 'FixedColumns',
  options = list(
    dom = 't',
    scrollX = TRUE,
    fixedColumns = TRUE
  ))

示例数据

structure(list(City = c("HOLLYWOOD", "PLANTATION", "Davie", "HOLLYWOOD", 
"PLANTATION"), Zipcode = c("33024", "33317", "33314", "33024", 
"33317"), Date = structure(c(18996, 18633, 19011, 19012, 19016
), class = "Date"), Year = c(2022, 2021, 2022, 2022, 2022), Month = c(1, 
1, 1, 1, 1), Day = c(4, 6, 19, 20, 24), SR = c("SR-22-001", "SR-22-002", 
"SR-22-003", "SR-22-004", "SR-22-006"), Permit = c("06-SE-2433290", 
"06-SE-2444371", "06-SM-2448351", "06-SM-2448625", NA), `Owner/Agent` = c("Pardo, G A & Elaine Nu-Black Septic Co", 
"Alshine Mondesir A Tip Top Septic", "Charlotte Ingmire Mr. C's Pumbling & Septic Inc.", 
"SRP Sub LLC Statewide Septic Cont Inc", "John Nelson Mr. C's Pumbling & Septic Inc."
), Address = c("1111 Harding St Hollywood, FL 33024", "5555 W Broward Blvd Plantation, 33317", 
"1111 SW 74 Ave Davie, 33314", "2222 Thomas Street Hollywood, FL 33024", 
"333 Bryan Blvd Plantation, 33317")), sfc_columns = c("x", "y"
), class = "data.frame", row.names = c(NA, -5L))

更新 1:

我试过下面的答案，但还是不行。请参阅下图以获取更多引用。

更新 2:相关代码

---
title: "Ed Edd n Eddy"
subtitle: ""
author: "Ed"
institute: "Gravy"
date: "`r format(Sys.Date(),'%e de %B, %Y')`"
output:
  xaringan::moon_reader:
    css: xaringan-themer.css
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
editor_options: 
  chunk_output_type: console
---

<style>
div.remark-slide-content {
  padding: 1em; /*default is 1em 4em*/
  font-size: .7em;
  vertical-align: middle; /*if you don't want it in the middle, delete this*/
}
</style

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
library(knitr)
library(tidyverse)
library(sf)
library(plotly)
library(leaflet)
library(leaflet.extras)
library(DT)
library(simplevis)
library(sfheaders)
library(xaringanthemer)

```

```{r xaringan-themer, include=FALSE, warning=FALSE}

style_mono_accent(
  base_color = "#3399FF",
  header_font_google = google_font("Josefin Sans"),
  text_font_google   = google_font("Montserrat", "300", "300i"),
  code_font_google   = google_font("Fira Mono"),
 # background_image = "/BCLogo540.jpg"
  #background_position
   
)
# ?style_mono_accent
```
---

# Data Table

```{r Data Table, out.width= "400px", out.height="600px" ,echo=FALSE, message=FALSE, warning=FALSE}


# First import the shapefile

sf= st_read("path/sf.shp", quiet = TRUE)

# Convert to df (This is the sample data you have in the question)
df= sf_to_df(sf, fill = TRUE)

# Table
datatable(df,
          extensions = 'FixedColumns',
  options = list(
    dom = 't'))  %>%
  formatStyle(names(df),
                              background = 'lightblue', angle = -90,
                              backgroundSize = '98% 88%',
                              backgroundRepeat = 'no-repeat',
                              backgroundPosition = 'center')

```

Answer 1

根据您的更新进行更新

您缺少样式的结束 >。但是，它仍然使用它，我觉得这很有趣。好吧，使用它，然后忽略除了填充之外的所有内容。

标题导致底层结构发生变化。这将适用于样式。

<style>
div.remark-slide-content {
  padding: 1em; /*default is 1em 4em*/
}
.dataTables_wrapper {
  font-size: .5em;
}
</style>

我注意到了一些其他的事情。我真的很惊讶你没有收到“数据表” block 名称的错误。 block 名称不应该有空格。仅仅因为它现在没有引起问题并不意味着它不会在路上。您还有 out block 选项。他们被忽略了；你可以删除它们。

在 block xaringan-themer 之后和 # Data Table 之前还有“---”。这给你一张空白幻灯片。 (你可能是故意这样做的，并且想要它在那里；我只是想我会提到它。)

总计:

---
title: "Ed Edd n Eddy"
subtitle: ""
author: "Ed"
institute: "Gravy"
date: "`r format(Sys.Date(),'%e de %B, %Y')`"
output:
  xaringan::moon_reader:
    css: xaringan-themer.css
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
editor_options: 
  chunk_output_type: console
---

<style>
div.remark-slide-content {
  padding: 1em; /*default is 1em 4em*/
}
.dataTables_wrapper {
  font-size: .5em;
}
</style>

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
library(knitr)
library(tidyverse)
library(sf)
library(plotly)
library(leaflet)
library(leaflet.extras)
library(DT)
library(simplevis)
library(sfheaders)
library(xaringanthemer)

```

```{r xaringan-themer, include=FALSE, warning=FALSE}

style_mono_accent(
  base_color = "#3399FF",
  header_font_google = google_font("Josefin Sans"),
  text_font_google   = google_font("Montserrat", "300", "300i"),
  code_font_google   = google_font("Fira Mono"),
 # background_image = "/BCLogo540.jpg"
  #background_position
)
# ?style_mono_accent
```


# Data Table

<!--- I removed whitespace from this chunk name! --->
<!--- I also removed  out.width= "400px", out.height="600px" from chunk options these out settings were ignored--->

```{r DataTable,echo=FALSE, message=FALSE, warning=FALSE}

# First import the shapefile
#sf= st_read("path/sf.shp", quiet = TRUE)
# Convert to df (This is the sample data you have in the question)
df <- structure(list(
  City = c("HOLLYWOOD", "PLANTATION", "Davie", "HOLLYWOOD", "PLANTATION"), 
  Zipcode = c("33024", "33317", "33314", "33024", "33317"), 
  Date = structure(c(18996, 18633, 19011, 19012, 19016), 
                   class = "Date"), 
  Year = c(2022, 2021, 2022, 2022, 2022), 
  Month = c(1, 1, 1, 1, 1), Day = c(4, 6, 19, 20, 24), 
  SR = c("SR-22-001", "SR-22-002", "SR-22-003", "SR-22-004", "SR-22-006"), 
  Permit = c("06-SE-2433290", "06-SE-2444371", "06-SM-2448351", "06-SM-2448625", NA),
  `Owner/Agent` = c("Pardo, G A & Elaine Nu-Black Septic Co", 
                    "Alshine Mondesir A Tip Top Septic", 
                    "Charlotte Ingmire Mr. C's Pumbling & Septic Inc.", 
                    "SRP Sub LLC Statewide Septic Cont Inc", 
                    "John Nelson Mr. C's Pumbling & Septic Inc."), 
  Address = c("1111 Harding St Hollywood, FL 33024", 
              "5555 W Broward Blvd Plantation, 33317", 
              "1111 SW 74 Ave Davie, 33314", 
              "2222 Thomas Street Hollywood, FL 33024", 
              "333 Bryan Blvd Plantation, 33317")), 
  sfc_columns = c("x", "y"), class = "data.frame", row.names = c(NA, -5L))

# Table
datatable(df,
          extensions = 'FixedColumns',
  options = list(
    dom = 't'))  %>%
  formatStyle(names(df),
              background = 'lightblue', angle = -90,
              backgroundSize = '98% 88%',
              backgroundRepeat = 'no-repeat',
              backgroundPosition = 'center')

```

原始答案

添加幻灯片标题后，它会更改分配给 remark-slide-content 类的 CSS。但是，看起来它保留了填充设置。

好的，我不确定您喜欢哪张 table 。 (我猜 preferred 可能已经过时了，而不是像@##$^$ FIT $#$^#^...我经历过很多这样的时刻。所以我随机选择了上面的一张 table .

您需要样式。所以你在正确的轨道上。我使用的 div 具有 display: table-cell 样式，因此非常适合操作。

这就是您所需要的。

<style>
div.remark-slide-content {
  padding: 1em; /*default is 1em 4em*/
  font-size: .7em;
  vertical-align: middle; /*if you don't want it in the middle, delete this*/
}
</style>

总而言之，现在:

---
title: "Ed Edd n Eddy"
subtitle: ""
author: "Ed"
institute: "Gravy"
date: "`r format(Sys.Date(),'%e de %B, %Y')`"
output:
  xaringan::moon_reader:
    css: xaringan-themer.css
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
editor_options: 
  chunk_output_type: console
---

<style>
div.remark-slide-content {
  padding: 1em; /*default is 1em 4em*/
  font-size: .7em;
  vertical-align: middle; /*if you don't want it in the middle, delete this*/
}
</style>

```{r doasyouretold,echo=F,include=F}

library(tidyverse)
library(DT)

df <- structure(list(
  City = c("HOLLYWOOD", "PLANTATION", "Davie", "HOLLYWOOD", "PLANTATION"), Zipcode = c("33024", "33317", "33314", "33024", "33317"), 
  Date = structure(c(18996, 18633, 19011, 19012, 19016), class = "Date"), 
  Year = c(2022, 2021, 2022, 2022, 2022), Month = c(1, 1, 1, 1, 1), Day = c(4, 6, 19, 20, 24), 
  SR = c("SR-22-001", "SR-22-002", "SR-22-003", "SR-22-004", "SR-22-006"), 
  Permit = c("06-SE-2433290", "06-SE-2444371", "06-SM-2448351", "06-SM-2448625", NA),
  `Owner/Agent` = c("Pardo, G A & Elaine Nu-Black Septic Co", "Alshine Mondesir A Tip Top Septic", 
                    "Charlotte Ingmire Mr. C's Pumbling & Septic Inc.", "SRP Sub LLC Statewide Septic Cont Inc", 
                    "John Nelson Mr. C's Pumbling & Septic Inc."), 
  Address = c("1111 Harding St Hollywood, FL 33024", "5555 W Broward Blvd Plantation, 33317", 
              "1111 SW 74 Ave Davie, 33314", "2222 Thomas Street Hollywood, FL 33024", 
              "333 Bryan Blvd Plantation, 33317")), 
  sfc_columns = c("x", "y"), class = "data.frame", row.names = c(NA, -5L))

```


```{r gimmeNow,echo=F}

datatable(df,
         # style = "font-size: 75%; width: 75%")  %>% <- this doesn't go here...
         ) %>% 
  formatStyle(names(df), background = 'lightblue', angle = -90,
              backgroundSize = '98% 88%', backgroundRepeat = 'no-repeat',
              backgroundPosition = 'center')

```