如何使 DT 的 Caption 小部件相对于 mainPanel 的宽度居中？

Question

我一直试图将标题保持在居中位置 - 相对于 window/mainPanel 的宽度。当我在宽表上折叠 sidebarPanel 时，标题才保持居中。但是当 sidebarPanel 未折叠时，与其他 DT 小部件不同，标题会更改其“位置”并出现在右侧。请协助。

这是一个代表：

global.R

options(scipen = 99999)

library(shiny)
library(shinyjs)
library(shinyWidgets)
library(dplyr)
library(DT)
library(htmltools)

xyz_query <- dplyr::bind_cols(mtcars, mtcars)

ui.R

fluidPage(
  
  shinyjs::useShinyjs(), 
  
  navbarPage( 
    
    id = "navbar",
    title= "xyz",
    windowTitle = "xyz test",
    
    tabPanel("Dataset",
             
             div(style="display:inline-block",shinyWidgets::materialSwitch(inputId = "toggleSidebar", label = "Filter Panel: ",
                                                                           value = TRUE, status = "warning")),
             
             sidebarLayout(
               sidebarPanel(
                 id = "Sidebar",
                 br(),
                 br()
                 
               ),
               mainPanel(
                 id = "main_panel",
                 DT::DTOutput('panel1_data')
        )
      )
    )
  )
)

server.R

function(input, output, session) {
  
  observeEvent(input$toggleSidebar, {
    shinyjs::toggle(id = "Sidebar", condition = input$toggleSidebar)
    if(!isTRUE(input$toggleSidebar)) {
      shinyjs::runjs("$('#main_panel').removeClass('col-sm-8').addClass('col-sm-12')")
    } else {
      shinyjs::runjs("$('#main_panel').removeClass('col-sm-12').addClass('col-sm-8')")
    }
    
  })
  
  output$panel1_data <- DT::renderDT(server = FALSE, {
    DT::datatable(xyz_query,
                  extensions = c('Buttons'),
                  caption = htmltools::tags$caption(style = 'caption-side: top; text-align: center; color:black; font-size:150% ;',
                                                     'MTCARS mtCARS mTcArS MTcars'),
                  options = list(scrollY = 600,
                                 scrollX = TRUE,
                                 dom =  '<"float-left"l><"float-right"f>rt<"row"<"col-sm-4"B><"col-sm-4"i><"col-sm-4"p>>',
                                 lengthMenu=  list(c(10, 25, 50, -1), 
                                                   c('10', '25', '50','All')),
                                 scrollCollapse= TRUE,
                                 lengthChange = TRUE, 
                                 widthChange= TRUE,
                                 rownames = TRUE))})
  
  
}

图片-

Answer 1

如果有办法使 table 标题在可见的 space 上居中，我将无能为力。不过，我可以提供替代的工作解决方案。

与其尝试将 table 的标题居中，不如在 table 之外添加一个标题。我将标题添加到 ui 中的 mainPanel。

下面的代码包括您的原始标题和我添加的内容。您可以在 post.

底部的前两张图片中看到它的渲染

在这个答案底部的第三张图片中，我删除了你的 table 标题。

library(shiny)
library(shinyjs)
library(shinyWidgets)
library(dplyr)
library(DT)
library(htmltools)

xyz_query <- dplyr::bind_cols(mtcars, mtcars)
shinyApp(
  ui <- fluidPage(
    shinyjs::useShinyjs(), 
    navbarPage( 
      id = "navbar",
      title= "xyz",
      windowTitle = "xyz test",
      tabPanel("Dataset",
               div(style="display:inline-block",shinyWidgets::materialSwitch(inputId = "toggleSidebar", label = "Filter Panel: ",
                                                    value = TRUE, status = "warning")),
               sidebarLayout(
                 sidebarPanel(
                   id = "Sidebar",
                   br(),
                   br()
                 ),
                               # this is where I added to your code
                 mainPanel(h3("MTCARS mtCARS mTcArS MTcars", align="center"),
                   id = "main_panel",
                   DT::DTOutput('panel1_data')
                 )
               )
      )
    )
  ),
  server <- function(input, output, session) {
    observeEvent(input$toggleSidebar, {
      shinyjs::toggle(id = "Sidebar", condition = input$toggleSidebar)
      if(!isTRUE(input$toggleSidebar)) {
        shinyjs::runjs("$('#main_panel').removeClass('col-sm-8').addClass('col-sm-12')")
      } else {
        shinyjs::runjs("$('#main_panel').removeClass('col-sm-12').addClass('col-sm-8')")
      }
    })
    output$panel1_data <- DT::renderDT(server = FALSE, {
      DT::datatable(xyz_query,
                    extensions = c('Buttons'),
                    caption = htmltools::tags$caption(style = 'caption-side: top; text-align: center; color:black; font-size:150% ;',
                                                      'MTCARS mtCARS mTcArS MTcars'),
                    options = list(scrollY = 600,
                                   scrollX = TRUE,
                                   dom =  '<"float-left"l><"float-right"f>rt<"row"<"col-sm-4"B><"col-sm-4"i><"col-sm-4"p>>',
                                   lengthMenu=  list(c(10, 25, 50, -1), 
                                                     c('10', '25', '50','All')),
                                   scrollCollapse= TRUE,
                                   lengthChange = TRUE, 
                                   widthChange= TRUE,
                                   rownames = TRUE))})
  }
)

如何使 DT 的 Caption 小部件相对于 mainPanel 的宽度居中？

How to keep DT's Caption widget centered relative to mainPanel's width?

r

shiny

shinydashboard

dt

shinyjs