rr-markdowndtxaringan
R Autofit DT table width and height in xaringan HTML5 presentation
I have a dataframe (df) that I am trying to output as a DT table in an rmd xaringan presentation.
The code works fine, it's just that the table does not fit the Chrome browser page.
How can I fix this?
I tried multiple methods:
Method 1:
datatable(df,
style = "font-size: 75%; width: 75%") %>%
formatStyle(names(df),
background = 'lightblue', angle = -90,
backgroundSize = '98% 88%',
backgroundRepeat = 'no-repeat',
backgroundPosition = 'center')
Error:
Error in match.arg(style, DTStyles()) :
'arg' should be one of “default”, “bootstrap”, “bootstrap4”, “bootstrap5”, “bulma”, “dataTables”, “foundation”, “jqueryui”, “semanticui”
Method 2
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:
Error in formatColumns(table, columns, tplStyle, valueColumns, match.arg(target), :
Invalid table argument; a table object created from datatable() was expected
Method 3
Adding <div style = "width:80%; height:auto; margin: auto;"> on top of the chunk does nothing.
Method 4: Does nothing
---
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}
...
```
Method 5: Adding arguments out.width and out.height to the chunk options does not have any impact on a DT table.
{r Data Table, out.width= "400px", out.height="600px" ,echo=FALSE, message=FALSE, warning=FALSE}
Method 6: Even this doesn't adjust the table dimensions, so now I am thinking this issue might have to do with xaringan.
datatable(df,
extensions = 'FixedColumns',
options = list(
dom = 't',
scrollX = TRUE,
fixedColumns = TRUE
))
Sample data
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))
UPDATE 1:
I tried the answer below but it still doesn't work. See the image below for further reference.
UPDATE 2: Relevant Code
---
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')
```
Solution
Update based on your update
You're missing the closing > on styles. However, it still used it, which I find interesting. Well, used it and then ignored all but padding.
The title caused the underlying structure to change. This will work for the styles.
<style>
div.remark-slide-content {
padding: 1em; /*default is 1em 4em*/
}
.dataTables_wrapper {
font-size: .5em;
}
</style>
I noticed a few other things. I'm really surprised you didn't get an error for the "Data Table" chunk name. Chunk names shouldn't have whitespace. Just because it isn't causing a problem now doesn't mean it won't down the road. You also had out chunk options. They are ignored; you can remove them.
You also have "---" after the chunk xaringan-themer and before # Data Table. This is giving you a blank slide. (You may have done this on purpose and wanted it there; I just thought I would mention it.)
Altogether:
---
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')
```
Original answer
Once you added a slide title, it changed the CSS assigned to the class remark-slide-content. However, it looks like it maintained the padding settings.
Alright, I'm not sure what your preferred table is. (I'm guessing preferred may have gone out the window in lieu of something like @##$^$ FIT $#$^#^... I've had many of these moments. So I picked a table above at random.
You needed styles. So you were on the right track. The div that I've used has the style display: table-cell, so it was rather ideal for manipulation.
This is all you need.
<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>
Altogether, now:
---
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')
```
- Arranging bars in ggplot
- How to smooth an arc
- ggplot of multiple geom_sf datasets gives mismatched legend colours
- I get an error when using {future} and {furrr} functions within a Golem Shiny App, what does it come from?
- ggpredict and quartiles: predictions with only one data point?
- How to properly create secondary y-axis with percentage scale and multiple lines in R?
- ipwtm function in R: First argument a vector
- How can I download GADM data in R?
- Use dplyr to compute "streaks" in column of data
- Count empty strings?
- How to show a ConditionalPanel when a row in a reactable table is selected?
- How to lookup and sum multiple columns in R
- Is there a way to make the bars' colors conditional to the column?
- How to assign values to a df$column from another df using conditions in R
- Is there a way to read Qlikview data object using R and perform an statistical operation and return results to Qlikview?
- R: Extracting characters from string vectors to data frame rows
- Else if statement to create a new column
- Calculate percentage in a data frame R
- How can I calculate sums of multiple columns without them being summed together into 1 column?
- How to convert a binary file with extension .GRD to .TXT in R?
- How to specify the size of a graph in ggplot2 independent of axis labels
- Using sqldf filter and group by in r dynamically
- Grouping data and reassembling rows as columns
- Coordinates of current mouse position on leaflet map with shiny
- read_csv drops 'f' from end of string
- wes_palettes: How to obtain color hex codes from a wesanderson palette when it set to continuous with more than the predefined colors
- ggplot2 change axis limits for each individual facet panel
- Mixing Rcpp modules and Rcpp::export
- How to create a forest plot that uses estimates obtained from ClubSandwich?
- how to include an abstract in a Rmd file