DataTables

A JavaScript library for interaction with HTML tables http://datatables.net

Basic usage (in JavaScript):

// this returns a DataTables API instance
$('#foo').DataTable({
  pageLength: 5,
  autoWidth: true
})

HTML Widgets

The inst/htmlwidgets directory (JS/CSS dependencies)
- The YAML spec file
R binding htmlwidgets::createWidget()
- Pass data and options to the JS side
JS binding

HTMLWidgets.widget({

  name: "FOO",

  type: "output",

  initialize: function(el, width, height) {
    // initialize the element
  },

  renderValue: function(el, data, instance) {
    // render the data in el, e.g.
    // $(el).DataTable(data.options);
  }

})

One widget object, works everywhere
- R console / RStudio
- R Markdown
- Shiny
http://htmlwidgets.org

DT

An R/HTML widget package that provides an interface to DataTables (https://github.com/rstudio/DT)
- The main function DT::datatable()
- Package structure
- Features (e.g. column filters)
- Helper functions (formatting)
Client-side processing: JavaScript (everything is done within the browser)
Server-side processing: R (or other languages)
- DataTables options
```
{
  serverSide: true,
  ajax: {
    url: YOUR_URL
  }
}
```
  where YOUR_URL is a URL that accepts an HTTP POST request and returns JSON data in the response
- e.g. a request that contains parameters start=0&length=10 should return the rows from 1 to 10 (note JavaScript indexes from 0), which is something like x[1:10, ] in the R syntax
- the returned JSON data is like this:
```
{
  draw: 7,
  recordsTotal: 100,
  recordsFiltered: 3,
  data: [
    [1, 2, 3, 4],
    [5, 6, 7, 8],
    [9, 10, 11, 12]
  ],
  ...
}
```

Shiny (server-side processing)

DT::dataTableOutput()
- htmlwidgets::widgetOutput()
DT::renderDataTable()
- htmlwidgets::renderWidget()
Server-side processing by default (renderDataTable(server = TRUE))
The Ajax URL: session$registerDataObj(id, data, filterFun), where session is the session object from the server function of a Shiny app (recall function(input, output, session))
- The URL is of the form session/2ca9bd983aa0c4ba9989f50ef34842fc/dataobj/id?w=
The key: filterFun = function(data, req) { ... }, where req is the POST request that contains the querying parameters
- URLdecode(rawToChar(req$rook.input$read()))
  - actually, use httpuv::decodeURIComponent() instead of URLdecode() in base R
- shiny::parseQueryString()

Implementation of basic features

Pagination: x[1:10, ]
Searching: grep(keyword, x)
Sorting: sort(x)

Pass info from DataTables to Shiny

The key: Shiny.setInputValue(id, data)
DataTables API http://datatables.net/reference/api/
- Setters, e.g. table.search('keyword')
- Getters, e.g. table.rows().indexes()
Events http://datatables.net/reference/event/
- e.g. every time the table is drawn, tell Shiny the current row indexes
```
table.on('draw', function(e) {

  var cur_rows = table.rows({
    page: 'current'
  }).indexes();

  Shiny.setInputValue('foo_current_rows', cur_rows);

})
```
- in R, you will be able to use input$foo_current_rows
We are using a Shiny output as an input at the same time

Examples

Row/Column/Cell selection https://yihui.shinyapps.io/DT-selection
DataTables information (e.g. indices of current/all rows) https://yihui.shinyapps.io/DT-info/
React to clicking https://yihui.shinyapps.io/DT-click/

Manipulate a DataTables instance

e.g. select rows/columns using R

The key

On the R side:
```
session$sendCustomMessage(name, data)
```

On the JS side:

Shiny.addCustomMessageHandler(name, function(data) {

  // whatever you want to do with `data`
  // e.g. call DataTables API
  // table.row.add(data).draw()

})

Example https://yihui.shinyapps.io/DT-proxy

Recap

HTML Widgets: JS/CSS dependencies, R binding, JS binding
Using R/shiny as a server: session$registerDataObj()
Send JS data to R: Shiny.setInputValue()
Send R data to JS: session$sendCustomMessage()
Handle R data in JS: Shiny.addCustomMessageHandler()

Interfacing DataTables

DataTables

HTML Widgets

DT

Shiny (server-side processing)

Implementation of basic features

Pass info from DataTables to Shiny

Examples

Manipulate a DataTables instance

Recap

Oh, that is pretty cool…

Yeah, it is this cool…

JavaScript indexes from 0!

Thanks!