How to add striping to table in revealjs quarto presentation

[dmkaplan2000]

Description

I would like to add the classes .striped and .hover to a table that I am calculating using R in a quarto revealjs presentation, but I can't figure out how to do it. The default table style for presentations isn't particularly attractive, so I would like to spruce it up a bit, but I have tried several things and nothing seems to make a difference. For example, I tried the following document to get striping:

---
title: "Test striping"
format: 
  revealjs: default
  html: default
---

```{r}
df = data.frame(a=1:2,b=letters[1:2])
```


## Attempt 1 with `div`

::: {#tbl-t1 .striped .hover}
```{r}
knitr::kable(df)
```
:::

## Attempt 2 following quarto docs

```{r}
knitr::kable(df)
```

: Unwanted caption {.striped .hover}

Both tables look the same, though the second version clearly cannot handle the caption correctly (and I don't want a caption anyway). Looking at the output HTML, I see the following on the first version of the table:

<div id="tbl-t1" class="striped hover">

So it is associating the classes with the division, but perhaps these aren't the right classes for revealjs or perhaps these associations are in the wrong place in the document.

If someone can help me fix this, I would appreciate it.

[cscheid]

## Attempt 2 following quarto docs

```{r}
knitr::kable(df)
```

: Unwanted caption {.striped .hover}

I don't think we document this. We document that syntax for markdown tables, and the following works:

## Attempt 2 following quarto docs

| hello | world |
|-------|-------|
|     1 | 2     |

: {.striped .hover}

(If the caption is empty after applying classes, the table is emitted without a caption.)

However, what you want is to add classes to a computational table. That is not so easy right now with Quarto, at least off the top of my head. I think your best approach is to mimic the markdown table output in your R code cell. Thankfully, kable helps you with that:

```{r}
#| echo: false
knitr::kable(df, caption="{.striped .hover}")
```

For this kind of advanced styling, it's helpful to learn your way around the keep-md: true output.

[dmkaplan2000]

I tried both the suggestions above and neither seemed to changed anything in my presentation. Specifically:

## Attempt 2 following quarto docs

| hello | world |
|-------|-------|
|     1 | 2     |

: {.striped .hover}

and

```{r}
#| echo: false
knitr::kable(df, caption="{.striped .hover}")
```

both looked identical with and without the part about .striped .hover.

In the end, I ended up using kableExtra to get the table I wanted, but this doesn't work for a markdown table (and I have one that I would like to stripe...) and it is presumably a R specific solution:

```{r}
#| echo: false
knitr::kable(df) |>
  kableExtra::kable_classic(c("striped", "hover"),full_width = F)
```

[dmkaplan2000]

And to be clear, I am interested in something that works for a revealjs presentation, not just a html document. The solutions mentioned do seem to work for a html document, but not for revealjs (at least not for me...).

[cscheid]

The solutions mentioned do seem to work for a html document, but not for revealjs (at least not for me...).

Ah, I apologize; that's the issue. hover and striped are features of formats that have the bootstrap styling applied to them.

I'm not aware of a simple way to do this in revealjs, but maybe @dragonstyle or @mcanouil will know a trick?

[dmkaplan2000]

kableExtra did work quite well and this seems as legitimate a solution as funky captions in knitr::kable, but is very R specific.

[mcanouil]

@cderv is the real expert in Reveal.js.
This being said, the issue (from what I've seen) is that Bootstrap is not a dependency of Reveal.js thus none of the classes are available.

---
format:
  revealjs:
    include-in-header:
      - text: |
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
title: Reveal.js
---

## Slide

```{r}
knitr::kable(head(mtcars, c(5, 5)), format = "html", table.attr = 'class="table table-striped table-hover"')
```

[cderv]

I can confirm that bootstrap is not part of revealjs, hence the classes won't work as they are Bootstrap related.

For revealJS, the striped needs to be brought another way. At the end it is just CSS.

Example:

---
title: test
format:
  revealjs:
    theme: [default, custom.scss]
---

## This is the SCSS file

```{embed}
custom.scss
```


## Using markdown

| hello | world |
|-------|-------|
|     1 | 2     |
|     3 | 4     |
|     5 | 6     |
|     7 | 8     |

: {.striped}

## Using kable

```{r}
knitr::kable(head(mtcars, c(5, 5)), format = "html", table.attr = 'class="table table-striped"')
```

custom.scss being

/*-- scss:rules --*/
.table-striped {
  > tbody > tr:nth-of-type(odd) > * {
    background-color: #f2f2f2;
  }
}

Boostrap tables CSS is way more complex and handle much more edge case, but this works well.

Maybe we should try to get our default rendering the same and try to mimic some of this CSS for revealjs too. All the more because we do set .table-striped class on tables, even when this is not a bootstrap format.