CODEWITHSUNDEEP
cssrshinyflexdashboard
Alexis
Alexis

Reputation: 2266

Scrolling for a gt table chunk in Flexdashboard or Shiny

I have the following dashboard:

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
library(gt)
library(dplyr)
library(tidyr)

Tab 1
=======================================================================

Column
-----------------------------------------------------------------------

### Chart A

```{r}
mtcars %>%
  gt()

enter image description here

But I can't see all the table generated by gt because I can't scroll it. So I tried to add a css style chunk:

.chart-stage {
  overflow: auto;
}

But I can achieve what I want, which is to add a scroll bar to see all the table. Please, any help will be greatly appreciated.

Upvotes: 2

Views: 1633

Answers (2)

user2948714
user2948714

Reputation: 721

I had the same problem, tried many things and ultimately found this solution using the htmltools package

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
library(gt)
library(dplyr)
library(tidyr)
require(htmltools)
```




Tab 1
=======================================================================

Column
-----------------------------------------------------------------------

### Chart A

```{r}
div(style='height:800px; overflow-y: scroll', gt(mtcars))
```

Upvotes: 2

Alexis
Alexis

Reputation: 2266

After reviewing the css selectors, this is the solution for the question, you'll have to add this chunk to allow scrolling:

    ```{css}
    .chart-shim {
      overflow: auto;
    }
    ```

Upvotes: 4

Related Questions