reprex for html tables like gt

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:

```r
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:

```r
library(gt)

head(mtcars) %>%
  gt()
```

`reprex` output:

<img src="https://user-images.githubusercontent.com/29187501/174364279-3c2784db-8741-43ae-89ad-471654db8d71.png" width=350px>

_actual_ `gt` output which is stylized very differently.
<img src="https://user-images.githubusercontent.com/29187501/174365965-b1bd596f-ab32-4941-a933-24f73ea0744f.png" width=350px>

### `reprex` and potential solutions

Please include a minimal reproducible example (AKA a reprex). If you've never heard of a [reprex](http://reprex.tidyverse.org/) before, start by reading <https://www.tidyverse.org/help/#reprex>.

```r
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.

<details><summary>LONG output</summary>

``` r
library(gt)

head(mtcars) %>%
  gt()
```

<div id="piyhirpzvo" style="overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<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>
<table class="gt_table">
  
  <thead class="gt_col_headings">
    <tr>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">mpg</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">cyl</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">disp</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">hp</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">drat</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">wt</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">qsec</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">vs</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">am</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">gear</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1">carb</th>
    </tr>
  </thead>
  <tbody class="gt_table_body">
    <tr><td class="gt_row gt_right">21.0</td>
<td class="gt_row gt_right">6</td>
<td class="gt_row gt_right">160</td>
<td class="gt_row gt_right">110</td>
<td class="gt_row gt_right">3.90</td>
<td class="gt_row gt_right">2.620</td>
<td class="gt_row gt_right">16.46</td>
<td class="gt_row gt_right">0</td>
<td class="gt_row gt_right">1</td>
<td class="gt_row gt_right">4</td>
<td class="gt_row gt_right">4</td></tr>
    <tr><td class="gt_row gt_right">21.0</td>
<td class="gt_row gt_right">6</td>
<td class="gt_row gt_right">160</td>
<td class="gt_row gt_right">110</td>
<td class="gt_row gt_right">3.90</td>
<td class="gt_row gt_right">2.875</td>
<td class="gt_row gt_right">17.02</td>
<td class="gt_row gt_right">0</td>
<td class="gt_row gt_right">1</td>
<td class="gt_row gt_right">4</td>
<td class="gt_row gt_right">4</td></tr>
    <tr><td class="gt_row gt_right">22.8</td>
<td class="gt_row gt_right">4</td>
<td class="gt_row gt_right">108</td>
<td class="gt_row gt_right">93</td>
<td class="gt_row gt_right">3.85</td>
<td class="gt_row gt_right">2.320</td>
<td class="gt_row gt_right">18.61</td>
<td class="gt_row gt_right">1</td>
<td class="gt_row gt_right">1</td>
<td class="gt_row gt_right">4</td>
<td class="gt_row gt_right">1</td></tr>
    <tr><td class="gt_row gt_right">21.4</td>
<td class="gt_row gt_right">6</td>
<td class="gt_row gt_right">258</td>
<td class="gt_row gt_right">110</td>
<td class="gt_row gt_right">3.08</td>
<td class="gt_row gt_right">3.215</td>
<td class="gt_row gt_right">19.44</td>
<td class="gt_row gt_right">1</td>
<td class="gt_row gt_right">0</td>
<td class="gt_row gt_right">3</td>
<td class="gt_row gt_right">1</td></tr>
    <tr><td class="gt_row gt_right">18.7</td>
<td class="gt_row gt_right">8</td>
<td class="gt_row gt_right">360</td>
<td class="gt_row gt_right">175</td>
<td class="gt_row gt_right">3.15</td>
<td class="gt_row gt_right">3.440</td>
<td class="gt_row gt_right">17.02</td>
<td class="gt_row gt_right">0</td>
<td class="gt_row gt_right">0</td>
<td class="gt_row gt_right">3</td>
<td class="gt_row gt_right">2</td></tr>
    <tr><td class="gt_row gt_right">18.1</td>
<td class="gt_row gt_right">6</td>
<td class="gt_row gt_right">225</td>
<td class="gt_row gt_right">105</td>
<td class="gt_row gt_right">2.76</td>
<td class="gt_row gt_right">3.460</td>
<td class="gt_row gt_right">20.22</td>
<td class="gt_row gt_right">1</td>
<td class="gt_row gt_right">0</td>
<td class="gt_row gt_right">3</td>
<td class="gt_row gt_right">1</td></tr>
  </tbody>
  
  
</table>
</div>

<sup>Created on 2022-06-17 by the [reprex package](https://reprex.tidyverse.org) (v2.0.1)</sup>

</details>

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?

``` r
library(gt)

head(mtcars) %>%
  gt() %>%
  gtsave("out.png")
```

![](https://i.imgur.com/ukuUw40.png)

<sup>Created on 2022-06-17 by the [reprex package](https://reprex.tidyverse.org) (v2.0.1)</sup>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

reprex for html tables like gt #419

`reprex` and potential solutions

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

reprex for html tables like gt #419

Description

reprex and potential solutions

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

`reprex` and potential solutions