3

I have a flexdasboard with a page that contains 1 plot then below it a table. The table currently is compressed, so whilst it shows 25 rows it has them all within a scroll option so you can only view 2 of those rows at a time. How can I change this?

I am currently coding this with:

---
title: "Plots and tables"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: scroll
---

{r setup, include=FALSE}
library(flexdashboard)
library(ggplot2)
library(dplyr)
library(tidyverse)
library(data.table)
library(plotly)
library(htmlwidgets)
library(DT)


Page 1 {style="position:relative;"}
================================


{r fig.width=14, fig.height=10}
plotlyp1 <- ggplotly(p1)
plotlyp1


Row {style="height:100pc;"}
--------------------------------------------------------

### {data-height=10000}

{r}

DT::datatable(one.data_bp,
  rownames = FALSE, options = list(pageLength = 25, lengthMenu = c(5, 10, 15, 20)), filter = 'top', height=10000
)

I've removed the back ticks so everything is visible as code. The table this outputs looks like this:

enter image description here

So this has the 25 rows like I code for, but they are condensed and need scrolling with only 1 or 2 rows immediately visible at a time, how do I change the height of the table so at least 5/25 of the rows are visible?

Edit: I've technically fixed it and increased the number of rows visible by changing the Row setting to:

Row {.tabset .tabset-fade}
--------------------------------------------------------

Luckily I don't mind the table looking like it's in a tab, but I feel like this isn't the best or most direct fix, is there anything I can do?

LN3
  • 67
  • 1
  • 2
  • 10

2 Answers2

2

An answer to this had been posted in another forum: https://community.rstudio.com/t/dt-datatable-output-too-small-in-rmarkdown-flesxdashboard/124243/3. The datatable will be height-adjusted based on the available space. The following code has to be pasted after the YAML header (so the approach is similar to nap's answer).

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

I had the same problem as you, but only on one PC, not on another. Maybe something about the version of a package, but this code helped.

NicolasH2
  • 774
  • 5
  • 20
1

Had the same issue and I wasn't able to find an rmarkdown option or a DT option to fix this, but this worked for me - I put this CSS style to my rmarkdown:

<style>
.dataTables_scrollBody {
    height:400px !important;
    max-height:400px !important;
}
.chart-stage-flex {
    overflow:auto !important;
}
</style>

Both height and max-height need to be there, but I don't believe they need to match. You can try different arguments for each, but for me, 100% created a container that was too large and didn't scroll. And there are other height arguments you may wish to try: https://developer.mozilla.org/en-US/docs/Web/CSS/height.

Since I used a fixed height, I added overflow:auto style to .chart-stage-flex so that a scroll bar would appear when the window is smaller than 400px.

I'd love to hear if anyone knows how to control this from DT or knitr, etc.

nap
  • 35
  • 6