Is it possible to make a huxtable html output hoverable?

Question

Specifically, this works for tables produced with kableExtra which creates a very appealing effect. I was wondering if anyone has an idea how this may be doable with huxtable.

Here's an example Rmd to get a glimpse at what I mean. I'd like the huxtable to allow the hover effect that is visible in the kable.

---
output: bookdown::html_document2
---

```{r lib}
library(magrittr)
```

```{r kable}
iris %>%
  head() %>%
  kableExtra::kbl(caption = "a caption") %>%
  kableExtra::kable_styling(bootstrap_options = "hover")
```

```{r huxtable}
iris %>%
  head() %>%
  huxtable::hux() %>%
  huxtable::set_caption("a caption")
```

Related to: Is it possible to fix the head for a long huxtable?

Answer 1

If you inspect the underlying generated HTML for kableExtra table, you would see, for bootstrap_options = "hover", kableExtra is using a css class table-hover, which is creating such a hovering effect.

Knowing this, one possible approach to attain the hovering effect for huxtables is just attaching the table-hover class to all huxtables which could be done easily using javascript.

---
output: bookdown::html_document2
---

```{r lib}
library(magrittr)
```


```{r huxtable}
iris %>%
  head() %>%
huxtable::hux() %>%
  huxtable::set_caption("a caption")
```


```{r huxtable2}
mtcars %>%
  head() %>%
huxtable::hux() %>%
  huxtable::set_caption("another caption")
```


```{=html}
<style>

.table-hover>tbody>tr:hover {
  background-color: #f5f5f5 !important;
}

</style>



<script>

function make_table_hover() {
  let huxtable = document.querySelectorAll('table.huxtable');
  huxtable.forEach(tab => {
    if (!tab.classList.contains('table-hover')) {
      tab.classList.add('table-hover');
    }
  });
};

window.addEventListener("load", (event) => {
  make_table_hover();
});
</script>

```