How to create a dropdown list in a Shiny table using datatable when editing the table?

Question

I used RStudio to read in a csv file and used Shiny to build an app as an interactive table, the cell I selected right now as shown in the picture is pre-filled.

enter image description here

I want to change the value given pre-defined options in a dropdown list, such as, "Keep Dataset", "Pass", etc., I searched hundreds of materials and I literally ran out of my bullets...... PLEASE HELP!

Clinch

Do you want the same dropdown list in all the cells of the column? – Leverick

Yes, that would work, can you elaborate this? Thank you very much!!! – Clinch

This is a duplicate of #52594039, but Stephane Laurent gave a fantastic answer here, whereas the other question does not have an answer. – Opinionated

Answer 1

We can do that with the JavaScript library CellEdit. Download the file dataTables.cellEdit.js.

By default, the interface is not very stylish. To style it, copy the CSS code below and put it in a file dataTables.cellEdit.css, in the same folder as dataTables.cellEdit.js.

.my-input-class {
  padding: 3px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.my-confirm-class {
  padding: 3px 6px;
  font-size: 12px;
  color: white;
  text-align: center;
  vertical-align: middle;
  border-radius: 4px;
  background-color: #337ab7;
  text-decoration: none;
}

.my-cancel-class {
  padding: 3px 6px;
  font-size: 12px;
  color: white;
  text-align: center;
  vertical-align: middle;
  border-radius: 4px;
  background-color: #a94442;
  text-decoration: none;
}

Now, here is the R code. Don't forget to change the path variable.

library(DT)

dat <- data.frame(
  Action = c("Keep data", "Keep data", "Keep data"),
  X = c(1, 2, 3),
  Y = c("a", "b", "c")
)

callback = JS(
  "function onUpdate(updatedCell, updatedRow, oldValue){}",
  "table.MakeCellsEditable({",
  "  onUpdate: onUpdate,",
  "  inputCss: 'my-input-class',",
  "  confirmationButton: {",
  "    confirmCss: 'my-confirm-class',",
  "    cancelCss: 'my-cancel-class'",
  "  },",
  "  inputTypes: [",
  "    {",
  "      column: 0,",
  "      type: 'list',",
  "      options: [",
  "        {value: 'Keep data', display: 'Keep data'},",
  "        {value: 'Pass',      display: 'Pass'},",
  "        {value: 'Delete',    display: 'Delete'}",
  "      ]",
  "    }",
  "  ]",
  "});")

## the datatable
dtable <- datatable(
  dat, callback = callback, rownames = FALSE, 
  options = list(
    columnDefs = list(
      list(targets = "_all", className = "dt-center")
    )
  )
)
path <- "~/Work/R/DT" # folder containing the files dataTables.cellEdit.js
                      # and dataTables.cellEdit.css
dep <- htmltools::htmlDependency(
  "CellEdit", "1.0.19", path, 
  script = "dataTables.cellEdit.js", stylesheet = "dataTables.cellEdit.css")
dtable$dependencies <- c(dtable$dependencies, list(dep))
dtable

See it in action:

See the possible options on the CellEdit repo. In particular you can disable the editing for certain columns, and you can get rid of the Confirm/Cancel buttons if you want.

Claw

Thank you very much! Is it possible not to refer an outside file "CellEdit.js"? Is it possible to use a callback within DT, downloading an extra file would be more complex for the third one if he/she wants to use this app, but I understand if we have to do so...... – Clinch