Заголовки столбцов не совпадают с остальной частью таблицы

Учитывая приведенный ниже код R Shiny:

library(shiny)
library(DT)

# Define the user interface (UI)
ui <- fluidPage(
  titlePanel("test"),
  
  sidebarLayout(
    sidebarPanel(
      fileInput("file1", "Choose File 1", accept = ".csv"),
      fileInput("file2", "Choose File 2", accept = ".csv")
    ),
    
    mainPanel(
      tabsetPanel(
        tabPanel("Table 1", DT::dataTableOutput("table1")),
        tabPanel("Table 2", DT::dataTableOutput("table2"))
      )
    )
  )
)

# Define the server logic
server <- function(input, output) {
  
  # Reactive expression to read the first CSV file
  data1 <- reactive({
    req(input$file1)
    read.csv(input$file1$datapath)
  })
  
  # Reactive expression to read the second CSV file
  data2 <- reactive({
    req(input$file2)
    read.csv(input$file2$datapath)
  })
  
  # Render the first CSV file table
  output$table1 <- renderDataTable({
    data1()
  }, rownames = FALSE, options = list(scrollX = TRUE,
                                      autoWidth = TRUE,
                                      columnDefs = list(list(width = 'auto', targets = "_all")))
  )
  
  # Render the second CSV file table
  output$table2 <- renderDataTable({
    data2()
  }, rownames = FALSE, options = list(scrollX = TRUE,
                                      autoWidth = TRUE,
                                      columnDefs = list(list(width = 'auto', targets = "_all")))
  )
}

# Run the Shiny app
shinyApp(ui = ui, server = server)

Как только я загружаю файл в приложение, отображаемая таблица имеет несовпадение между заголовками и остальной частью таблицы. Как я могу это исправить?

Интересно, что это «исправлено», если я перейду на вкладку, а затем снова нажму на вкладку с проблемой.

Сразу после загрузки файла:

После нажатия на вкладку «Таблица 2» и возврата к вкладке «Таблица 1»:

Это также происходит, если вы загружаете что-то с более чем одним столбцом? Можно ли удалить scrollX = TRUE или autoWidth = TRUE? Это решает проблему.

Jan 29.05.2024 20:16

@Jan Да, это также происходит с таблицами с двумя или более столбцами. Удаление scrollX = TRUE или autoWidth = TRUE, к сожалению, невозможно, так как в этом случае таблицы не будут правильно настроены. Я изначально включил scrollX = TRUE, так как если я этого не сделаю, произойдет что-то смешное. Если я не использую scrollX = TRUE, а только autoWidth = TRUE, корректируется только первая отображаемая таблица - любая последующая отображаемая таблица не будет соответствовать тому, что установлено в columnDefs

Omar Velazquez 30.05.2024 10:21
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
2
70
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете создать контейнер с центрированным содержимым, в частности, заголовок таблицы должен быть центрирован. Поэтому вы можете, например. замените tabPanel("Table 1", DT::dataTableOutput("table1")) на

tabPanel("Table 1",
         fluidRow(column(
           align = "center",
           width = 12,
           DT::dataTableOutput("table1")
         )))

и тогда это будет выглядеть правильно:

добавление align = "center" решило проблему!

Omar Velazquez 31.05.2024 12:16

Другие вопросы по теме