0
375
VistasShiny/DT: mostrar filas secundarias tras la carga inicial
El problema: tengo un objeto DataTable en una aplicación Shiny que utiliza filas secundarias, en las que se puede hacer clic y expandir para mostrar información adicional sobre la fila. Sin embargo, no puedo entender cómo hacer que las filas secundarias estén visibles/expandidas cuando la tabla se carga inicialmente.
Cuando la aplicación se carga inicialmente, las filas secundarias están ocultas/cerradas y la tabla de datos se ve así:
Sin embargo, quiero que la carga inicial de la tabla imite cómo se ve cuando hago clic en el signo "+" para cada fila (que expande/muestra la fila secundaria)... por ejemplo:
Aquí hay un ejemplo con algunos datos ficticios:
# Load packages library(shiny) library(DT) # Set up dummy data frame. df = data.frame( expand_child_row = "⊕", col1 = c(1, 2, 3), col2 = c("a", "b", "c"), child_row_col = "additional_info" ) # Define app UI ui = shiny::fluidPage( DT::DTOutput(outputId = "example_table") ) # Define app server server = function(input, output) { output$example_table = DT::renderDataTable({ dt = DT::datatable( data = df, options = list( dom = "t", columnDefs = list( list(visible = FALSE, targets = 3), # Define options for child row column list(orderable = FALSE, className = 'details-control', targets = 0) ) ), rownames = FALSE, escape = FALSE, callback = DT::JS(" // Change mouse to pointer when hovering over expand plus sign table.column(0).nodes().to$().css({cursor: 'pointer'}); // Function to format the child row text var format = function(d) { return '<div style=\"background-color:#f9f7fe; padding: .5em;\"> ' + d[3] + '</div>'; }; // Function to toggle (show/hide) child row visibility upon click. table.on('click', 'td.details-control', function() { var td = $(this), row = table.row(td.closest('tr')); if (row.child.isShown()) { row.child.hide(); td.html('⊕'); } else { row.child(format(row.data())).show(); td.html('⊖'); } }); ") ) return(dt) }) } shiny::shinyApp(ui = ui, server = server)¿Alguien puede ayudarme a descubrir cómo obtenerlo para que la carga inicial de la tabla de datos aparezca mostrando todas las filas secundarias (como en la segunda imagen)?
¡Gracias!
1 Respuestas
Responde la pregunta0
Agregué un poco de js a continuación y logré lo que quieres.
asegúrese de que la palabra example_table en $("#example_table") DToutput con el ID de salida de DT.
# Load packages library(shiny) library(DT) # Set up dummy data frame. df = data.frame( expand_child_row = "⊕", col1 = c(1, 2, 3), col2 = c("a", "b", "c"), child_row_col = "additional_info" ) # Define app UI ui = shiny::fluidPage( DT::DTOutput(outputId = "example_table"), tags$script( ' $("#example_table").on("draw.dt", function(){ $(this).find("tbody tr td:first-child").trigger("click"); }) ' ) ) # Define app server server = function(input, output) { output$example_table = DT::renderDataTable({ dt = DT::datatable( data = df, options = list( dom = "t", columnDefs = list( list(visible = FALSE, targets = 3), # Define options for child row column list(orderable = FALSE, className = 'details-control', targets = 0) ) ), rownames = FALSE, escape = FALSE, callback = DT::JS(" // Change mouse to pointer when hovering over expand plus sign table.column(0).nodes().to$().css({cursor: 'pointer'}); // Function to format the child row text var format = function(d) { return '<div style=\"background-color:#f9f7fe; padding: .5em;\"> ' + d[3] + '</div>'; }; // Function to toggle (show/hide) child row visibility upon click. table.on('click', 'td.details-control', function() { var td = $(this), row = table.row(td.closest('tr')); if (row.child.isShown()) { row.child.hide(); td.html('⊕'); } else { row.child(format(row.data())).show(); td.html('⊖'); } }); ") ) return(dt) }) } shiny::shinyApp(ui = ui, server = server)