Remove all data tables using from highcharter export menu - r

Question

I am not sure if this is a bug or a feature of highcharter. I have a simple app which allow users to quickly see the data used to plot the chart. Let's say the user select the "View data table" option from the right menu. Once the data table appears, they then change one of the drop down inputs. A new set of data is plotted. The user then again select "View data table", and another set of data table appears.
Now if the user select "Hide data table", only one of the tables is removed. I wonder if there is a way to remove them all?
library(highcharter)
library(tidyverse)
library(shiny)
ui <- fluidPage(
selectInput("First", label = "First Variable", width = "100%",
choices = colnames(iris)),
selectInput("Second", label = "Second", width = "100%",
choices = colnames(iris)),
highchartOutput("hchartcont")
)
server = function(input, output) {
output$hchartcont <- renderHighchart({
df <- iris %>% select(x = input$First, y = input$Second)
hchart(df, "line", hcaes(x, y)) %>%
hc_exporting(enabled = TRUE)
})
}
shinyApp(ui = ui, server = server)

Answer 1

This is a workaround. When you update the chart, the table will be removed using htmlwidgets onRender().
Unfortunately, if the page is resized enough to trigger re-rendering, the table will be removed.
This is the updated output$highchartcont from your server.
output$hchartcont <- renderHighchart({
df <- iris %>% select(x = input$First, y = input$Second)
hchart(df, "line", hcaes(x, y)) %>%
hc_exporting(enabled = TRUE) %>%
htmlwidgets::onRender(
"function(el, x) {
Highcharts.addEvent(Highcharts.Chart, 'render', function() {
if($('div.highcharts-data-table').length) { /* does it exist? */
$('div.highcharts-data-table').remove(); /* then remove it */
}
});
}")})
If you weren't aware, you can style this table to make it more aesthetically pleasing. For example...
ui <- fluidPage(
tagList(
tags$style(HTML(
".highcharts-data-table tr:nth-child(even),
.highcharts-data-table thead tr {
background: #f8f8f8;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
border: 1px solid silver;
padding: 0.5em;
}
.highcharts-data-table tr {
cursor: pointer;
}
.highcharts-data-table tr:hover {
background: #eff;
}
.highcharts-data-table table {
border-collapse: collapse;
border-spacing: 0;
min-width: 200px;
max-width: 100%;
margin-top: 10px;
}")),
selectInput("First", label = "First Variable", width = "100%",
choices = colnames(iris)),
selectInput("Second", label = "Second", width = "100%",
choices = colnames(iris)),
highchartOutput("hchartcont")
))