Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

extended editor capabilities #509

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 4 additions & 10 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
.Rproj.user
.Rhistory
.RData
tools/DataTables*
tools/Plugins
rsconnect/
large.txt
inst/examples/random.R
.*.Rnb.cached
revdep/
.Rproj.user
.Rhistory
.RData
.DS_Store
42 changes: 14 additions & 28 deletions inst/examples/DT-edit/app.R
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
}
)
149 changes: 128 additions & 21 deletions inst/htmlwidgets/datatables.js
Original file line number Diff line number Diff line change
Expand Up @@ -682,29 +682,136 @@ 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 (data.editable) {
var editorNextCell = null; // declare variable for next cell to be acivated by the tab key
var options = table.init(); // load table options
if ('editType' in options) {
for (var key in options.editType) {
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() {
if (this.header().innerHTML != ' ')
$(this.header()).attr('data-editortype', 'text').attr('data-editoroptions', JSON.stringify({placeholder: this.header().innerHTML})); // 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');
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;
}
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;
Expand Down