Editable DataTables for Shiny Applications

RStudio recently updated Shiny to allow for editable DataTables. Their implementations allows for editing cells direclty with in the DataTable view. This is fine for many advanced applications, however, for many applications more fine tuned control of what the user can edit is necessary. For example, you may want to only allow a subset of columns to be editable. Or you want to view a subset of columns in a spreadsheet view but allow other columns to be editable. The DTedit package takes the editing out of the table view and instead presents the user with a modal dialog for editing table contents (see screenshot below).

To get started, use the devtools package to install the latest development version of DTedit:

devtools::install_github('jbryer/DTedit')

The dtedit_demo will run a sample shiny app with to editable data tables.

DTedit::dtedit_demo()

Getting Started with DTedit

You can download a simple shiny app using DTedit from Github.

There are three steps to using DTedit in your shiny application.

1. Define callback function for inserting, updating, and deleting data.

NOTE: These callback functions assume that mydata is already defined somewhere outside the callback functions. See the template for the complete example using data.frames, or this demo for an example using RSQLite.

my.insert.callback <- function(data, row) {
	mydata <- rbind(data, mydata)
	return(mydata)
}

my.update.callback <- function(data, olddata, row) {
	mydata[row,] <- data[1,]
	return(mydata)
}

my.delete.callback <- function(data, row) {
	mydata <- mydata[-row,]
	return(mydata)
}

Typically these functions would interact with a database. As written here, the data would be lost between shiny sessions.

2. Create the dtedit object within your server function.

DTedit::dtedit(input, output,
	   name = 'mycontacts',
	   thedata = mydata,
	   edit.cols = c('name', 'email', 'useR', 'notes'),
	   edit.label.cols = c('Name', 'Email Address', 'Are they an R user?', 'Additional notes'),
	   input.types = c(notes='textAreaInput'),
	   view.cols = c('name', 'email', 'useR'),
	   callback.update = my.update.callback,
	   callback.insert = my.insert.callback,
	   callback.delete = my.delete.callback)

The input and output are passed from the server function. The name parameter will define the name of the object available to the uiOutput. The thedata is a data.frame for the initial view of the data table. This can be an empty (i.e. no rows) data.frame. The structure of the data.frame will define the inputs (e.g. factors will be drop down, Date will use dateInput, numerics will use numericInput, etc.). There are many other parameters to custom the behavior of dtedit, see ?dtedit for the full list.

3. Use uiOutput in your UI to display the editable data table.

The name you will pass to uiOutput is the name you passed to the dtedit created on the server side.

uiOutput('mycontacts')