How can I fit an interactive table using ioslides presentation and DT package?

Question

I am new using the option from R Markdown that allows you to create presentations... and I was wondering how can I fit an interactive table (using DT package) in one slide of my presentation.

First of all, I don't know why the color changes from white to gray... The previous slide is white and the slide that it has the table, it is gray.

On the other hand, if I try to select other pages of the table ("click on number 6), the table gets bigger and I cannot change or see more elements of the table.

This is the code:

---
title: "Habits"
author: "John Doe"
date: "March 22, 2005"
output:
    ioslides_presentation:
      widescreen: true

---

# In the morning

## Getting up 

- Turn off alarm
- Get out of bed

# TABLE

```{r}
library(DT)
datatable(head(mtcars, n = nrow(mtcars)), options = list(pageLength = 5)) 
```

Does anyone know how to solve it?

[By the way, if you know about some tutorials using tables and markdown presentations, I will be grateful too.]

Thanks very much in advance

Regards

Answer 1

The reason why the page is gray is because you are using heading 1 in your title (as # TABLE). On this template, main headings have gray background. Check the very first slide, # In the Morning, and you will see that it is also gray.

Note also that in this template the title is positioned in the lower left corner of the slide. That means that your title TABLES is behind your table. I assume that that is what is causing trouble with table when you try to change to page 6. Try using heading 2 for you title, like this:

---
title: "Habits"
author: "John Doe"
date: "March 22, 2005"
output:
    ioslides_presentation:
      widescreen: true

---

# In the morning

## Getting up 

- Turn off alarm
- Get out of bed

## TABLE


```{r }
library(DT)
datatable(head(mtcars, n = nrow(mtcars)), options = list(pageLength = 5)) 
```

Here is the result:

EDIT

Adding extra info that you requested, and I had missed earlier. I like the theme night from reveal.js. Here is how my yaml look like.

---
title: ""
output: 
       
  revealjs::revealjs_presentation:
          theme: night
          center: true
---

You can find the name of other themes at https://revealjs.com/themes/.