Change backgorund color of cell of data table while its value is edited in Rshiny

Question

I have renderDatatable with editable=TRUE options, what i am looking for is when user modify any value of cell, the cell background color should change (say -"green"). it is necessary because end user can have an idea about the changes he/she has made to the table when he see later.

below is the code I am trying with

library(shiny)
library(shinydashboard)
library(tidyverse)
library(DT)
library(data.table)

header <- dashboardHeader(title = "demo")
sidebar <- dashboardSidebar(
  sidebarMenu(id = 'sidebarmenu',
              menuItem("admin", tabName = "admin", icon = icon("adjust"))
              
  )
)

body <- dashboardBody(
  tabItems(
    tabItem(
      tabName = 'admin', 
      fluidRow(
          dataTableOutput('userTable')
        
      )

    )
  )
)


ui <- dashboardPage(title = 'admin function test', header, sidebar, body, skin='blue')

server <- function(input, output, session){
  
  dat <- data.table::data.table(v1 = c(1,2,3), v2 = c(2,3,4), v3=c(4,5,8), v4=c("a","b","c"))

  ###Tracking Changes###
  rvs <- reactiveValues(
    data = NA, #dynamic data object,
    logical = NA
  )
  
  observe({
    rvs$data <- dat
  })
  
  
  observeEvent(input$userTable_cell_edit, {
    rvs$data <<- editData(rvs$data, input$userTable_cell_edit, rownames = FALSE,resetPaging = TRUE)
    
    ## below code is to keep track of cell that is edited
    
    rvs$logical  <<- rvs$data == dat 
    
  
  })
  
  
  output$userTable <- renderDataTable({
    #rvs$data[, v3 := v1+v2]
    DT::datatable(rvs$data,editable = TRUE,rownames = FALSE) %>% formatStyle(
      
      colnames(rvs$data),
      target = "cell",
      
      ## here I am trying to change background color of cell which has been 
      ## edited using refrence from TRUE/FALSE of matrix rvs$logical
      ## but it is not working
      backgroundColor = styleEqual( c(1,0), c('green', 'red') )
      
      
    )
                  
  })
  
}  
 

shinyApp(ui = ui, server = server)

Answer 1

library(shiny)
library(shinyjs)
library(DT)

js <- HTML(
  "function colorizeCell(i, j){
    var selector = '#dtable tr:nth-child(' + i + ') td:nth-child(' + j + ')';
    $(selector).css({'background-color': 'yellow'});
  }"
)

colorizeCell <- function(i, j){
  sprintf("colorizeCell(%d, %d)", i, j)
}

ui <- fluidPage(
  useShinyjs(),
  tags$head(
    tags$script(js)
  ),
  br(),
  DTOutput("dtable")
)

dat <- iris[1:5, ]

server <- function(input, output, session){
  
  output[["dtable"]] <- renderDT({
    datatable(dat, editable = TRUE, selection = "none")
  }, server = FALSE)
  
  observeEvent(input[["dtable_cell_edit"]], {
    info <- input[["dtable_cell_edit"]]
    i <- info[["row"]]
    j <- info[["col"]]
    runjs(colorizeCell(i, j+1))
  })
  
}

shinyApp(ui, server)