listcolumn

count: false

.panel1-the_chunk-replace[

```r
tibble(x = c(1,2,3,4,6),
       y = 1:5,
       z = list(1:2, 4:5, 8, NA,
                c(1,7,9,0))) %>%
* gt::gt()
```
]
 
.panel2-the_chunk-replace[
<style>html {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
}

#qdbtrwgyoa .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;
}

#qdbtrwgyoa .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;
}

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

#qdbtrwgyoa .gt_subtitle {
  color: #333333;
  font-size: 85%;
  font-weight: initial;
  padding-top: 0;
  padding-bottom: 4px;
  border-top-color: #FFFFFF;
  border-top-width: 0;
}

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

#qdbtrwgyoa .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;
}

#qdbtrwgyoa .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;
}

#qdbtrwgyoa .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;
}

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

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

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

#qdbtrwgyoa .gt_group_heading {
  padding: 8px;
  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;
}

#qdbtrwgyoa .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;
}

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

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

#qdbtrwgyoa .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;
}

#qdbtrwgyoa .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: 12px;
}

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

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

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

#qdbtrwgyoa .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;
}

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

#qdbtrwgyoa .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;
}

#qdbtrwgyoa .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;
}

#qdbtrwgyoa .gt_footnote {
  margin: 0px;
  font-size: 90%;
  padding: 4px;
}

#qdbtrwgyoa .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;
}

#qdbtrwgyoa .gt_sourcenote {
  font-size: 90%;
  padding: 4px;
}

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

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

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

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

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

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

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

#qdbtrwgyoa .gt_footnote_marks {
  font-style: italic;
  font-size: 65%;
}
</style>
<div id="qdbtrwgyoa" style="overflow-x:auto;overflow-y:auto;width:auto;height:auto;"><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">x</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="1" colspan="1">y</th>
      <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="1" colspan="1">z</th>
    </tr>
  </thead>
  <tbody class="gt_table_body">
    <tr>
      <td class="gt_row gt_right">1</td>
      <td class="gt_row gt_center">1</td>
      <td class="gt_row gt_center">1, 2</td>
    </tr>
    <tr>
      <td class="gt_row gt_right">2</td>
      <td class="gt_row gt_center">2</td>
      <td class="gt_row gt_center">4, 5</td>
    </tr>
    <tr>
      <td class="gt_row gt_right">3</td>
      <td class="gt_row gt_center">3</td>
      <td class="gt_row gt_center">8</td>
    </tr>
    <tr>
      <td class="gt_row gt_right">4</td>
      <td class="gt_row gt_center">4</td>
      <td class="gt_row gt_center">NA</td>
    </tr>
    <tr>
      <td class="gt_row gt_right">6</td>
      <td class="gt_row gt_center">5</td>
      <td class="gt_row gt_center">1, 7, 9, 0</td>
    </tr>
  </tbody>
  
  
</table></div>
]

---
count: false

.panel1-the_chunk-replace[

```r
tibble(x = c(1,2,3,4,6),
       y = 1:5,
       z = list(1:2, 4:5, 8, NA,
                c(1,7,9,0))) %>%
* knitr::kable('html')
```
]
 
.panel2-the_chunk-replace[
<table>
 <thead>
  <tr>
   <th style="text-align:right;"> x </th>
   <th style="text-align:right;"> y </th>
   <th style="text-align:left;"> z </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:right;"> 1 </td>
   <td style="text-align:left;"> 1:2 </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 2 </td>
   <td style="text-align:right;"> 2 </td>
   <td style="text-align:left;"> 4:5 </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 3 </td>
   <td style="text-align:right;"> 3 </td>
   <td style="text-align:left;"> 8 </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:right;"> 4 </td>
   <td style="text-align:left;"> NA </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 6 </td>
   <td style="text-align:right;"> 5 </td>
   <td style="text-align:left;"> c(1, 7, 9, 0) </td>
  </tr>
</tbody>
</table>
]

---
count: false

.panel1-the_chunk-replace[

```r
tibble(x = c(1,2,3,4,6),
       y = 1:5,
       z = list(1:2, 4:5, 8, NA,
                c(1,7,9,0))) %>%
* DT::datatable()
```
]
 
.panel2-the_chunk-replace[
<div id="htmlwidget-b458f0ff831b61739196" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-b458f0ff831b61739196">{"x":{"filter":"none","data":[["1","2","3","4","5"],[1,2,3,4,6],[1,2,3,4,5],[[1,2],[4,5],8,null,[1,7,9,0]]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>x<\/th>\n      <th>y<\/th>\n      <th>z<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"columnDefs":[{"className":"dt-right","targets":[1,2]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>
]

---
count: false

.panel1-the_chunk-replace[

```r
tibble(x = c(1,2,3,4,6),
       y = 1:5,
       z = list(1:2, 4:5, 8, NA,
                c(1,7,9,0))) %>%
* reactable::reactable()
```
]
 
.panel2-the_chunk-replace[
<div id="htmlwidget-86384ee0e5075da57c5f" class="reactable html-widget" style="width:auto;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-86384ee0e5075da57c5f">{"x":{"tag":{"name":"Reactable","attribs":{"data":{"x":[1,2,3,4,6],"y":[1,2,3,4,5],"z":[[1,2],[4,5],[8],[null],[1,7,9,0]]},"columns":[{"accessor":"x","name":"x","type":"numeric"},{"accessor":"y","name":"y","type":"numeric"},{"accessor":"z","name":"z","type":"list"}],"defaultPageSize":10,"paginationType":"numbers","showPageInfo":true,"minRows":1,"dataKey":"f24d0ab9097dafede728943714af6fa0","key":"f24d0ab9097dafede728943714af6fa0"},"children":[]},"class":"reactR_markup"},"evals":[],"jsHooks":[]}</script>
]

@media print {
  .has-continuation {
    display: block;
  }
}

code.r.hljs.remark-code{
  position: relative;
  overflow-x: hidden;
}

code.r.hljs.remark-code:hover{
  overflow-x:visible;
  width: 500px;
  border-style: solid;
}
</style>