When I add a table by DT::datatable or KableExtra::kbl() in a column with {.tabset} the output is not rendered in flexdashboard.
Any idea how to get a proper result?
Example:
I want to have one column with tabs. This is working without adding a table in the output component like in the example below
---
title: "tabs working"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: scroll
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
Page
=================================
Column {.tabset}
---------------------------------
### Tab 1
```{r }
```
### Tab 2
```{r}
```
When I do the same with datatable objects it is not rendered properly.
---
title: "tabs not working"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: scroll
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{r load packages, echo=FALSE, include=FALSE}
library(DT)
```
Page
=================================
Column {.tabset}
---------------------------------
### Tab 1
```{r }
datatable(data.frame(seq(5, 3)))
```
### Tab 2
```{r}
datatable(data.frame(seq(5, 3)))
```
Then the output is like this
If you add a second column it will render.
---
title: "tabs not working"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: scroll
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{r load packages, echo=FALSE, include=FALSE}
library(flexdashboard)
library(DT)
library(tidyverse)
```
Page
=================================
Column {.tabset}
---------------------------------
### Tab 1
```{r }
datatable(data.frame(seq(5,3)),
fillContainer = FALSE)
```
### Tab 2
```{r}
datatable(data.frame(seq(5,3)),
fillContainer = FALSE)
```
Column
---------------------------------
### Column 1
```{r, echo = FALSE}
ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width)) +
geom_point()
```
In the alternative, if you only want one column that includes the tabset, it's the equivalent of a single row. If you switch the layout to rows, it will render on its own. If you want to add columns further down the flexdashboard, you can just specify Column in the second block below.
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: rows
---
```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
library(tidyverse)
```
Page
=================================
Row {.tabset}
---------------------------------
### Tab 1
```{r }
iris %>%
datatable()
```
### Tab 2
```{r}
mtcars %>%
datatable()
```
Column
---------------------------------
### Column 1
```{r, echo = FALSE}
ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width)) +
geom_point()
```
### Column 2
```{r, echo = FALSE}
ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width)) +
geom_point()
```
Related
I having a problem using the shiny reactive environment. My problem is that the vector is not being completed. Everytime I presss the buttom the output goes to the row bellow, but erase the previous elemnt.
This is my code:
---
title: "teste"
author: "Teste1"
date: "03/01/2022"
output: html_document
runtime: shiny
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{r}
actionButton("action1", "Press Button")
```
```{r, echo= FALSE, message = FALSE}
reactive({
u <- input$action1
w<- u + 2651641684
x <- c()
x[input$action1] <- paste("Texto",format(Sys.time(), "%S"))
print(x)
})
```
Why when I print(x) the vector doesnt store the previous elements when I press the button?
Any help?
Does this give you what you want?
---
title: "teste"
author: "Teste1"
date: "03/01/2022"
output: html_document
runtime: shiny
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{r}
actionButton("action1", "Press Button")
```
```{r, echo= FALSE, message = FALSE}
v <- reactiveValues(x=c(), u=0)
observeEvent(input$action1, {
v$u <- v$u + 1
w <- v$u + 2651641684
v$x[v$u] <- paste("Texto",format(Sys.time(), "%S"))
print(v$x)
})
```
I am trying to shift the filtering to the right hand side but not able to. Can anyone please help. please refer the expected output. Is it possible to achieve this?
reprex below
title: "Untitled"
runtime: shiny
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
selectInput("Tic","Ticker",choices = c("","ALL",as.character(iris$Species)),selected = NULL)
dateRangeInput("Date","Date",start = '2016-01-01', end = Sys.time(),format = "yyyy-mm-dd")
DT::DTOutput('SUMMARY_GENERAL_table')
output$SUMMARY_GENERAL_table <- DT::renderDT( datatable(iris) )
```
Expect Output :
You'll need to add some css. Please check the following:
---
title: "Untitled"
runtime: shiny
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(DT)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
div(style="display:inline-block; vertical-align:top; float:right;",
fluidRow(
column(width = 6, selectInput("Tic","Ticker",choices = c("", "ALL", as.character(iris$Species)), selected = NULL)),
column(width = 6, dateRangeInput("Date","Date",start = '2016-01-01', end = Sys.time(), format = "yyyy-mm-dd"))
))
DT::DTOutput('SUMMARY_GENERAL_table')
output$SUMMARY_GENERAL_table <- DT::renderDT( datatable(iris) )
```
When there is a text above a datatable object, the table is truncated and the pagination is no longer visible.
Is it possible to size the datatable to that it fits in one flexdashboard container?
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r, results='asis'}
cat("This is a text\n\nThis is a text")
```
```{r}
mtcars %>% datatable(options = list(dom = 'tp'))
```
You have a few options. You could use vertical_layout: scroll. This will allow the pagination to work while keeping the text in the same container as the table.
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: scroll
---
```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r, results='asis'}
cat("This is a text\n\nThis is a text")
```
```{r}
mtcars %>% datatable(options = list(dom = 'tp'))
```
Alternatively you could use separate containers for the text and the table. You would probably want to set the height of the containers with {data-height} if you do this.
---
title: "Untitled"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
library(DT)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Text A {data-height=50}
```{r, results='asis'}
cat("This is a text\n\nThis is a text")
```
### Chart A
```{r}
mtcars %>% datatable(options = list(dom = 'tp'))
```
I am using the code below to render a plot but the plot doesn't appear.
---
title: "Untitled"
author: "George"
date: "12/3/2018"
output:
flexdashboard::flex_dashboard:
orientation: rows
runtime: shiny
---
```{r global, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
library(flexdashboard)
library(dplyr)
library(GGally)
x <- c(1,2,3)
y <- c(11,22,33)
z <- data.frame(x, y)
```
Introduction
=======================================================================
### General info
- A
- B
Corr
=======================================================================
### Correlation
```{r include=TRUE, results='hide'}
renderPlot({
GGally::ggpairs(z)
})
```
I'd remove what you have in the chunk options:
```{r}
renderPlot({
GGally::ggpairs(z)
})
```
Im trying to figure out how to combine a grid layout, rowwise tabset and the ability to scroll in markdown / flexdashboard.
What I would like to achieve is that Tab 3 should be to the right of Tab 1 & 2 with the ability to scroll down to Tab 4-6 (where Tab 6 should be to the right of 4/5).
Something like this:
Is this possible?
---
title: "Test"
output:
flexdashboard::flex_dashboard:
orientation: row
vertical_layout: scroll
---
```{r setup, include=FALSE}
library(flexdashboard)
```
A {data-orientation=rows}
===================================================
Row {data-width=500 data-height=400 .tabset}
-----------------------------------------------------------------------
### Tab 1 {data-height=400 data-width=500}
```{r}
plot(rnorm(10))
```
### Tab 2 {data-height=400 data-width=500}
```{r}
plot(rnorm(10))
```
Column
-----------------------------------------------------------------------
### Tab 3 {data-height=400 data-width=300}
Some text
Row {data-width=500 data-height=400 .tabset}
-----------------------------------------------------------------------
### Tab 4 {data-height=400 data-width=500}
```{r}
plot(rnorm(10))
```
### Tab 5 {data-height=400 data-width=500}
```{r}
plot(rnorm(10))
```
Column
-----------------------------------------------------------------------
### Tab 6 {data-height=400 data-width=300}
Some text
Here is a possible solution to your problem
This is the code
---
title: "Test"
output: flexdashboard::flex_dashboard
---
```{r setup, include=FALSE}
library(flexdashboard)
require(shinydashboard)
require(shiny)
require(plotly)
```
A {data-orientation=rows}
===================================================
Row
-----------------------------------------------------------------------
```{r}
p1 <- plot_ly(x = 1:10, y = rnorm(10))
tabBox(width=5,tabPanel("Tab1", p1), tabPanel("Tab2"), height = "450px")
```
```{r}
tabBox(width=7, tabPanel("Tab3","Some text"), height = "450px")
```
Row
-----------------------------------------------------------------------
```{r}
p2 <- plot_ly(x = 1:10, y = rnorm(10))
tabBox(width=5, tabPanel("Tab4",p2), tabPanel("Tab5"), height = "450px")
```
```{r}
tabBox(width=7, id = "tabset4", tabPanel("Tab6","Some text"), height = "450px")
```