R Shiny renderTable - как изменить ширину и цвет границ - PullRequest
Новая
       110

R Shiny renderTable - как изменить ширину и цвет границ

1 голос
/ 17 июня 2020

У меня, вероятно, есть простой вопрос, но поскольку я не очень хорошо знаком с CSS / htlm, мне трудно решить следующую проблему. В моем пользовательском интерфейсе у меня есть следующая простая таблица: 

tableOutput("retail_dashboard_ratios_table")

на сервере, у меня очень простой код: 

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

Все, что мне нужно сделать, это установить границы ширина и цвет границ (до синего). Обязан использовать версию R 3.4. Поскольку у меня есть stati c tableOutput, я не могу (по-видимому) использовать решение, упомянутое в Добавить границы ячеек в R Datatable , потому что я не могу вернуть объект с данными.

Я также читал R блестящий renderTable изменяет цвета ячеек , который имеет очень интересное решение, но с учетом моей версии R кажется, что библиотека (таблица HTML) несовместима.

Интересно, есть ли у кого-нибудь простой решение просто исправить границы. Спасибо

Спасибо @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)

1 Ответ

1 голос
/ 17 июня 2020

Более элегантное решение, вероятно, будет работать с таблицей стилей, но если вы пытаетесь стилизовать только одну таблицу, вы можете просто добавить 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)
    })
  }

)

Edit

Если вы хотите установить стиль только для одной таблицы, а не для всех таблиц в вашем приложении, вам необходимо создать для него свой собственный класс CSS. Вы можете довольно легко указать имя класса четыре, просто написав, например, .my_table или #my_table перед существующим кодом CSS выше. Итак, чтобы завершить приведенный выше пример, но теперь с индивидуальным стилем: 

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)
    })
  }

)

Ниже приведен результат, который производит код: enter image description here

...