R Brillante - Hacer fila de encabezado adicional de mesa Kable 'pegajosa'

Thomas Neitmann:

El kableExtrapaquete tiene una gran función llamada add_header_above()que crea una fila de encabezado adicional en la tabla de salida en la parte superior de los nombres de las columnas reales. Esto puede ser muy útil para agrupar datos. Al establecer fixed_thead = TRUEen kable_styling()los nombres de las columnas reales se congelan cuando se desplaza hacia abajo, pero esta fila de encabezado adicional no es.

Aquí está una mínima shinyaplicación que muestra lo que significan. Tenga en cuenta que si ve la aplicación en el visor rstudio ni el encabezado de la columna normal, ni los adicionales son pegajosas. Ejecutarlo en un navegador web adecuada en su lugar.

library(shiny)
library(magrittr)

ui <- fluidPage(
  tableOutput("table")
)

server <- function(input, output, session) {
  output$table <- function() {
    knitr::kable(mtcars) %>%
      kableExtra::kable_styling(fixed_thead = TRUE) %>%
      kableExtra::add_header_above(c(" " = 1, "Header 1" = 5, "Header 2" = 6))
  }
}

shinyApp(ui, server)

Cómo hacer que la fila de encabezado adicional creada con add_header_above()pegajosa? Supongo que tendría que incorporar un poco de CSS o JavaScript en la aplicación para hacerlo.

mayrop:

La inspiración viene de @ respuesta de Stéphane Laurent. A continuación se muestra un enfoque más genérico para la aplicación de la propiedad pegajosa a cualquier número de cabeceras.

library(shiny)
library(magrittr)

JS <- "
$(document).ready(function() {
  var myInterval = setInterval(function() {
    // clear interval after the table's DOM is available
    if ($('thead').length) {
      clearInterval(myInterval);
    }

    // setting css
    $('thead tr th').css('position', 'sticky').css('background', 'white');

    var height = 0;

    for (var i = 0, length = $('thead tr').length; i < length; i++) {
      var header = $('thead tr:nth-child(' + i + ')');
      height += header.length ? header.height() : 0;
      $('thead tr:nth-child(' + (i + 1) + ') th').css('top', height);
    }

  }, 500);
});
"

ui <- fluidPage(
  tags$head(
    tags$script(HTML(JS))
  ),
  tableOutput("table")
)

server <- function(input, output, session) {
  output$table <- function() {
    knitr::kable(mtcars) %>%
      kableExtra::add_header_above(c(" " = 1, "Header 1" = 5, "Header 2" = 6)) %>%
      kableExtra::add_header_above(c(" " = 1, "Header" = 11)) %>%
      kableExtra::kable_styling()
  }
}

shinyApp(ui, server)

Si no quiere que su principal app.Rpara tener todo lo que Javascript, puede mover el código a un archivo diferente, consulte: Incluir un archivo JavaScript en brillante aplicación .