DT after cell edit keep collapse/expand row status

Question

Initially, all rows are collapsed. The user is able to expand n rows and edit the cell values. In the provided sample, all rows are expanded after calling replaceData (or editData) within the cell_edit. Does DT (datatables) provide a way to keep the collapse/expand row status?

library(shiny)
library(DT)
ui <- fluidPage(# Application title
  titlePanel("Collapse/Expand table"),
  mainPanel(
    tabsetPanel(
      tabPanel("table1", dataTableOutput("my_table"))
    )
  ))

server <- function(input, output) {
  
  myData <- mtcars[1:15, 1:5]
  
  output$my_table <- DT::renderDataTable({
    datatable(
      myData,
      extensions = 'RowGroup',
      options = list(rowGroup = list(dataSrc = 3), pageLength = 20),
      callback = JS(
        "table.on('click', 'tr.dtrg-group', function () {",
        "  var rowsCollapse = $(this).nextUntil('.dtrg-group');",
        "  $(rowsCollapse).toggleClass('hidden');",
        "});",
        "table.one('init', () => $('#my_table .dtrg-group').trigger('click'))"
      ),
      selection = 'none',
      editable = 'cell'
    )
  })
  
  proxy = dataTableProxy("my_table")
  observeEvent(input$my_table_cell_edit, {
    info = input$my_table_cell_edit
    myData <<- editData(myData, info)
    replaceData(proxy, myData, resetPaging = FALSE, clearSelection = FALSE)
  })
}

# Run the application
shinyApp(ui = ui, server = server)

Answer 1

Add this code to the callback:

        "table.on('blur', 'input', function () {",
        "    var hidden = [];",
        "    $('#my_table tr.dtrg-group').each(function(i) {",
        "      var $this = $($(this).nextUntil('.dtrg-group'));",
        "      hidden.push($this.hasClass('hidden'));",
        "    });",
        "  setTimeout(function() {",
        "    $('#my_table tr.dtrg-group').each(function(i) {",
        "      var $this = $($(this).nextUntil('.dtrg-group'));",
        "      if(hidden[i]) {",
        "        $this.addClass('hidden');",
        "      }",
        "    });",
        "  }, 500);",
        "});",