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, потому что я не могу вернуть объект с данными.

Я также прочитал R shiny renderTable change cell colors, в котором есть очень интересное решение, но, учитывая мою версию R, кажется, что библиотека (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)

person Angelo    schedule 16.06.2020    source источник
comment
@SusanSwitzer отличный вопрос. Пожалуйста, позвольте мне объяснить. Моя настоящая цель - разместить в одной строке как небольшой участок, так и небольшую таблицу. Я попытался достичь этой цели с помощью fluidRow (column (3, plotlyOutput (outputId = retail_dashboard_plot1, width = '350', height = '350px')), column (3, offset = 0, dataTableOutput (retail_dashboard_ratios_table),)), но макет полностью испорчен   -  person Angelo    schedule 17.06.2020
comment
@SusanSwitzer в реальности tableOutput, вероятно, все, что мне нужно, я просто пытаюсь понять, как настроить границы. Пока мне удалось обновить код в пользовательском интерфейсе до: tableOutput (retail_dashboard_ratios_table), tags $ style (type = text / css, #retail_dashboard_ratios_table tr: last-child {font-weight: bold;}), и этот код, кажется, делает последняя строка жирная. (Нашел случайно в сети). Итак, я думаю, с помощью css есть способ настроить границу.   -  person Angelo    schedule 17.06.2020
comment
Попробуйте установить старую версию tableHTML   -  person Seyma Kalay    schedule 17.06.2020


Ответы (1)


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

)

Ниже приведен вывод кода:  введите описание изображения здесь

person patalt    schedule 17.06.2020
comment
Спасибо, Патрик. Пожалуйста, позвольте мне один уточняющий вопрос. Я проверил веб-страницу, и класс, назначенный элементу таблицы, - это shiny-html-output shiny-bound-output. Затем я попытался использовать: теги $ style (HTML ('. Shiny-html-output shiny-bound-output {border-collapse: collapse; font-size: 20px; color: red;})), но это изменение влияет на все таблицы в моем блестящем приложении. Есть ли способ избежать этого? - person Angelo; 17.06.2020
comment
Спасибо, @Angelo, я отредактировал ответ. Второй пример делает то, чего вы хотите достичь. Вместо того, чтобы перезаписывать стиль по умолчанию для всех таблиц, в этом случае вы хотите создать собственный класс для этой отдельной таблицы. Это будет работать точно так же для тега стиля, который вы предлагаете в своем комментарии. Пользовательский класс можно повторно использовать в любом месте приложения таким же образом. Если вы начнете добавлять больше CSS в свое приложение, вам следует подумать о том, чтобы просто поместить весь этот код CSS в таблицу стилей. Надеюсь это поможет! - person patalt; 17.06.2020
comment
спасибо за помощь до сих пор! То, что вы показываете в коде, имеет для меня смысл, но почему-то, когда я проверяю другие таблицы, они теперь показывают тот же формат, что и класс .my_table. Возможно, чего-то не хватает? - person Angelo; 17.06.2020
comment
Хм, это очень странно, я добавил картинку вывода, произведенного моим кодом. Вы пробовали скопировать код в консоль R и запустить его? Я попытался сделать еще понятнее, как назначать класс CSS (а где не делать). Надеюсь, это проясняет это! - person patalt; 17.06.2020
comment
Привет, Патрик, я отвечу на 95% всего кода в моем первоначальном вопросе. Я использую ту же логику, и две таблицы, которые я печатаю на одной странице, имеют один и тот же формат, хотя это не должно быть так. - person Angelo; 17.06.2020
comment
извините за то, что свел вас с ума. Я буквально удалил большинство бесполезных вещей в своем коде и вставил то, что у меня есть, в свой первоначальный вопрос выше. Если я запустил приложение, и retail_dashboard_ratios_table, и retail_dashboard_table2 будут отображать точно такой же формат. - person Angelo; 17.06.2020
comment
Я не знаю, что еще делать, @Angelo. Вы можете убедиться, что мой код работает, возможно, начните с него и адаптируйте его к вашему варианту использования. - person patalt; 17.06.2020
comment
Извините, я только сейчас вижу, что вы добавили дополнительный код. Я далеко от своего ноутбука, но посмотрю позже, если вам удастся решить эту проблему к тому времени. - person patalt; 17.06.2020
comment
Я запускаю ваш класс, и он отлично работает, похоже, что-то из-за моего определения класса. Возможно, поскольку я определяю фоновые цвета заголовков и строк, это где-то вызывает конфликт? - person Angelo; 18.06.2020
comment
Патрик, подтверждаю, что моему сценарию не нравится то, что я настраиваю заголовок и строки таблицы: / как вы думаете, это легко исправить? - person Angelo; 18.06.2020
comment
Я починил это! Мне просто нужно было добавить .my_table_aa01 к каждому элементу таблицы, которую я хочу настроить. БОЛЬШОЕ СПАСИБО, Патрик !!! - person Angelo; 18.06.2020
comment
@Angelo здорово, что ты понял это! Рад, что смог помочь - person patalt; 18.06.2020