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?
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>
```