如何制作紧凑的Shiny仪表盘？解决空间冗余与标签混乱问题

核心问题修正与优化方向 #

• 冗余嵌套标签页：原代码中每个主标签页嵌套不必要的tabsetPanel，直接造成空间浪费
• 标签页内容错误：SixCylinder标签页误引用了4缸表格的输出控件
• DT表格默认样式松散：未开启紧凑模式，行高、内边距默认值过大
• 页面默认padding冗余：fluidPage自带的上下左右padding占用额外空间
• 标签区分度不足：未给不同类别标签页设置差异化样式

优化后的完整代码 #

library(bslib)
library(shiny)
library(DT)
library(data.table)
library(dplyr)

# 预处理数据（修正原代码中dt_mtcars未定义的问题，直接用mtcars）
dt_mtcars <- data.table(mtcars)
dt_4cyl <- dt_mtcars %>% filter(cyl == 4)
dt_6cyl <- dt_mtcars %>% filter(cyl == 6)
dt_8cyl <- dt_mtcars %>% filter(cyl == 8)

# 自定义紧凑主题
custom_theme <- bs_theme(
    version = 5,
    bg = "#FFFFFF",
    fg = "#000000",
    primary = "#0199F8",
    secondary = "#FF374B",
    base_font = "Maven Pro",
    # 全局紧凑化字体设置
    code_font_size = "0.8rem",
    heading_font_size = "1rem",
    body_font_size = "0.9rem"
) %>% 
  # 覆盖默认padding和间距
  bs_add_rules(
    "
    .tab-content {padding: 0.5rem !important;}
    .nav-tabs .nav-link {padding: 0.3rem 0.8rem;}
    .container-fluid {padding-left: 0.5rem; padding-right: 0.5rem;}
    body {margin: 0;}
    /* 为不同标签页设置差异化样式 */
    .nav-tabs .nav-link[data-value='FourCylinder'] {border-left: 3px solid #0199F8;}
    .nav-tabs .nav-link[data-value='SixCylinder'] {border-left: 3px solid #28a745;}
    .nav-tabs .nav-link[data-value='EightCylinder'] {border-left: 3px solid #FF374B;}
    "
  )

server <- function(input, output, session) {
    # DT表格开启紧凑模式，关闭冗余控件
    output$dt_4cyl_op <- renderDT(dt_4cyl, 
                                  options = list(
                                      dom = 't', # 仅保留表格内容
                                      paging = FALSE,
                                      searching = FALSE,
                                      ordering = FALSE,
                                      info = FALSE,
                                      autoWidth = TRUE,
                                      columnDefs = list(list(className = 'dt-center', targets = "_all"))
                                  ),
                                  class = "compact stripe nowrap") # 紧凑样式类
    
    output$dt_6cyl_op <- renderDT(dt_6cyl, 
                                  options = list(
                                      dom = 't',
                                      paging = FALSE,
                                      searching = FALSE,
                                      ordering = FALSE,
                                      info = FALSE,
                                      autoWidth = TRUE,
                                      columnDefs = list(list(className = 'dt-center', targets = "_all"))
                                  ),
                                  class = "compact stripe nowrap")
    
    output$dt_8cyl_op <- renderDT(dt_8cyl, 
                                  options = list(
                                      dom = 't',
                                      paging = FALSE,
                                      searching = FALSE,
                                      ordering = FALSE,
                                      info = FALSE,
                                      autoWidth = TRUE,
                                      columnDefs = list(list(className = 'dt-center', targets = "_all"))
                                  ),
                                  class = "compact stripe nowrap")
}

ui <- fluidPage(
    theme = custom_theme,
    # 移除冗余嵌套，直接在主标签页挂载表格输出
    tabsetPanel(
        tabPanel("FourCylinder", DTOutput("dt_4cyl_op")),
        tabPanel("SixCylinder", DTOutput("dt_6cyl_op")), # 修正原代码的内容错误
        tabPanel("EightCylinder", DTOutput("dt_8cyl_op"))
    )
)

shinyApp(ui = ui, server = server)

关键优化说明 #

• 移除冗余嵌套：删除每个主标签页内的tabsetPanel，减少层级占用空间
• DT表格紧凑化：使用compact样式类压缩行高与内边距，关闭分页、搜索等非必要控件
• 全局样式调整：通过bs_add_rules修改页面、标签页的padding和间距，消除不必要留白
• 标签区分度提升：为不同缸数的标签页添加左侧彩色边框，直观区分类别
• 修正内容错误：将SixCylinder标签页的表格输出改为对应6缸数据的控件

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