From ff4a3202fd4078bd0379641e23bf12393585664c Mon Sep 17 00:00:00 2001
From: LukasK13 <spam.lukas.klass@gmail.com>
Date: Thu, 22 Feb 2018 21:37:25 -0800
Subject: [PATCH 1/6] extended editor capabilities

I extendedn the editor capabilities, so distinct columns can be marked as editable and the type of the editor can be switched between a textinput and a selectinput.
---
 .gitignore                     |   3 +
 inst/htmlwidgets/datatables.js | 107 ++++++++++++++++++++++++++-------
 2 files changed, 89 insertions(+), 21 deletions(-)

diff --git a/.gitignore b/.gitignore
index 3151c335..8ee44718 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,6 @@ large.txt
 inst/examples/random.R
 .*.Rnb.cached
 revdep/
+inst/.DS_Store
+.DS_Store
+inst/examples/DT-edit/app.R
diff --git a/inst/htmlwidgets/datatables.js b/inst/htmlwidgets/datatables.js
index d66752c9..ce307985 100644
--- a/inst/htmlwidgets/datatables.js
+++ b/inst/htmlwidgets/datatables.js
@@ -682,29 +682,94 @@ HTMLWidgets.widget({
     // run the callback function on the table instance
     if (typeof data.callback === 'function') data.callback(table);
 
-    // double click to edit the cell
-    if (data.editable) table.on('dblclick.dt', 'tbody td', function() {
-      var $input = $('<input type="text">');
-      var $this = $(this), value = table.cell(this).data(), html = $this.html();
-      var changed = false;
-      $input.val(value);
-      $this.empty().append($input);
-      $input.css('width', '100%').focus().on('change', function() {
-        changed = true;
-        var valueNew = $input.val();
-        if (valueNew != value) {
-          table.cell($this).data(valueNew);
-          if (HTMLWidgets.shinyMode) changeInput('cell_edit', cellInfo($this));
-          // for server-side processing, users have to call replaceData() to update the table
-          if (!server) table.draw(false);
-        } else {
-          $this.html(html);
+    // editor is enabled
+    if (table.init().editable) {
+      var editorNextCell = null; // declare variable for next cell to be acivated by the tab key
+      var options = table.init(); // load table options
+      for (var key in options.editType) {
+        $(table.column(key).header()).attr("data-editortype", options.editType[key]).attr("data-editoroptions", JSON.stringify(options.editAttribs[key])); // set column editor attributes
+      }
+      
+      // double click to edit the cell
+      table.on('dblclick.dt', 'tbody td', function() {
+        if (table.column(this).header().hasAttribute('data-editortype')) { // cell is marked as editable
+          var $this = $(this), value = table.cell(this).data(), html = $this.html();
+          var changed = false;
+          if (table.column(this).header().getAttribute('data-editortype') == 'text') { // cell shall display a textinput
+            var $input = $('<input type="text">');
+            $input.val(value);
+            $input.attr("placeholder", JSON.parse(table.column(this).header().getAttribute("data-editoroptions")).placeholder);
+          } else if (table.column(this).header().getAttribute('data-editortype') == 'select') { // cell shall display a selectinput
+            var $input = $('<select>');
+            $(JSON.parse(table.column(this).header().getAttribute("data-editoroptions")).options).each(function(index, val) {
+              $option = $("<option>").attr('value', val).text(val);
+              if (val == value) $option.attr('selected','selected');
+              $input.append($option);
+            });
+          }
+          $this.empty().append($input);
+          $input.css('width', '100%').focus().on('change', function() {
+            changed = true;
+            var valueNew = $input.val();
+            if (valueNew != value) {
+              table.cell($this).data(valueNew);
+              if (HTMLWidgets.shinyMode) changeInput('cell_edit', cellInfo($this));
+              // for server-side processing, users have to call replaceData() to update the table
+              if (!server) table.draw(false);
+            } else {
+              $this.html(html);
+            }
+            $input.remove();
+          }).on('blur', function() {
+            if (!changed) $input.trigger('change');
+          }).on('keydown', function(ev) {
+            if (ev.keyCode == 13) { // enter
+              if (!changed) $input.trigger('change');
+            } else if (ev.keyCode == 27) { //escape
+              $this.html(html);
+            } else if (ev.keyCode == 9) { //tab
+              if (!changed) $input.trigger('change');
+              // find next editable column
+              var column = table.column($this).header();
+              do {
+                column = column.nextSibling;
+              }
+              while (column !== null && !column.hasAttribute("data-editortype"));
+              if (column === null) { // a editable column was not found after the current column, search before the current column
+                column = table.column(0).header();
+                while (!column.hasAttribute("data-editortype"))
+                  column = column.nextSibling;
+              }
+              var nextColNumber = $(column).parent().children().index(column); // calculate the index of the next editable column
+
+              if (nextColNumber > table.cell($this).index().column) { // next column is in same line
+                ev.preventDefault();
+                $(table.cell(table.cell($this).index().row, nextColNumber).node()).dblclick(); // activate editor in next cell
+                if (HTMLWidgets.shinyMode) editorNextCell = [table.cell($this).index().row, nextColNumber]; // save next cell to be clicked after a possible table reload by the server
+              } else { // next column is in the following row
+                // find next row in the current ordering, pagination and search
+                var rows = table.rows({order: "current", page: "current", search: "applied"}).indexes();
+                var i = 0;
+                while (i < rows.length && rows[i] != table.cell($this).index().row)
+                  i++;
+                if (i < (rows.length - 1)) {
+                  ev.preventDefault();
+                  $(table.cell(rows[i+1], nextColNumber).node()).dblclick(); // activate editor in next cell
+                  if (HTMLWidgets.shinyMode) editorNextCell = [rows[i+1], nextColNumber]; // save next cell to be clicked after a possible table reload by the server
+                }
+              }
+            }
+          });
         }
-        $input.remove();
-      }).on('blur', function() {
-        if (!changed) $input.trigger('change');
       });
-    });
+      
+      table.on('draw.dt', function (e, settings) {
+        if (typeof(editorNextCell) !== 'undefined' && editorNextCell !== null) { // table was redrawn due to an edited cell applied by pressing the tab key
+          $(table.cell(editorNextCell[0], editorNextCell[1]).node()).dblclick(); // activate editor in next cell
+          editorNextCell = null;
+        }
+      })  
+    }
 
     // interaction with shiny
     if (!HTMLWidgets.shinyMode && !crosstalkOptions.group) return;

From e71e635be5b6db753680b8b3d2e28e599cb4439e Mon Sep 17 00:00:00 2001
From: Lukas Klass <spam.lukas.klass@gmail.com>
Date: Fri, 23 Feb 2018 16:51:35 -0800
Subject: [PATCH 2/6] Update .gitignore

---
 .gitignore | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/.gitignore b/.gitignore
index 8ee44718..5daf9a1f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,13 +1,10 @@
-.Rproj.user
-.Rhistory
-.RData
-tools/DataTables*
-tools/Plugins
-rsconnect/
-large.txt
-inst/examples/random.R
-.*.Rnb.cached
-revdep/
-inst/.DS_Store
-.DS_Store
-inst/examples/DT-edit/app.R
+.Rproj.user
+.Rhistory
+.RData
+tools/DataTables*
+tools/Plugins
+rsconnect/
+large.txt
+inst/examples/random.R
+.*.Rnb.cached
+revdep/

From 19acbabf9d5009eb6df459a783bc871f81f9db2c Mon Sep 17 00:00:00 2001
From: LukasK13 <spam.lukas.klass@gmail.com>
Date: Fri, 23 Feb 2018 17:18:13 -0800
Subject: [PATCH 3/6] back compatibility added.

---
 inst/htmlwidgets/datatables.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/inst/htmlwidgets/datatables.js b/inst/htmlwidgets/datatables.js
index ce307985..5847029c 100644
--- a/inst/htmlwidgets/datatables.js
+++ b/inst/htmlwidgets/datatables.js
@@ -683,11 +683,18 @@ HTMLWidgets.widget({
     if (typeof data.callback === 'function') data.callback(table);
 
     // editor is enabled
-    if (table.init().editable) {
+    if (data.editable) {
       var editorNextCell = null; // declare variable for next cell to be acivated by the tab key
       var options = table.init(); // load table options
-      for (var key in options.editType) {
-        $(table.column(key).header()).attr("data-editortype", options.editType[key]).attr("data-editoroptions", JSON.stringify(options.editAttribs[key])); // set column editor attributes
+      if ('editType' in options) {
+        for (var key in options.editType) {
+          $(table.column(key).header()).attr('data-editortype', options.editType[key]).attr('data-editoroptions', JSON.stringify(options.editAttribs[key])); // set column editor attributes
+        }
+      } else {
+        table.columns().every(function() {
+          if (this.header().innerHTML != ' ')
+            $(this.header()).attr('data-editortype', 'text').attr('data-editoroptions', JSON.stringify({placeholder: ''})); // set column editor attributes
+        });
       }
       
       // double click to edit the cell

From a13e3f6c376d5776cc5aca99465b594fde7fcae0 Mon Sep 17 00:00:00 2001
From: LukasK13 <spam.lukas.klass@gmail.com>
Date: Fri, 23 Feb 2018 17:33:05 -0800
Subject: [PATCH 4/6] compatibility with rownames fixed

---
 inst/htmlwidgets/datatables.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/inst/htmlwidgets/datatables.js b/inst/htmlwidgets/datatables.js
index 5847029c..66932689 100644
--- a/inst/htmlwidgets/datatables.js
+++ b/inst/htmlwidgets/datatables.js
@@ -688,7 +688,10 @@ HTMLWidgets.widget({
       var options = table.init(); // load table options
       if ('editType' in options) {
         for (var key in options.editType) {
-          $(table.column(key).header()).attr('data-editortype', options.editType[key]).attr('data-editoroptions', JSON.stringify(options.editAttribs[key])); // set column editor attributes
+          colIndex = parseInt(key);
+          if (table.column(0).header().innerHTML == ' ')
+            colIndex = colIndex + 1;
+          $(table.column(colIndex).header()).attr('data-editortype', options.editType[key]).attr('data-editoroptions', JSON.stringify(options.editAttribs[key])); // set column editor attributes
         }
       } else {
         table.columns().every(function() {

From aad86fb584ff2cf0653196393d5302c78191761a Mon Sep 17 00:00:00 2001
From: LukasK13 <spam.lukas.klass@gmail.com>
Date: Sun, 25 Feb 2018 11:05:20 -0800
Subject: [PATCH 5/6] Standard placeholder is defined by colname

---
 inst/htmlwidgets/datatables.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/inst/htmlwidgets/datatables.js b/inst/htmlwidgets/datatables.js
index 66932689..83dc8c39 100644
--- a/inst/htmlwidgets/datatables.js
+++ b/inst/htmlwidgets/datatables.js
@@ -696,7 +696,7 @@ HTMLWidgets.widget({
       } else {
         table.columns().every(function() {
           if (this.header().innerHTML != ' ')
-            $(this.header()).attr('data-editortype', 'text').attr('data-editoroptions', JSON.stringify({placeholder: ''})); // set column editor attributes
+            $(this.header()).attr('data-editortype', 'text').attr('data-editoroptions', JSON.stringify({placeholder: this.header().innerHTML})); // set column editor attributes
         });
       }
       
@@ -708,11 +708,11 @@ HTMLWidgets.widget({
           if (table.column(this).header().getAttribute('data-editortype') == 'text') { // cell shall display a textinput
             var $input = $('<input type="text">');
             $input.val(value);
-            $input.attr("placeholder", JSON.parse(table.column(this).header().getAttribute("data-editoroptions")).placeholder);
+            $input.attr('placeholder', JSON.parse(table.column(this).header().getAttribute('data-editoroptions')).placeholder);
           } else if (table.column(this).header().getAttribute('data-editortype') == 'select') { // cell shall display a selectinput
             var $input = $('<select>');
-            $(JSON.parse(table.column(this).header().getAttribute("data-editoroptions")).options).each(function(index, val) {
-              $option = $("<option>").attr('value', val).text(val);
+            $(JSON.parse(table.column(this).header().getAttribute('data-editoroptions')).options).each(function(index, val) {
+              $option = $('<option>').attr('value', val).text(val);
               if (val == value) $option.attr('selected','selected');
               $input.append($option);
             });
@@ -744,10 +744,10 @@ HTMLWidgets.widget({
               do {
                 column = column.nextSibling;
               }
-              while (column !== null && !column.hasAttribute("data-editortype"));
+              while (column !== null && !column.hasAttribute('data-editortype'));
               if (column === null) { // a editable column was not found after the current column, search before the current column
                 column = table.column(0).header();
-                while (!column.hasAttribute("data-editortype"))
+                while (!column.hasAttribute('data-editortype'))
                   column = column.nextSibling;
               }
               var nextColNumber = $(column).parent().children().index(column); // calculate the index of the next editable column
@@ -758,7 +758,7 @@ HTMLWidgets.widget({
                 if (HTMLWidgets.shinyMode) editorNextCell = [table.cell($this).index().row, nextColNumber]; // save next cell to be clicked after a possible table reload by the server
               } else { // next column is in the following row
                 // find next row in the current ordering, pagination and search
-                var rows = table.rows({order: "current", page: "current", search: "applied"}).indexes();
+                var rows = table.rows({order: 'current', page: 'current', search: 'applied'}).indexes();
                 var i = 0;
                 while (i < rows.length && rows[i] != table.cell($this).index().row)
                   i++;

From 6ae3c19e07b331d9b8bdf12d7257bccd160e040e Mon Sep 17 00:00:00 2001
From: LukasK13 <spam.lukas.klass@gmail.com>
Date: Sat, 3 Mar 2018 15:23:33 -0800
Subject: [PATCH 6/6] Shift + Tab to return to previous cell

---
 .gitignore                     |  8 +---
 inst/examples/DT-edit/app.R    | 42 ++++++-----------
 inst/htmlwidgets/datatables.js | 84 +++++++++++++++++++++++-----------
 3 files changed, 73 insertions(+), 61 deletions(-)

diff --git a/.gitignore b/.gitignore
index 5daf9a1f..6ba72d89 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,10 +1,4 @@
 .Rproj.user
 .Rhistory
 .RData
-tools/DataTables*
-tools/Plugins
-rsconnect/
-large.txt
-inst/examples/random.R
-.*.Rnb.cached
-revdep/
+.DS_Store
diff --git a/inst/examples/DT-edit/app.R b/inst/examples/DT-edit/app.R
index 36db1cd5..116dd425 100644
--- a/inst/examples/DT-edit/app.R
+++ b/inst/examples/DT-edit/app.R
@@ -3,43 +3,29 @@ library(DT)
 shinyApp(
   ui = fluidPage(
     title = 'Double-click to edit table cells',
-    fluidRow(column(12, h1('Client-side processing'), hr(), DTOutput('x1'))),
-    fluidRow(column(12, h1('Server-side processing'), hr(), DTOutput('x2'))),
-    fluidRow(column(12, h1('Server-side processing (no row names)'), hr(), DTOutput('x3')))
+    titlePanel('Double-click to edit table cells'),
+    DTOutput('x1')
   ),
   server = function(input, output, session) {
     d1 = iris
-    d1$Date = Sys.time() + seq_len(nrow(d1))
-    d2 = d3 = d1
 
-    options(DT.options = list(pageLength = 5))
+    output$x1 = renderDT(d1, selection = "none", editable = T, rownames = T, options = list(
+      editType = list("0" = "text", "1" = "text", "2" = "text", "3" = "text", "4" = "select"),
+      editAttribs = list("0" = list(placeholder = "Length"), "1" = list(placeholder = "Width"),
+                         "2" = list(placeholder = "Length"), "3" = list(placeholder = "Width"),
+                         "4" = list(options = c("setosa", "versicolor", "virginica")))
+    ))
 
-    output$x1 = renderDT(d1, selection = 'none', server = FALSE, editable = TRUE)
-    output$x2 = renderDT(d2, selection = 'none', editable = TRUE)
-    output$x3 = renderDT(d3, selection = 'none', rownames = FALSE, editable = TRUE)
-
-    proxy2 = dataTableProxy('x2')
-
-    observeEvent(input$x2_cell_edit, {
-      info = input$x2_cell_edit
+    proxy1 = dataTableProxy('x1')
+    
+    observeEvent(input$x1_cell_edit, {
+      info = input$x1_cell_edit
       str(info)
       i = info$row
       j = info$col
       v = info$value
-      d2[i, j] <<- DT::coerceValue(v, d2[i, j])
-      replaceData(proxy2, d2, resetPaging = FALSE)  # important
-    })
-
-    proxy3 = dataTableProxy('x3')
-
-    observeEvent(input$x3_cell_edit, {
-      info = input$x3_cell_edit
-      str(info)
-      i = info$row
-      j = info$col + 1  # column index offset by 1
-      v = info$value
-      d3[i, j] <<- DT::coerceValue(v, d3[i, j])
-      replaceData(proxy3, d3, resetPaging = FALSE, rownames = FALSE)
+      d1[i, j] <<- DT::coerceValue(v, d1[i, j])
+      replaceData(proxy1, d1, resetPaging = FALSE)  # important
     })
   }
 )
diff --git a/inst/htmlwidgets/datatables.js b/inst/htmlwidgets/datatables.js
index 83dc8c39..7ff11415 100644
--- a/inst/htmlwidgets/datatables.js
+++ b/inst/htmlwidgets/datatables.js
@@ -738,34 +738,66 @@ HTMLWidgets.widget({
             } else if (ev.keyCode == 27) { //escape
               $this.html(html);
             } else if (ev.keyCode == 9) { //tab
-              if (!changed) $input.trigger('change');
-              // find next editable column
-              var column = table.column($this).header();
-              do {
-                column = column.nextSibling;
-              }
-              while (column !== null && !column.hasAttribute('data-editortype'));
-              if (column === null) { // a editable column was not found after the current column, search before the current column
-                column = table.column(0).header();
-                while (!column.hasAttribute('data-editortype'))
+            if (!changed) $input.trigger('change');
+              if (ev.shiftKey) {
+                // find previous editable column
+                var column = table.column($this).header();
+                do {
+                  column = column.previousSibling;
+                }
+                while (column !== null && !column.hasAttribute('data-editortype'));
+                if (column === null) { // a editable column was not found before the current column, search after the current column
+                  column = table.column($this).header().parentElement.lastChild;
+                  while (!column.hasAttribute('data-editortype'))
+                    column = column.previousSibling;
+                }
+                var nextColNumber = $(column).parent().children().index(column); // calculate the index of the previous editable column
+  
+                if (nextColNumber < table.cell($this).index().column) { // next column is in same line
+                  ev.preventDefault();
+                  $(table.cell(table.cell($this).index().row, nextColNumber).node()).dblclick(); // activate editor in next cell
+                  if (HTMLWidgets.shinyMode) editorNextCell = [table.cell($this).index().row, nextColNumber]; // save next cell to be clicked after a possible table reload by the server
+                } else { // next column is in the previous row
+                  // find previous row in the current ordering, pagination and search
+                  var rows = table.rows({order: 'current', page: 'current', search: 'applied'}).indexes();
+                  var i = 0;
+                  while (i < rows.length && rows[i] != table.cell($this).index().row)
+                    i++;
+                  if (i > 0) {
+                    ev.preventDefault();
+                    $(table.cell(rows[i-1], nextColNumber).node()).dblclick(); // activate editor in next cell
+                    if (HTMLWidgets.shinyMode) editorNextCell = [rows[i-1], nextColNumber]; // save next cell to be clicked after a possible table reload by the server
+                  }
+                }
+              } else {
+                // find next editable column
+                var column = table.column($this).header();
+                do {
                   column = column.nextSibling;
-              }
-              var nextColNumber = $(column).parent().children().index(column); // calculate the index of the next editable column
-
-              if (nextColNumber > table.cell($this).index().column) { // next column is in same line
-                ev.preventDefault();
-                $(table.cell(table.cell($this).index().row, nextColNumber).node()).dblclick(); // activate editor in next cell
-                if (HTMLWidgets.shinyMode) editorNextCell = [table.cell($this).index().row, nextColNumber]; // save next cell to be clicked after a possible table reload by the server
-              } else { // next column is in the following row
-                // find next row in the current ordering, pagination and search
-                var rows = table.rows({order: 'current', page: 'current', search: 'applied'}).indexes();
-                var i = 0;
-                while (i < rows.length && rows[i] != table.cell($this).index().row)
-                  i++;
-                if (i < (rows.length - 1)) {
+                }
+                while (column !== null && !column.hasAttribute('data-editortype'));
+                if (column === null) { // a editable column was not found after the current column, search before the current column
+                  column = table.column(0).header();
+                  while (!column.hasAttribute('data-editortype'))
+                    column = column.nextSibling;
+                }
+                var nextColNumber = $(column).parent().children().index(column); // calculate the index of the next editable column
+  
+                if (nextColNumber > table.cell($this).index().column) { // next column is in same line
                   ev.preventDefault();
-                  $(table.cell(rows[i+1], nextColNumber).node()).dblclick(); // activate editor in next cell
-                  if (HTMLWidgets.shinyMode) editorNextCell = [rows[i+1], nextColNumber]; // save next cell to be clicked after a possible table reload by the server
+                  $(table.cell(table.cell($this).index().row, nextColNumber).node()).dblclick(); // activate editor in next cell
+                  if (HTMLWidgets.shinyMode) editorNextCell = [table.cell($this).index().row, nextColNumber]; // save next cell to be clicked after a possible table reload by the server
+                } else { // next column is in the following row
+                  // find next row in the current ordering, pagination and search
+                  var rows = table.rows({order: 'current', page: 'current', search: 'applied'}).indexes();
+                  var i = 0;
+                  while (i < rows.length && rows[i] != table.cell($this).index().row)
+                    i++;
+                  if (i < (rows.length - 1)) {
+                    ev.preventDefault();
+                    $(table.cell(rows[i+1], nextColNumber).node()).dblclick(); // activate editor in next cell
+                    if (HTMLWidgets.shinyMode) editorNextCell = [rows[i+1], nextColNumber]; // save next cell to be clicked after a possible table reload by the server
+                  }
                 }
               }
             }