reprex for html tables like gt

[jthomasmock]

Please briefly describe your problem and what output you expect. If you have a question, please don't use this form. Instead, ask on https://stackoverflow.com/ or https://community.rstudio.com/.

I create a LOT Of reprex examples with gt tables. The rendered output in the viewer comes out "ok" but doesn't accurately represent the gt table even with venue = "html". It also creates a very unwieldy and long output that is primarily raw HTML/CSS.

While I'm not sure if this is something to be solved at the reprex level or the gt level, I wanted to start here with an issue. In my mind, when calling reprex on a gt table, it should almost always actually do:

data %>%
  some_gt_code() %>%
  gtsave("temp.png")

At the reprex level, it would perhaps be nice to at least throw a warning/message if gt_tbl class object is found as the output is neither accurate nor very useful. See a basic output below:

library(gt)

head(mtcars) %>%
  gt()

reprex output:

actual gt output which is stylized very differently.

reprex and potential solutions

Please include a minimal reproducible example (AKA a reprex). If you've never heard of a reprex before, start by reading https://www.tidyverse.org/help/#reprex.

library(gt)

head(mtcars) %>%
  gt()

and then call reprex::reprex_html() or reprex::reprex()

While the table itself doesn't appear correctly, it also adds a massive amount of CSS classes which are captured in the details tag below.

LONG output

library(gt)

head(mtcars) %>%
  gt()

<style>html { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif; }

#piyhirpzvo .gt_table {
display: table;
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
color: #333333;
font-size: 16px;
font-weight: normal;
font-style: normal;
background-color: #FFFFFF;
width: auto;
border-top-style: solid;
border-top-width: 2px;
border-top-color: #A8A8A8;
border-right-style: none;
border-right-width: 2px;
border-right-color: #D3D3D3;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #A8A8A8;
border-left-style: none;
border-left-width: 2px;
border-left-color: #D3D3D3;
}

#piyhirpzvo .gt_heading {
background-color: #FFFFFF;
text-align: center;
border-bottom-color: #FFFFFF;
border-left-style: none;
border-left-width: 1px;
border-left-color: #D3D3D3;
border-right-style: none;
border-right-width: 1px;
border-right-color: #D3D3D3;
}

#piyhirpzvo .gt_title {
color: #333333;
font-size: 125%;
font-weight: initial;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 5px;
padding-right: 5px;
border-bottom-color: #FFFFFF;
border-bottom-width: 0;
}

#piyhirpzvo .gt_subtitle {
color: #333333;
font-size: 85%;
font-weight: initial;
padding-top: 0;
padding-bottom: 6px;
padding-left: 5px;
padding-right: 5px;
border-top-color: #FFFFFF;
border-top-width: 0;
}

#piyhirpzvo .gt_bottom_border {
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
}

#piyhirpzvo .gt_col_headings {
border-top-style: solid;
border-top-width: 2px;
border-top-color: #D3D3D3;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
border-left-style: none;
border-left-width: 1px;
border-left-color: #D3D3D3;
border-right-style: none;
border-right-width: 1px;
border-right-color: #D3D3D3;
}

#piyhirpzvo .gt_col_heading {
color: #333333;
background-color: #FFFFFF;
font-size: 100%;
font-weight: normal;
text-transform: inherit;
border-left-style: none;
border-left-width: 1px;
border-left-color: #D3D3D3;
border-right-style: none;
border-right-width: 1px;
border-right-color: #D3D3D3;
vertical-align: bottom;
padding-top: 5px;
padding-bottom: 6px;
padding-left: 5px;
padding-right: 5px;
overflow-x: hidden;
}

#piyhirpzvo .gt_column_spanner_outer {
color: #333333;
background-color: #FFFFFF;
font-size: 100%;
font-weight: normal;
text-transform: inherit;
padding-top: 0;
padding-bottom: 0;
padding-left: 4px;
padding-right: 4px;
}

#piyhirpzvo .gt_column_spanner_outer:first-child {
padding-left: 0;
}

#piyhirpzvo .gt_column_spanner_outer:last-child {
padding-right: 0;
}

#piyhirpzvo .gt_column_spanner {
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
vertical-align: bottom;
padding-top: 5px;
padding-bottom: 5px;
overflow-x: hidden;
display: inline-block;
width: 100%;
}

#piyhirpzvo .gt_group_heading {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
color: #333333;
background-color: #FFFFFF;
font-size: 100%;
font-weight: initial;
text-transform: inherit;
border-top-style: solid;
border-top-width: 2px;
border-top-color: #D3D3D3;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
border-left-style: none;
border-left-width: 1px;
border-left-color: #D3D3D3;
border-right-style: none;
border-right-width: 1px;
border-right-color: #D3D3D3;
vertical-align: middle;
}

#piyhirpzvo .gt_empty_group_heading {
padding: 0.5px;
color: #333333;
background-color: #FFFFFF;
font-size: 100%;
font-weight: initial;
border-top-style: solid;
border-top-width: 2px;
border-top-color: #D3D3D3;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
vertical-align: middle;
}

#piyhirpzvo .gt_from_md > :first-child {
margin-top: 0;
}

#piyhirpzvo .gt_from_md > :last-child {
margin-bottom: 0;
}

#piyhirpzvo .gt_row {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
margin: 10px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #D3D3D3;
border-left-style: none;
border-left-width: 1px;
border-left-color: #D3D3D3;
border-right-style: none;
border-right-width: 1px;
border-right-color: #D3D3D3;
vertical-align: middle;
overflow-x: hidden;
}

#piyhirpzvo .gt_stub {
color: #333333;
background-color: #FFFFFF;
font-size: 100%;
font-weight: initial;
text-transform: inherit;
border-right-style: solid;
border-right-width: 2px;
border-right-color: #D3D3D3;
padding-left: 5px;
padding-right: 5px;
}

#piyhirpzvo .gt_stub_row_group {
color: #333333;
background-color: #FFFFFF;
font-size: 100%;
font-weight: initial;
text-transform: inherit;
border-right-style: solid;
border-right-width: 2px;
border-right-color: #D3D3D3;
padding-left: 5px;
padding-right: 5px;
vertical-align: top;
}

#piyhirpzvo .gt_row_group_first td {
border-top-width: 2px;
}

#piyhirpzvo .gt_summary_row {
color: #333333;
background-color: #FFFFFF;
text-transform: inherit;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
}

#piyhirpzvo .gt_first_summary_row {
border-top-style: solid;
border-top-color: #D3D3D3;
}

#piyhirpzvo .gt_first_summary_row.thick {
border-top-width: 2px;
}

#piyhirpzvo .gt_last_summary_row {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
}

#piyhirpzvo .gt_grand_summary_row {
color: #333333;
background-color: #FFFFFF;
text-transform: inherit;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
}

#piyhirpzvo .gt_first_grand_summary_row {
padding-top: 8px;
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
border-top-style: double;
border-top-width: 6px;
border-top-color: #D3D3D3;
}

#piyhirpzvo .gt_striped {
background-color: rgba(128, 128, 128, 0.05);
}

#piyhirpzvo .gt_table_body {
border-top-style: solid;
border-top-width: 2px;
border-top-color: #D3D3D3;
border-bottom-style: solid;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
}

#piyhirpzvo .gt_footnotes {
color: #333333;
background-color: #FFFFFF;
border-bottom-style: none;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
border-left-style: none;
border-left-width: 2px;
border-left-color: #D3D3D3;
border-right-style: none;
border-right-width: 2px;
border-right-color: #D3D3D3;
}

#piyhirpzvo .gt_footnote {
margin: 0px;
font-size: 90%;
padding-left: 4px;
padding-right: 4px;
padding-left: 5px;
padding-right: 5px;
}

#piyhirpzvo .gt_sourcenotes {
color: #333333;
background-color: #FFFFFF;
border-bottom-style: none;
border-bottom-width: 2px;
border-bottom-color: #D3D3D3;
border-left-style: none;
border-left-width: 2px;
border-left-color: #D3D3D3;
border-right-style: none;
border-right-width: 2px;
border-right-color: #D3D3D3;
}

#piyhirpzvo .gt_sourcenote {
font-size: 90%;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 5px;
padding-right: 5px;
}

#piyhirpzvo .gt_left {
text-align: left;
}

#piyhirpzvo .gt_center {
text-align: center;
}

#piyhirpzvo .gt_right {
text-align: right;
font-variant-numeric: tabular-nums;
}

#piyhirpzvo .gt_font_normal {
font-weight: normal;
}

#piyhirpzvo .gt_font_bold {
font-weight: bold;
}

#piyhirpzvo .gt_font_italic {
font-style: italic;
}

#piyhirpzvo .gt_super {
font-size: 65%;
}

#piyhirpzvo .gt_two_val_uncert {
display: inline-block;
line-height: 1em;
text-align: right;
font-size: 60%;
vertical-align: -0.25em;
margin-left: 0.1em;
}

#piyhirpzvo .gt_footnote_marks {
font-style: italic;
font-weight: normal;
font-size: 75%;
vertical-align: 0.4em;
}

#piyhirpzvo .gt_asterisk {
font-size: 100%;
vertical-align: 0;
}

#piyhirpzvo .gt_slash_mark {
font-size: 0.7em;
line-height: 0.7em;
vertical-align: 0.15em;
}

#piyhirpzvo .gt_fraction_numerator {
font-size: 0.6em;
line-height: 0.6em;
vertical-align: 0.45em;
}

#piyhirpzvo .gt_fraction_denominator {
font-size: 0.6em;
line-height: 0.6em;
vertical-align: -0.05em;
}
</style>

mpg	cyl	disp	hp	drat	wt	qsec	vs	am	gear	carb
21.0	6	160	110	3.90	2.620	16.46	0	1	4	4
21.0	6	160	110	3.90	2.875	17.02	0	1	4	4
22.8	4	108	93	3.85	2.320	18.61	1	1	4	1
21.4	6	258	110	3.08	3.215	19.44	1	0	3	1
18.7	8	360	175	3.15	3.440	17.02	0	0	3	2
18.1	6	225	105	2.76	3.460	20.22	1	0	3	1

^{Created on 2022-06-17 by the reprex package (v2.0.1)}

A workaround I do commonly is save the table out to an image instead via gt::gtsave() which adds the verbatim table as an image tag and is much more useful to provide in bug reports/reprex. A reprex of this style is seen below. However, the addition of gtsave() code is "unnecessary" to the minimal functionality of the code and more about the output.

The vast majority of the reprex or bug reports I see from users submitting gt examples only report the code and MAYBE a manual screenshot of varying quality as not everyone things to do the gtsave() hack.

Would it be possible to have a method in gt or in reprex so that when gt is called in the context of a reprex it would generate the image output or at least suggest to users that they include that in their code?

library(gt)

head(mtcars) %>%
  gt() %>%
  gtsave("out.png")

^{Created on 2022-06-17 by the reprex package (v2.0.1)}

[jennybc]

This has a lot of echoes from #404, which is about doing something similar for rgl output.

That ended up being taken care of entirely inside rgl, as it's really an rgl <--> knitr matter and then reprex just inherits that behaviour.

I suspect a similar solution would be the way to go for gt.