Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/example.R

Created July 3, 2020 22:40
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save timelyportfolio/7908af947092bdd63e49598331ff17b2 to your computer and use it in GitHub Desktop.
Save timelyportfolio/7908af947092bdd63e49598331ff17b2 to your computer and use it in GitHub Desktop.
Download ZIP
cell in rhansontable trigger modal with additional information
Raw
example.R
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">&times;</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)
@timelyportfolio
Copy link
Author

rhandsontable_modal

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment