jrowen / rhandsontable

A htmlwidgets implementation of Handsontable.js
http://jrowen.github.io/rhandsontable/
Other
385 stars 148 forks source link

Is it possible to add a comment to a column header? #411

Open hjia222 opened 2 years ago

pepijn-devries commented 2 years ago

Yes, see the handsontable documentation: https://handsontable.com/docs/migration-from-8.4-to-9.0/#header-tooltips

hjia222 commented 2 years ago

@pepijn-devries Thanks! Sorry that I only know R and rhandsontable, how does this translate to rhandsonable code in R. And I read Header Tooltips only display header that is too long show the whole thing. Is this afterGetColHeader doing the similar thing? What I'm looking for is show something other than the header text, i.e. an explanation. Would this afterGetColheader work for this purpose?

pepijn-devries commented 2 years ago

This gist shows you how to do it in R: https://gist.github.com/timelyportfolio/b8001318ce3e25b6920a0f20e9db374e

hjia222 commented 2 years ago

@pepijn-devries Thank you very much for the example! It worked perfect for stand alone table. I hope there is also a solution for usage in R Shiny App.

pepijn-devries commented 2 years ago

@hjia222 there is no reason why the example wouldn't work in a Shiny app. You only need to add the javascripts to the header of the Shiny app's page, in order to make it available to the client's side (i.e., the end-users browser).

Here is how I modified the code by (all credits go to:) @timelyportfolio to work in a Shiny app.

library(shiny)
library(rhandsontable)
library(htmltools)
library(htmlwidgets)
library(jsonlite)

ui <- fluidPage(
  # use tippy/bootstrap since Bootstrap 3 tooltips are awful
  #   and don't place nicely with handsontable
  # better with htmlDependency but this works fine
  tags$head(
    tags$script(src = "https://unpkg.com/@popperjs/core@2"),
    tags$script(src = "https://unpkg.com/tippy.js@6")
  ),
  rhandsontable(
    data = mtcars,
    rowHeaders = NULL,
    # see http://jsfiddle.net/pn3rv48p/ for another example with afterGetColHeader
    afterGetColHeader = htmlwidgets::JS(htmltools::HTML(
      sprintf(
        "
function(i, TH) {
  var titleLookup = %s;
  // destroy previous tippy instance if it exists
  if(TH.hasOwnProperty('_tippy')) {TH._tippy.destroy()}
  // initialize tooltip and set content to description from our titleLookup
  tippy(TH, {
    content: titleLookup[i].desc,
  });
}
",
# use column information from ?mtcars
# sprintf will place this json array of objects in our script above at %s
jsonlite::toJSON(
  read.delim(
    textConnection('
[, 1]   mpg Miles/(US) gallon
[, 2]   cyl Number of cylinders
[, 3]   disp    Displacement (cu.in.)
[, 4]   hp  Gross horsepower
[, 5]   drat    Rear axle ratio
[, 6]   wt  Weight (1000 lbs)
[, 7]   qsec    1/4 mile time
[, 8]   vs  Engine (0 = V-shaped, 1 = straight)
[, 9]   am  Transmission (0 = automatic, 1 = manual)
[,10]   gear    Number of forward gears
[,11]   carb    Number of carburetors'
    ),
    header = FALSE,
    col.names = c("loc","id","desc"),
    stringsAsFactors = FALSE
  ),
  auto_unbox = TRUE
)
      )
    )
    )
  )
)

server <- function(input, output, session) {

}

shinyApp(ui, server)
hjia222 commented 2 years ago

@pepijn-devries That's fantastic! Really appreciate the example.