tweets-in-reactable-expanded-rows.R

library(tweetrmd)
library(htmltools)
library(reactable)

x <- tibble::tibble(
  name = c("Tom", "Julia"),
  handle = c("@thomas_mock", "@b0rk"),
  tweet = c(
    "https://twitter.com/thomas_mock/status/1294670115590545408",
    "https://twitter.com/b0rk/status/1295029728127135746"
  )
)

tbl <- tagList(
  tweetrmd:::html_dependency_twitter(),
  reactable(
    data = x,
    groupBy = c("handle"),
    columns = list(
      tweet = colDef(
        cell = function(tweet_url) {
          tweet_embed(tweet_url, omit_script = FALSE)
        },
        html = TRUE
      )
    )
  ),
  tags$script(HTML("
  document.addEventListener('click', function(ev) {
    let el = ev.target.closest('.rt-expandable')
    if (!el) return;
    if (el.querySelector('.rt-expander.-open')) return;
    // the click was used to expand a row, reload tweets on the page
    setTimeout(twttr.widgets.load)
  })
  "))
)

browsable(tbl)

tweets-reactable.Rmd

---
title: Tweets ... in Reactable!
output: html_document
---


## Packages

```{r}
library(tweetrmd)
library(htmltools)
library(reactable)
```

## Data

```{r}
x <- tibble::tibble(
  name = c("Tom", "Julia"),
  handle = c("@thomas_mock", "@b0rk"),
  tweet = c(
    "https://twitter.com/thomas_mock/status/1294670115590545408",
    "https://twitter.com/b0rk/status/1295029728127135746"
  )
)
```

## Dependencies

```{r}
htmltools::tagList(
  tweetrmd:::html_dependency_twitter()
)
```

```{js}
// javascript -- set echo=FALSE on chunk to hide in output document
document.addEventListener('click', function(ev) {
  let el = ev.target.closest('.rt-expandable')
  if (!el) return;
  if (el.querySelector('.rt-expander.-open')) return;
  // the click was used to expand a row, reload tweets on the page
  setTimeout(twttr.widgets.load)
})
```


## Reactable

```{r}
reactable(
  data = x,
  groupBy = c("handle"),
  columns = list(
    tweet = colDef(
      cell = function(tweet_url) {
        tweet_embed(tweet_url, omit_script = FALSE)
      },
      html = TRUE
    )
  )
)
```