Flexdashboard Dynamic Resizing of Rows based on DataTable length

Question

I’m developing a Flexdashboard in R. I understand that we set the starting dimensions such as Row height, and that Shiny will automatically resize things while keeping the starting proportion ratio.

Can I dynamically modify the proportion ratio?
Let’s say based on the length datatable being displayed?

In this reproducible example, there's a datatable and a chart below.

Datatable has 2 length option.

I would like the datatable container to be resized to fit flush with the table, leaving more room for the graph. Inversely, if we select the largest length, I want the datatable to be shown entirely (no scroll), therefore reducing the chart displayed.

Example:

---
title: "Dynamic Resizing?"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill
    runtime: shiny
    
---

```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
library(ggplot2)
```

Row {data-height=500}
-----------------------------------------------------------------------

### The Table

```{r}

output$my_table <-  DT::renderDataTable({
  
    DT::datatable(mtcars %>% head(20), 
                  options = list( dom = 'Blfrt'
                                  , searching = FALSE
                                  , lengthMenu = c(5, 10)
                                  , pageLength = 5
                                  , scrollY = 300
                                  , scrollCollapse = FALSE
                                  ))
  
  })

dataTableOutput('my_table')

```

Row {data-height=500}
-----------------------------------------------------------------------

### The Chart

```{r}

output$my_chart <- renderPlot({
  
ggplot(mtcars, aes(x=hp, y=mpg, color=cyl)) +
  geom_point(size=3)


})

plotOutput("my_chart") 

```

I've tested many things without any success.

Obviously, the row height is hardcoded: Row {data-height=500}. Perhaps there is an easy way to have it dynamic?

I can write:

 Row {data-height= `r variable` }

However it is not reactive.

I can create a reactiveValue which I can feed to the title section, but it does not work for the Row height. I guess renderText is inappropriate for a "value".

Ex:

```{r}
h <- reactiveValues(val = 200)
```

Row {data-height=`r renderText(h$val)`}
-----------------------------------------------------------------------

### The Table `r renderText(h$val)`

Otherwise, this question Dynamic Re-sizing Flexdashboard/Plotly Image to a Different Graphic is similar to mine, but the trick was to combine the two charts into one, which doesn't apply in my case because it's a table with a chart.

Since my question involves Data.Table, I had hopes with this one: How to adjust table height in flexdashboard? . It involves CSS, with this code:

<style>
.dataTables_scrollBody {
    max-height: 100% !important;
}
</style>

But it didn't seem to work. I have a got feeling the answer might be through CSS but could not figure it out....

Any expert can chime in on this? It's probably something super obvious that I'm missing.

Thanks in advance!

Flexdashboard Dynamic Resizing of Rows based on DataTable length

0 Answers0