How to format different rows differently in rhandsontable

Question

I'm building a user input table using rhandsontable( ) package. I'm trying to format some rows as integers and some as percentages, based on what I found in Row Numeric (Percent) Formatting in RHandsontable . But in that example only one row is integer formatted and the other row is percentage formatted. I need to format 2 rows as integers and 2 rows as percentages, as shown in the image below. In the code below I've tried different things like rhandsontable(...pct_row= c(2,3), int_row= c(0,1)...) but nothing seems to work. Any suggestions?

The user will never be able to add rows, but the user can add (and eventually delete) columns.

Code:

library(rhandsontable)
library(shiny)

mydata <- data.frame('Series 1' = c(1,2,3,4),check.names = FALSE)

rownames(mydata) <- c('Term A','Term B','Term C','Term D') 

ui <- fluidPage(
  rHandsontableOutput("mytable"),
  textInput('NewCol', 'Enter new column name'),
  actionButton("goButton", "Update Table")
)

server <- function(input, output) {

  output$mytable = renderRHandsontable(df())
  df <- eventReactive(input$goButton, {
    if(input$NewCol!="" && !is.null(input$NewCol) && input$goButton>0){
      newcol <- data.frame(NROW(mydata))
      names(newcol) <- input$NewCol
      mydata <<- cbind(mydata, newcol)
    }
    rhandsontable(mydata, 
                  rowHeaderWidth = 100, 
                  pct_row= 2, 
                  int_row= 0
                  )%>%
      
      hot_cols(
        colWidths = 80, 
        renderer = "function(instance, td, row, col, prop, value, cellProperties) {
           Handsontable.renderers.NumericRenderer.apply(this, arguments);
           if (instance.params && instance.params.pct_row === row) {
               td.innerHTML = `${Number.parseFloat(value*100)}%`
           } else if (instance.params && instance.params.int_row === row) {
               td.innerHTML = `${value}`
           }
         }"
        )
      
  }, ignoreNULL = FALSE)
  observe(if (!is.null(input$mytable)) mydata <<- hot_to_r(input$mytable))
}

shinyApp(ui,server)

Answer 1

Below is a solution in the java script section of the code under hot_cols(...) . This works fine for me because the number of rows are limited. This is an extension to include multiple rows of the solution provided in Row Numeric (Percent) Formatting in RHandsontable . Will continue fiddling to find a cleaner solution.

library(rhandsontable)
library(shiny)

mydata <- data.frame('Series 1' = c(1,2,3,4),check.names = FALSE)

rownames(mydata) <- c('Term A','Term B','Term C','Term D') 

ui <- fluidPage(
  rHandsontableOutput("mytable"),
  textInput('NewCol', 'Enter new column name'),
  actionButton("goButton", "Update Table")
)

server <- function(input, output) {

  output$mytable = renderRHandsontable(df())
  df <- eventReactive(input$goButton, {
    if(input$NewCol!="" && !is.null(input$NewCol) && input$goButton>0){
      newcol <- data.frame(NROW(mydata))
      names(newcol) <- input$NewCol
      mydata <<- cbind(mydata, newcol)
    }
    rhandsontable(mydata,rowHeaderWidth = 100)%>%
      
      hot_cols(
        colWidths = 80, 
        renderer = "function(instance, td, row, col, prop, value, cellProperties) {
           Handsontable.renderers.NumericRenderer.apply(this, arguments);
           if (instance.params && 0 === row || instance.params && 1 === row) {         // 0 & 1 for 1st 2 rows of table
               td.innerHTML = `${value}`
           } else if (instance.params && 2 === row || instance.params && 3 === row) {  // 2 & 3 for 2nd 2 rows of table
               td.innerHTML = `${Number.parseFloat(value*100)}%`
           }
         }"
        )
      
  }, ignoreNULL = FALSE)
  observe(if (!is.null(input$mytable)) mydata <<- hot_to_r(input$mytable))
}

shinyApp(ui,server)