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.

Sign up for GitHub

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

Jump to bottom

extended editor capabilities #509

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

extended editor capabilities #509

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ff4a320
extended editor capabilities
LukasK13 Feb 23, 2018
e71e635
Update .gitignore
LukasK13 Feb 24, 2018
19acbab
back compatibility added.
LukasK13 Feb 24, 2018
d66e78e
Merge branch 'master' of https://github.com/LukasK13/DT
LukasK13 Feb 24, 2018
a13e3f6
compatibility with rownames fixed
LukasK13 Feb 24, 2018
aad86fb
Standard placeholder is defined by colname
LukasK13 Feb 25, 2018
6ae3c19
Shift + Tab to return to previous cell
LukasK13 Mar 3, 2018
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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