Delete DataTable rows in Shiny app using Javascript

Question

I'm trying to remove rows from a Datatable in a Shiny app using Javascript. In the table I have a column with a "delete" button for each row. This would be more or less what I'm trying to do, but I can't get it to work.

In my server.R:

  initComplete <- DT::JS(
    "function  () {",
    "  var table = this.api();",
    "  $('#delete_button').on('click', function() {",
    "    table.row($(this).parents('tr')).remove().draw();",
    "  });",
    "}"
  )


  shinyInput <- function(FUN, len, id, ...) {
    inputs <- character(len)
    for (i in seq_len(len)) {
      inputs[i] <- as.character(FUN(paste0(id, i), ...))
    }
    inputs
  }

  output$under_list <- renderDataTable({
    list_under <- getListUnder() # this is a reactive
    list_under$Delete <- shinyInput(actionButton, nrow(list_under),'delete_',label = "Delete",icon=icon("trash"),
                                    style = "color: red;background-color: white",
                                    onclick = paste0("Shiny.setInputValue( \"delete_button\" , this.id, {priority: \"event\"})"))
    table <- list_under %>%
      DT::datatable(filter = "none", rownames = F
                    ,extensions = 'FixedColumns'
                    ,options = list(pageLength = 10,scrollX = TRUE,
                                    fixedColumns = list(leftColumns = 2),
                                    initComplete = initComplete),
                    escape=F
      ) %>%
      formatCurrency(c(5,8,9,11,15),digits=2,currency='€') %>%
      formatPercentage(13:14)
  })

Stéphane Laurent Stéphane Laurent · Accepted Answer · 2020-09-25T07:57:40

library(DT)
library(shiny)

rowNames = FALSE # whether to show row names
colIndex <- as.integer(rowNames)

dat = iris[1:5,]

dat[["Action"]] <- vapply(seq_len(nrow(dat)), function(i){
  as.character(tags$button("delete", id = paste0("delete-",i), `data-index` = i))
}, FUN.VALUE = character(1L))
dat[["rowId"]] <- paste0("row-", seq_len(nrow(dat)))

callback <- JS(
  '$("button[id^=delete]").on("click", function() {',
  '  var index = $(this).data("index");',
  '  var rowId = "#row-" + index;',
  '  table.row(rowId).remove().draw();',
  '});'
)

datatable(
  dat,
  rownames = rowNames,
  escape = -ncol(dat)+1L,
  callback = callback,
  options = list(
    rowId = JS(sprintf("function(data){return data[%d];}",
                       ncol(dat)-1L+colIndex)),
    columnDefs = list(
      list(visible = FALSE, targets = ncol(dat)-1L+colIndex),
      list(className = "dt-center", targets = "_all")
    )
  )
)

Delete DataTable rows in Shiny app using Javascript

1 Answers