cell in rhansontable trigger modal with additional information
library(shiny) | |
library(htmltools) | |
library(rhandsontable) | |
library(dplyr) | |
rht <- rhandsontable( | |
head(mtcars) %>% | |
mutate(name = rownames(.)) %>% | |
select(name, everything()), | |
rowHeaders = NULL | |
) %>% | |
hot_table(contextMenu = FALSE, readOnly = TRUE) %>% | |
hot_col( | |
col = 1, | |
renderer = " | |
function(instance, td, row, col, prop, value, cellProperties) { | |
// convert the value into a anchor tag button | |
var btn = $('<a class=\"btn\" style=\"padding:0; verical-align:top;\">' + value + '</a>'); | |
// on click populate the modal and trigger it to show | |
btn.on('click', function() { | |
var rowData = instance.getDataAtRow(row); | |
var colHeaders = instance.getColHeader(); | |
var modal = $('#info-modal'); | |
// value will be the car name so make it our header | |
$('.modal-header h4').text(value); | |
// for demonstration purposes fill body will a line with each column header and the cell value | |
$('.modal-body', modal).html( | |
colHeaders.map(function(d,i) { | |
return d + ': ' + rowData[i] | |
}).join('<br/>') | |
) | |
// show the modal | |
$('#info-modal').modal(); | |
}); | |
// empty the cell and append button | |
$(td).empty().append(btn) | |
$(td).css({'vertical-align': 'top'}) | |
} | |
", | |
readOnly = TRUE | |
) | |
ui <- fluidPage( | |
rmarkdown::html_dependency_font_awesome(), | |
rht, | |
# set up our modal that we will use when triggered | |
tags$div( | |
id = "info-modal", | |
class = "modal fade", | |
role = "dialog", | |
tags$div( | |
class = "modal-dialog", | |
tags$div( | |
class = "modal-content", | |
tags$div( | |
class = "modal-header", | |
HTML('<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>'), | |
tag("h4", list(class="modal-title", "Modal Header")) | |
), | |
tags$div( | |
class = "modal-body" | |
), | |
tags$div( | |
class = "modal-footer", | |
tags$button(type = "button", class = "btn btn-default", `data-dismiss` = "modal", "Ok") | |
) | |
) | |
) | |
) | |
) | |
server <- function(input, output, session) { | |
} | |
shinyApp(ui,server) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.