--- title: "Including a table in an opencpu app" date: "2016-08-27" --- ```{r setup, include=FALSE} knitr::knit_engines$set(pygmentize = function (options) { f = basename(tempfile("pygmentize", ".", ".txt")) writeLines(options$code, f) on.exit(unlink(f)) code = paste("-f html", options$engine.opts, f) message("running: pygmentize ", code) out = tryCatch(system2("pygmentize", code, stdout = TRUE, stderr = FALSE), error = function(e) { if (!options$error) stop(e) "Error in running pygmentize" }) if (!options$error && !is.null(attr(out, "status"))) stop(paste(out, collapse = "\n")) knitr::engine_output(options, options$code, out) } ) knitr::opts_chunk$set(engine="pygmentize", engine.opts="-l html", echo=FALSE, results='asis') ``` We give three ways to make a table in an opencpu app from a dataframe returned by a call to a R function. The `getDF` function used for the example has no argument and returns a dataframe only: ```{r, engine.opts="-l r"} getDF <- function(){ df <- iris colnames(df) <- sub(".", "_", colnames(df), fixed=TRUE) return(df) } ``` ## Using jsonTable This way uses the [jsonTable](https://github.com/omkarkhair/jsonTable) library. I use the following Javascript function based on this library. ```{r, engine.opts="-l js" } // js/jsontotable.js function jsontotable(selector, data, columns, colnames=columns, rowclass="classy", callback=function(){}){ var options = { source: data, rowClass: rowclass, callback: callback }; $(selector).jsonTable({ head : colnames, json : columns }); $(selector).jsonTableUpdate(options); } ``` I also use [bootstrap](http://www.w3schools.com/bootstrap/bootstrap_tables.asp) in order to get a nice style. ```{r}

Table created with jsonTable.js.

``` The output: ![](./assets/img/opencpu_jsontable.png) ## Using datatables Here is the way to render a `datatables` table in an `opencpu` application. ```{r}
``` The output: ![](./assets/img/opencpu_datatables.png) ## Using angular.js (with sorting feature) ```{r}

{{header}}
{{cell}}
``` The output: ![](./assets/img/opencpu_angulartable.png)