Search code examples
rdatatabledtflexdashboard

How to adjust table height in flexdashboard?

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?

Solution

  • 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.