R Shiny renderTable-如何更改边框的宽度和颜色

安杰洛

我可能有一个简单的问题,但是由于我对CSS / htlm不太熟悉,因此很难找出以下问题。在我的用户界面中,我有以下简单表格:

tableOutput("retail_dashboard_ratios_table")

在服务器中,我有以下非常简单的代码:

output$retail_dashboard_ratios_table <- renderTable({  #
df <- head(mtcars)
})

我需要做的就是设置边框的宽度和边框的颜色(为蓝色)。我不得不使用R 3.4版本。因为我有一个静态的tableOutput,所以我(显然)不能使用R Datatable的Add Cell Borders中提到的解决方案,因为我不能返回datatable对象。

我还阅读了R闪亮的renderTable更改单元格颜色,这是一个非常有趣的解决方案,但是考虑到我的R版本,似乎library(tableHTML)不兼容。

我想知道是否有人有简单的解决方案来解决边界问题。谢谢


感谢@Patrick Altmeyer,这是最终的解决方案!

source("global.R") 

today <- as.character()

ui <- dashboardPage(  
  title = "Dashboard of the Municipal Market",  # this is the name of the tab in Chrome browserr
  dashboardHeader(title = "Web Portal"),

  dashboardSidebar(   
    sidebarMenu(

      menuItem('Retail', tabName = "retail", icon = icon("th"),
               menuItem('Dashboard', tabName = 'retail_dashboard'))
    )
  ),

  dashboardBody( 
      tabItem(tabName = "retail_dashboard",
              tabsetPanel(type = "tabs",
                          tabPanel("Dashboard",
                                   h3("Test."),

                                   tags$head(
                     tags$style(HTML("
                                                .my_table_aa01 .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
                                                border-collapse: collapse;
                                                }

                                                .my_table_aa01 th {
                                                 border: 1px solid black !important;
                                                 text-align: center !important;
                                                 vertical-align: middle !important;
                                                 color: white !important;
                                                 background-color: #615858 !important;
                                                 white-space: nowrap;
                                                 border-bottom: none}

                                                .my_table_aa01 td {padding: 1rem;
                                                border: 1px solid black;}

                                                .my_table_aa01 tr:first-child {
                                                  border : 1px solid black;
                                                 border-top: 1px solid black;}

                                                 .my_table_aa01 tr:nth-child(even){
                                                 background-color: #afd19d;
                                                 color: black;
                                                 font-size:16px;}

                                                 .my_table_aa01 tr:nth-child(odd){
                                                 background-color: white;
                                                 color: black;
                                                 font-size:16px;
                                                 }
                                                "))),

                                   fluidRow(column(2,
                                                   actionButton(inputId = "retail_dashboard_load_data_btn", label = "Load / Refresh Data")),
                                            column(2,
                                                   downloadButton("download_dashboard_data","Download Data"))),

                                   fluidRow(
                                     column(2, 
                                            dateInput("retail_dashboard_start_dt", label = ("Start Date"), value = glob_date_1yr_ago)),
                                     column(2, 
                                            dateInput("retail_dashboard_end_dt", label = ("End Date"), value = glob_previous_to_most_recent_date_with_quant_model_regression_data))
                                   ),


                                   br(),
                                   fluidRow(column(6,
                                                   div(textOutput(outputId = "retail_dashboard_error_log")))),
                                   br(),

                                   fluidRow(column(3,
                                                   plotlyOutput(outputId = "retail_dashboard_plot1", width = '350', height = '350px')),
                                            column(3,
                                                   offset = 0,
                                                   tags$div(
                                                     class="my_table_aa01", # set to custom class
                                                     tableOutput("retail_dashboard_ratios_table") )


                                            )),
                                   fluidRow(column(3,
                                                   tableOutput("retail_dashboard_table2")))
                                     )
                                     )             
              )
              )
)


server <- function(input, output, session) {    
  source("Page_retail_dash.R", local=T) 


}

cat("\nLaunching   'shinyApp' ....")
shinyApp(ui, server)
pat

一种更优雅的解决方案可能适用于样式表,但是如果您只是要对一个表进行样式设置,则可以将CSS如下所示简单地添加到HTML标头中。有关此的更多信息,请参见此处我发现棘手的部分通常是在这种情况下知道要覆盖哪个类.table>tbody>tr>td, ...但是,找到所需内容的一种简单方法是在运行时检查HTML,例如,在Google Chrome浏览器中,您可以右键单击+“检查”浏览器窗口中的任何位置(最好靠近您要设置样式的元素)。然后,您可以在运行时在浏览器中编辑样式,以预览对CSS所做的更改将如何影响应用程序的外观。我对CSS也不是很熟悉,但是这种方法通常会让我受益匪浅。

希望这可以帮助!

shinyApp(

  # --- User Interface --- #

  ui = fluidPage(

    # The below overwrites the default styling for the top border of table cells. 
    # I've changed the colour to blue from grey and the width to 3px from 1px.
    tags$head(
      tags$style(HTML("
      .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: top;
        border-top: 3px solid blue; 
      }
    "))
    ),

    mainPanel(
      tableOutput("retail_dashboard_ratios_table")
    )

  ),

  # --- Server logic --- #

  server = function(input, output) {
    output$retail_dashboard_ratios_table <- renderTable({  #
      df <- head(mtcars)
    })
  }

)

编辑

如果您只想为一个表而不是应用程序中的所有表设置样式,则需要为其创建自己的CSS类。您可以通过简单地在上面的现有CSS代码中编写例如.my_table来轻松地提供名称四类#my_table因此,要完成上述示例,但现在要进行个性化设置:

shinyApp(

  # --- User Interface --- #

  ui = fluidPage(

    # The below now creates a custum css class. 
    tags$head(
      tags$style(HTML("
      .my_table .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: top;
        border-top: 3px solid blue; 
      }
    "))
    ),

    mainPanel(
      h3("Custom style table:"),
      tags$div(
        class="my_table", # set to custom class
        tableOutput("custom_table")
      ),
      h3("Default style table:"),
      tableOutput("default_table"), # No class assigned
      h3("Another default style table:"),
      tableOutput("another_default_table") # No class assigned
    )

  ),

  # --- Server logic --- #

  server = function(input, output) {
    output$custom_table <- renderTable({  #
      df <- head(mtcars)
    })

    output$default_table <- renderTable({  #
      df <- head(iris)
    })

    output$another_default_table <- renderTable({  #
      df <- head(cars)
    })
  }

)

下面是代码产生的输出: 在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Latex,RenderTable in Shiny,R

来自分类Dev

如何格式化Shiny renderTable?

来自分类Dev

如何创建Shiny R动态renderTable,并使用上载CSV文件确定的表数量?

来自分类Dev

R Shiny在新标签页中打开renderTable中的URL

来自分类Dev

R renderTable和renderDataTable之间的不同输出

来自分类Dev

R renderTable和renderDataTable之间的不同输出

来自分类Dev

R Shiny:如何更改页眉的背景颜色?

来自分类Dev

R Shiny:如何更改表格的背景颜色

来自分类Dev

如何在R Shiny中更改SelectInput周围区域的宽度

来自分类Dev

使对象在Shiny外部renderPlot中可用于renderTable

来自分类Dev

如何更改帮助文本的颜色R Shiny

来自分类Dev

在R Shiny中更改通知的颜色

来自分类Dev

更改R Shiny中selectizeInput选项的颜色

来自分类Dev

R Shiny和ggplot2:如何使geom_col的边框透明?

来自分类Dev

R Shiny + plotly:使用 javascript 更改轨迹颜色而不影响多个图中的标记和图例

来自分类Dev

使Highchart R成为Shiny中盒子的完整宽度和高度

来自分类Dev

如何在R Shiny中更改框的折叠/展开按钮的颜色?

来自分类Dev

如何在R Shiny中为列设置小数宽度?

来自分类Dev

如何在 R Shiny 中对 timevis 绘图进行颜色编码

来自分类Dev

R Markdown与Shiny Server更改主机参数

来自分类Dev

R Shiny:更改 uiOutput 包装器

来自分类Dev

如何在R中使用par函数更改线条的颜色和宽度

来自分类Dev

R和Shiny:使用反应函数的输出

来自分类Dev

R和Shiny:使用反应函数的输出

来自分类Dev

R Shiny reactValues()和invalidateLater()的奇怪行为

来自分类Dev

结合R Shiny和googlevis运动图

来自分类Dev

R Shiny-tabPanel和输出

来自分类Dev

R Shiny - 旋转 tabPanel 和 onclick 功能

来自分类Dev

R Shiny 和 Darksky API 错误的组合

Related 相关文章

  1. 1

    Latex,RenderTable in Shiny,R

  2. 2

    如何格式化Shiny renderTable?

  3. 3

    如何创建Shiny R动态renderTable,并使用上载CSV文件确定的表数量?

  4. 4

    R Shiny在新标签页中打开renderTable中的URL

  5. 5

    R renderTable和renderDataTable之间的不同输出

  6. 6

    R renderTable和renderDataTable之间的不同输出

  7. 7

    R Shiny:如何更改页眉的背景颜色?

  8. 8

    R Shiny:如何更改表格的背景颜色

  9. 9

    如何在R Shiny中更改SelectInput周围区域的宽度

  10. 10

    使对象在Shiny外部renderPlot中可用于renderTable

  11. 11

    如何更改帮助文本的颜色R Shiny

  12. 12

    在R Shiny中更改通知的颜色

  13. 13

    更改R Shiny中selectizeInput选项的颜色

  14. 14

    R Shiny和ggplot2:如何使geom_col的边框透明?

  15. 15

    R Shiny + plotly:使用 javascript 更改轨迹颜色而不影响多个图中的标记和图例

  16. 16

    使Highchart R成为Shiny中盒子的完整宽度和高度

  17. 17

    如何在R Shiny中更改框的折叠/展开按钮的颜色?

  18. 18

    如何在R Shiny中为列设置小数宽度?

  19. 19

    如何在 R Shiny 中对 timevis 绘图进行颜色编码

  20. 20

    R Markdown与Shiny Server更改主机参数

  21. 21

    R Shiny:更改 uiOutput 包装器

  22. 22

    如何在R中使用par函数更改线条的颜色和宽度

  23. 23

    R和Shiny:使用反应函数的输出

  24. 24

    R和Shiny:使用反应函数的输出

  25. 25

    R Shiny reactValues()和invalidateLater()的奇怪行为

  26. 26

    结合R Shiny和googlevis运动图

  27. 27

    R Shiny-tabPanel和输出

  28. 28

    R Shiny - 旋转 tabPanel 和 onclick 功能

  29. 29

    R Shiny 和 Darksky API 错误的组合

热门标签

归档