How to edit column names in datatable function when running R shiny app?

Question

I'm using datatable function from DT package in R Shiny and I want that the user of my app can edit the column names (the variable names). Is there any option to do that?

For now I'm using a text input "old_var_name", a text input "new_var_name" and an actionbutton "update_variable_name". But at this point, I'm only able to change on variable name at the time. I want the user to be able to change as much as variable names he wants.

Server:

tab <- eventReactive(input$import,{
inFile <- input$file1
if (is.null(inFile))
  return(NULL)

tabledata <- read.xlsx(inFile$datapath,startRow=1,sheet = 1)
})

name_temp <- eventReactive(input$var_name,{
if (input$old_name == ""){
  colnames(tab())
} else {
    c(colnames(tab())[1:(which(colnames(tab()) == input$old_name)-1)],input$new_name,
    colnames(tab())[(which(colnames(tab()) == input$old_name)+1):length(colnames(tab()))])
}
})

final_rename <- reactive({
d <- tab()
colnames(d) <- name_temp()
d
})

output$tabledata <- DT::renderDataTable({
if (input$var_name == 0) {
  DT::datatable(tab(),editable = T)
} else {
  DT::datatable(final_rename(),editable = T)
}
})

UI:

tabPanel("Table",h1("Table",align="center") ,
actionButton(inputId = "import", label = "Import data"),br(),br(),                           
splitLayout(textInput(inputId = "old_name", label = "Old variable name"),                           
textInput(inputId = "new_name", label = "New variable Name")),
actionButton(inputId = "var_name", label = "Update Variable name"),br(),br(),
DT::dataTableOutput("tabledata"))

Is there any suggestion to achieve that or any option with datatable that I can use and then the user will be able to change all variable names he wants?

Answer 1

Here is a solution with a context menu. Right-click on a column header to edit it. Press 'Escape' when done, or simply move the mouse outside the text input box. This solution does not interfere with the sorting.

library(shiny)
library(DT)

callback <- c(
  "$.contextMenu({",
  "  selector: '#table th',", 
  "  trigger: 'right',",
  "  autoHide: true,",
  "  items: {",
  "    text: {",
  "      name: 'Enter column header:',", 
  "      type: 'text',", 
  "      value: ''", 
  "    }",
  "  },",
  "  events: {",
  "    show: function(opt){",
  "      $.contextMenu.setInputValues(opt, {text: opt.$trigger.text()});",
  "    },",
  "    hide: function(opt){",
  "      var $this = this;",
  "      var text = $.contextMenu.getInputValues(opt, $this.data()).text;",
  "      var $th = opt.$trigger;",
  "      $th.text(text);",
  "    }",
  "  }",
  "});" 
)

ui <- fluidPage(
  tags$head(
    tags$link(rel = "stylesheet", href = "https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.8.0/jquery.contextMenu.min.css"),
    tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.8.0/jquery.contextMenu.min.js")
  ),
  DTOutput("table")
)

server <- function(input, output){
  output[["table"]] <- renderDT({
    datatable(iris[1:3,], callback = JS(callback))
  }, server = FALSE)  
}

shinyApp(ui, server)

Answer 2

Here is a friendly way except that it interferes with the sorting. So it is nice only if the sorting is disabled. Double-click on a column header to edit it, and press Tab to escape.

library(DT)

callback <- c(
  "table.on('dblclick.dt', 'thead th', function(e) {",
  "  var $th = $(this);",
  "  var index = $th.index();",
  "  var colname = $th.text(), newcolname = colname;",
  "  var $input = $('<input type=\"text\">')",
  "  $input.val(colname);",
  "  $th.empty().append($input);",
  "  $input.on('change', function(){",
  "    newcolname = $input.val();",
  "    if(newcolname != colname){",
  "      $(table.column(index).header()).text(newcolname);",
  "    }",
  "    $input.remove();",
  "  }).on('blur', function(){",
  "    $(table.column(index).header()).text(newcolname);",
  "    $input.remove();",
  "  });",
  "});"
)

datatable(iris[1:3,], callback = JS(callback))