使 Shiny 中的两个数据表一起滚动，使列保持对齐

Question

我有一个很大的数据集。我仅提供下面数据的一小部分。

我构建了一个闪亮的应用程序，我想帮助用户将单个数据条目点与整个数据集进行比较，以便他们可以对整个数据集中的不同列进行过滤和排序，并查看单个条目的数据点如何数据对比。

大约有40列数据，我已经构建了应用程序，以便数据页面使用DT显示两个数据表。我想找到一种方法来对此进行编码，以便当您在其中一个数据表上向左或向右滚动时，另一个数据表也会遵循相同的滚动。本质上，列保持对齐。

我正在使用的应用程序有一个侧边栏，其中包含可应用于数据的过滤器和两个附加页面，我没有在此处包含这些页面，但这就是使用仪表板页面的原因

这是我的代码，当您向左或向右滚动时，当前只会滚动一个表格。 （您可能需要缩小窗口才能看到滚动条）

library(shiny)
library(DT)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPage(
  dashboardHeader(title = "Credit Analysis"),
  
  dashboardSidebar(),
  dashboardBody(
    DTOutput("table1"),
  DTOutput("table2"),
  tags$script(HTML("
    $(document).ready(function() {
      var table1 = $('#table1').DataTable();
      var table2 = $('#table2').DataTable();
      
      $('#table1').on('scroll', function() {
        $('#table2').scrollLeft($(this).scrollLeft());
      });
      
      $('#table2').on('scroll', function() {
        $('#table1').scrollLeft($(this).scrollLeft());
      });
    });
  "))
  )
)


server <- function(input, output, session) {
  names <- c("Alice", "Bob", "Charlie", "David", "Will", "Sarah", "Kelly")
  names1 <- "Joe"
  ages <- c(25, 30, 35, 40, 23, 44, 33)
  ages1 <- 37
  states <- c("NY", "CA", "IL", "TX", "NY", "TN", "MO")
  states1 <- "IL"
  cities <- c("New York", "Los Angeles", "Chicago", "Houston", "New York", "Nashville", "St Louis")
  cities1 <- "Chicago"
  homevalues <- c(700000, 1100000, 500000, 550000, 850000, 400000, 350000)
  homevalues1 <- 800000
  dependents <- c(0, 1, 1, 3, 0, 0, 1)
  dependents1 <- 2
  employed <- c("Yes", "Yes", "Yes", "No", "No", "Yes", "Yes")
  employed1 <- "Yes"
  incomes <- c(100000, 80000, 65000, 10000, 90000, 150000, 75000)
  incomes1 <- 60000
  creditScore <- c(550, 470, 670, 720, 540, 600, 780)
  creditScore1 <- 690
  
  data <- data.frame(Name = names, Age = ages, State = states, City = cities, Dependents = dependents, Job = employed, CS = creditScore, Income = incomes, Home = homevalues)
  singleData <- data.frame(Name = names1, Age = ages1, State = states1, City = cities1, Dependents = dependents1, Job = employed1, CS = creditScore1, Income = incomes1, Home = homevalues1)  
  
  output$table1 <- renderDT({
    datatable(singleData, options = list(dom = 't', scrollX = TRUE))
  })
  
  output$table2 <- renderDT({
    datatable(data, options = list(scrollX = TRUE))
  })
}

shinyApp(ui, server)

Answer 1

以下 JavaScript 对我有用

$(document).ready(function() {
                     
  function checkElement() {
    const table1 = document.querySelector('#table1 .dataTables_scrollBody');
    const table2 = document.querySelector('#table2 .dataTables_scrollBody');

    if (table1 && table2) {
    table1.addEventListener('scroll', () => table2.scrollLeft = table1.scrollLeft);
    table2.addEventListener('scroll', () => table1.scrollLeft = table2.scrollLeft);
    } else {
      setTimeout(checkElement, 100); // Check again after 100ms
    }
  }

  checkElement();
});