How to extend the renderTable width in Shiny flexdashboard

Question

I have the following self containing Shiny-Flexdashboard:

---
title: "FOO"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: scroll
    orientation: rows
    theme:   default

---

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

Rows
-------------------------------------

### Statistical Test Summary
```{r stat_test_table}
mainPanel(

  renderTable( {
      dat <- df <- structure(list(`Sample name` = structure(1:3, .Label = c("Sample1", 
          "Sample2", "Sample3"), class = "factor"), `FDR correction (mean)` = c(5.93070861978308e-15, 
         6.88632524238004e-13, 3.28339498763286e-16), `FDR correction (sd)` = c(2.00046170407461e-14, 
        2.32019633515427e-12, 1.10782095003689e-15), `P-value (mean)` = c(5.55365134900322e-15, 
        6.44757191496266e-13, 3.07475941705412e-16), `P-value (sd)` = c(1.98732517127302e-14, 
        2.30494707691577e-12, 1.10054774779699e-15)), class = c("tbl_df", 
        "tbl", "data.frame"), .Names = c("Sample name", "FDR correction (mean)", 
        "FDR correction (sd)", "P-value (mean)", "P-value (sd)"), row.names = c(NA,  -3L))
  }
  , digits=-2, width = '100%'
  )
)
```

It produces table like this:

As stated there how can I extend the column width?

along with `orientation : columns` in `output` in markdown header — parth, Jul 07 '17 at 08:36

score 6 · Answer 1 · answered May 27 '17 at 08:59

6

Interesting. If you look at the docu of ?mainPanel(). You will see that the width is by default restricted to "8" (12 is the max): mainPanel(..., width = 8)

So if you simplfy change to: mainPanel(..., width = 12) it will work.

answered May 27 '17 at 08:59

Tonio Liebrand

17,189
4
39
59

Thanks.How can I make the white area to extend to the full width of the page? – neversaint May 27 '17 at 09:13
i can take a look later today. Did you already look here: https://stackoverflow.com/questions/15385696/how-to-adjust-the-output-width-of-rstudio-markdown-output-to-html ? – Tonio Liebrand May 27 '17 at 09:52

score 3 · Answer 2 · answered Jul 07 '17 at 09:03

Using width = 12 in mainPanel and enclosing table inside div did the trick.

---
title: "FOO"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: scroll
    orientation: columns
    theme:   default

---

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

Columns
-------------------------------------

### Statistical Test Summary
```{r stat_test_table}

mainPanel(width = 12,
  div(style="height:570px",
  renderTable( {
      dat <- df <- structure(list(`Sample name` = structure(1:3, .Label = c("Sample1", 
          "Sample2", "Sample3"), class = "factor"), `FDR correction (mean)` = c(5.93070861978308e-15, 
         6.88632524238004e-13, 3.28339498763286e-16), `FDR correction (sd)` = c(2.00046170407461e-14, 
        2.32019633515427e-12, 1.10782095003689e-15), `P-value (mean)` = c(5.55365134900322e-15, 
        6.44757191496266e-13, 3.07475941705412e-16), `P-value (sd)` = c(1.98732517127302e-14, 
        2.30494707691577e-12, 1.10054774779699e-15)), class = c("tbl_df", 
        "tbl", "data.frame"), .Names = c("Sample name", "FDR correction (mean)", 
        "FDR correction (sd)", "P-value (mean)", "P-value (sd)"), row.names = c(NA,  -3L))
  }
  , digits=-2, width = '100%'
  ))
)
```

It produces the output as :

Charlie Joey Hadley · Answer 3 · 2017-07-11T13:14:00.517

I think it's important to note that mainPanel is not designed for your use case here. This is the "correct" usage of mainPanel and why there is the default width = 8

sidebarLayout(
  sidebarPanel(sliderInput("thing", "Thing", min = 0, max = 5, value = 4)),
  mainPanel(
    renderDataTable( {

    input$Thing
      dat <- df <- structure(list(`Sample name` = structure(1:3, .Label = c("Sample1", 
          "Sample2", "Sample3"), class = "factor"), `FDR correction (mean)` = c(5.93070861978308e-15, 
         6.88632524238004e-13, 3.28339498763286e-16), `FDR correction (sd)` = c(2.00046170407461e-14, 
        2.32019633515427e-12, 1.10782095003689e-15), `P-value (mean)` = c(5.55365134900322e-15, 
        6.44757191496266e-13, 3.07475941705412e-16), `P-value (sd)` = c(1.98732517127302e-14, 
        2.30494707691577e-12, 1.10054774779699e-15)), class = c("tbl_df", 
        "tbl", "data.frame"), .Names = c("Sample name", "FDR correction (mean)", 
        "FDR correction (sd)", "P-value (mean)", "P-value (sd)"), row.names = c(NA,  -3L))
  }
  )
  )
)

Furthermore, you'll have much more flexibility with your tables if you use DT::renderDataTable which you may read about here https://rstudio.github.io/DT/

In fact, by default this takes 100% of the browser window width without needing a wrapper. You might consider using fillPage and fluidPage in your flexdashboards to control the size/area dedicated to individual elements.

---
title: "FOO"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: scroll
    orientation: rows
    theme:   default

---

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

Rows
-------------------------------------

### Statistical Test Summary

```{r}
DT::renderDataTable( {

    input$Thing
      dat <- df <- structure(list(`Sample name` = structure(1:3, .Label = c("Sample1", 
          "Sample2", "Sample3"), class = "factor"), `FDR correction (mean)` = c(5.93070861978308e-15, 
         6.88632524238004e-13, 3.28339498763286e-16), `FDR correction (sd)` = c(2.00046170407461e-14, 
        2.32019633515427e-12, 1.10782095003689e-15), `P-value (mean)` = c(5.55365134900322e-15, 
        6.44757191496266e-13, 3.07475941705412e-16), `P-value (sd)` = c(1.98732517127302e-14, 
        2.30494707691577e-12, 1.10054774779699e-15)), class = c("tbl_df", 
        "tbl", "data.frame"), .Names = c("Sample name", "FDR correction (mean)", 
        "FDR correction (sd)", "P-value (mean)", "P-value (sd)"), row.names = c(NA,  -3L))
  },
  extensions = "Responsive"
  )
```

How to extend the renderTable width in Shiny flexdashboard

3 Answers3

Linked