Is there a trick to edit next cell after pressing TAB in an editable DT ?
It would help to edit faster a whole row.

Below an basic example of an editable DT.

library(shiny)
library(DT)

ui <- fluidPage(
    DT::dataTableOutput('tbl1'),
    verbatimTextOutput("print")
)

server <- function(input, output, session) {

    data <- reactiveValues(x = iris[1:10,1:4])

    output$tbl1 <- DT::renderDataTable({
        DT::datatable(data = isolate(data$x), editable = TRUE, rownames = FALSE)
    })

    proxy_tbl1 <- dataTableProxy("tbl1")

    observeEvent(input$tbl1_cell_edit, {
        info = input$tbl1_cell_edit
        i = info$row
        j = info$col + 1
        v = info$value
        data$x[i, j] <- DT::coerceValue(v, data$x[i, j])
        replaceData(proxy_tbl1, data$x, resetPaging = FALSE, rownames = FALSE)
    })

    output$print <- renderPrint({
        print(data$x)
    })
}

shinyApp(ui, server)

Is there a trick to edit next cell after pressing TAB in an editable DT ?
It would help to edit faster a whole row.

Below an basic example of an editable DT.

library(shiny)
library(DT)

ui <- fluidPage(
    DT::dataTableOutput('tbl1'),
    verbatimTextOutput("print")
)

server <- function(input, output, session) {

    data <- reactiveValues(x = iris[1:10,1:4])

    output$tbl1 <- DT::renderDataTable({
        DT::datatable(data = isolate(data$x), editable = TRUE, rownames = FALSE)
    })

    proxy_tbl1 <- dataTableProxy("tbl1")

    observeEvent(input$tbl1_cell_edit, {
        info = input$tbl1_cell_edit
        i = info$row
        j = info$col + 1
        v = info$value
        data$x[i, j] <- DT::coerceValue(v, data$x[i, j])
        replaceData(proxy_tbl1, data$x, resetPaging = FALSE, rownames = FALSE)
    })

    output$print <- renderPrint({
        print(data$x)
    })
}

shinyApp(ui, server)

• javascript
• r
• shiny
• datatables
• dt

Share Improve this question Follow edited Feb 27, 2019 at 19:11 Stéphane Laurent 84.8k1818 gold badges138138 silver badges257257 bronze badges asked Feb 27, 2019 at 14:05 qfazilleqfazille 1,6811717 silver badges2828 bronze badges 2

• Sounds like a good idea. You may file a feature request to github./rstudio/DT/issues. Thanks! – Yihui Xie Commented Feb 27, 2019 at 16:27
• Don't you think this would be related to PR #509 ? – qfazille Commented Feb 28, 2019 at 7:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

This is probably doable with the Editor extension but it is not free.

Here is something close, using the KeyTable extension.

library(shiny)
library(DT)

ui <- fluidPage(
  DTOutput("table")
)

js <- c(
  "table.on('key', function(e, datatable, key, cell, originalEvent){",
  "  var targetName = originalEvent.target.localName;",
  "  if(key == 13){",
  "    if(targetName == 'body'){",
  "      $(cell.node()).trigger('dblclick.dt');",
  "    }else if(targetName == 'input'){",
  "      $(originalEvent.target).trigger('blur');",
  "    }",
  "  }",
  "})"
)

server <- function(input, output, session){
  output$table <- renderDT({
    datatable(
      iris,
      selection = "none",
      editable = TRUE, 
      callback = JS(js),
      extensions = "KeyTable",
      options = list(
        keys = TRUE
      )
    )
  })
}

shinyApp(ui, server)

1) Select a cell:

2) Press Enter to edit the cell:

3) Press Enter when the edit is done, and press Tab to go the next cell:

4) Press Enter to edit the cell:

etc...

This is not so nice as a spreadsheet editor, but this allows to edit the cells with the keyboard only.

You can also use the arrows to navigate between cells.

---

EDIT

Here is a better solution. Replace js with

js <- c(
  "table.on('key', function(e, datatable, key, cell, originalEvent){",
  "  var targetName = originalEvent.target.localName;",
  "  if(key == 13 && targetName == 'body'){",
  "    $(cell.node()).trigger('dblclick.dt');",
  "  }",
  "});",
  "table.on('keydown', function(e){",
  "  if(e.target.localName == 'input' && [9,13,37,38,39,40].indexOf(e.keyCode) > -1){",
  "    $(e.target).trigger('blur');",
  "  }",
  "});"
)

Now when you edit a cell you can:

• press Enter to validate the edit and stay at the same position;

• or press Tab or an arrow key to validate the edit and navigate, and there's no need to press Enter to validate the edit.

---

EDIT 2

With the code below:

• navigate in the table, press Enter to edit;

• press Enter to validate the edit and stay at the same position;

• if you are editing a cell, then pressing Tab or an arrow key will trigger the edit of the new cell.

.

js <- c(
  "table.on('key', function(e, datatable, key, cell, originalEvent){",
  "  var targetName = originalEvent.target.localName;",
  "  if(key == 13 && targetName == 'body'){",
  "    $(cell.node()).trigger('dblclick.dt');",
  "  }",
  "});",
  "table.on('keydown', function(e){",
  "  if(e.target.localName == 'input' && [9,13,37,38,39,40].indexOf(e.keyCode) > -1){",
  "    $(e.target).trigger('blur');",
  "  }",
  "});",
  "table.on('key-focus', function(e, datatable, cell, originalEvent){",
  "  var targetName = originalEvent.target.localName;",
  "  var type = originalEvent.type;",
  "  if(type == 'keydown' && targetName == 'input'){",
  "    if([9,37,38,39,40].indexOf(originalEvent.keyCode) > -1){",
  "      $(cell.node()).trigger('dblclick.dt');",
  "    }",
  "  }",
  "});"
)