Flexdashboard布局调整：合并Data标签下的子标签页面

问题 #

现有flexdashboard仪表盘，需调整Data标签下的子标签结构：将“Table Population”与“Graphic iris”两个子标签合并到同一页面（参考Analysis标签的列布局样式），同时保留“Another tab-page”子标签。当前仪表盘代码如下：

---
title: "Analysis"
output: 
  flexdashboard::flex_dashboard:
    #css: "custom_style.css"
    theme:
      base_font:
        google: Prompt
      code_font:
        google: JetBrains Mono
    orientation: columns
    vertical_layout: fill
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(shinyWidgets)
library(shinyjs)
library(gt)
library(gtExtras)
library(plotly)

useShinyjs(rmd = TRUE)

shinyWidgets::pickerInput(
  inputId = "select_species",
  label = h4("Species"),
  choices = unique(iris$Species),
  selected = unique(iris$Species[1]),
  multiple = TRUE,
  options = list(
    `actions-box`= TRUE,
    size = 10,
    `selected-text-format` = "count > 1"
  )
)

Column {data-width=650 .main .tabset} #

Here is some introduction text

IRIS Species {.tabset .tabset-fade} #

Table Population #

output$irisTable = render_gt({
  iris %>% 
    gt() %>% 
    gt_add_divider(columns = "Provincias", weight = px(3), color = "lightgrey", include_labels = FALSE)
})

div(style='height:800px; overflow-y: scroll',
    gt_output("populationTable")
)

Graphic iris #

renderPlotly({
  ggplotly(
    iris %>%
      ggplot(aes(x = Species, y = Petal.Length)) +
      geom_bar() +
      theme_bw()
  )
})

Another tab-page #

Column #

Tab 1 #

some text

Tab 2 #

some more text

## 解决方案
只需调整Data标签下的子标签结构，将表格和图表放入同一子标签的分栏布局中即可，修改后的完整代码如下：
```r
---
title: "Analysis"
output: 
  flexdashboard::flex_dashboard:
    #css: "custom_style.css"
    theme:
      base_font:
        google: Prompt
      code_font:
        google: JetBrains Mono
    orientation: columns
    vertical_layout: fill
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(shinyWidgets)
library(shinyjs)
library(gt)
library(gtExtras)
library(plotly)

useShinyjs(rmd = TRUE)

shinyWidgets::pickerInput(
  inputId = "select_species",
  label = h4("Species"),
  choices = unique(iris$Species),
  selected = unique(iris$Species[1]),
  multiple = TRUE,
  options = list(
    `actions-box`= TRUE,
    size = 10,
    `selected-text-format` = "count > 1"
  )
)

Column {data-width=650 .main .tabset} #

Here is some introduction text

IRIS Species {.tabset .tabset-fade} #

Table & Graphic #

Column {data-width=500} #

Table Population

output$irisTable = render_gt({
  iris %>% 
    gt() %>% 
    gt_add_divider(columns = "Provincias", weight = px(3), color = "lightgrey", include_labels = FALSE)
})

div(style='height:800px; overflow-y: scroll',
    gt_output("irisTable")
)

Column {data-width=500} #

Graphic iris

renderPlotly({
  ggplotly(
    iris %>%
      ggplot(aes(x = Species, y = Petal.Length)) +
      geom_bar(stat = "identity") +
      theme_bw()
  )
})

Another tab-page #

Column #

Tab 1 #

some text

Tab 2 #

some more text

### 关键调整说明
1. 新增`### Table & Graphic`子标签，内部通过两个`Column`分栏实现表格和图表的同页面并排展示
2. 修正原代码中`output$irisTable`与`gt_output("populationTable")`的ID不匹配问题，确保表格正常渲染
3. 给柱状图添加`stat="identity"`参数，保证图形基于现有数据正确绘制

内容的提问来源于stack exchange，提问作者user113156