Flexdashboard horizontal scroll bar with DataTable

Question

I am trying to make a dashboard with a plotly chart in one column and a datatable in the other.

I need the chart to be bigger than the DT, but the DT is overriding the size of the plotly.

Here is an example:

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: scroll
runtime: shiny
---

<style> #dt{ overflow: auto; } </style>   


```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
library(ggplot2)
library(plotly)
diamonds <-  diamonds[1:20,]
```



Column {data-width=900}
-----------------------------------------------------------------------
### Chart A 
```{r}
plot_ly(diamonds,
        x = ~ cut,
        y = ~ price,
        color = ~ clarity)
```

### Chart B 
```{r}
dt <- datatable(diamonds ,options = list(c(scrollY="200px", scrollX=TRUE, pageLength = 100)),  filter = 'top')
dt

I have been experimenting with different ways to specify the data-width, but none have worked so far.

Does anyone have any insight on how I can get the datatable to have a horizontal scrollbar? Is this possible with flexdashboard?

For example, I would like for the datatable to only show a few columns and the user can scroll to see the rest, so that the graph will be the main focus of the dashboard.

Answer 1

I've edited your code a little and I think the version below is what you are after. I changed the following:

1. Removed the "orientation: rows" line from your header definition.
2. Separated the charts into 2 individual columns.
3. Changed the "vertical_layout: scroll" to "vertical_layout: fill" as per Thomas John Flahertys comment above.

The code now reads:

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: fill
runtime: shiny
 ---

<style> #dt{ overflow: auto; } </style>   


```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
library(ggplot2)
library(plotly)
diamonds <-  diamonds[1:20,]
```



Column {data-width=300}
-----------------------------------------------------------------------
### Chart A 
```{r}
plot_ly(diamonds,
        x = ~ cut,
        y = ~ price,
        color = ~ clarity)
```

Column {data-width=100}
-----------------------------------------------------------------------
### Chart B 
```{r}
dt <- datatable(diamonds ,options = list(c(scrollY="200px", scrollX=TRUE, pageLength = 100)),  filter = 'top')
dt
```