sortable HTML output from R with images

Question

I have some data in a data frame. There is a small image associated with each row.

I'd like to be able to write this data to HTML along with the image and have it show up in each row as a thumbnail. That's no big deal by manually writing an href tag to link to the image.

However, I can't find a way to do this and make the HTML table sortable. The goal is to sort the HTML table by one of the columns and have the images sort along with the rows.

I've played around with using googleVis's gvisTable() function to do this but I haven't able to get the images to display.

Any ideas?

Thanks,

Max

> sessionInfo()
R version 3.0.2 (2013-09-25)
Platform: x86_64-apple-darwin10.8.0 (64-bit)

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] googleVis_0.4.7

loaded via a namespace (and not attached):
[1] RJSONIO_1.0-3 tools_3.0.2 

Answer 1

You can not interact with HTML, by definition. It is a markup language, meaning that is provides information about information. If you want to sort a table in the users' browser you need to use client side scripting, you best bet is jQuery.

This is a great solution, it should work for your application.

http://tablesorter.com/docs/

Answer 2

I'm hesitant to say there is no way to do this with raw HTML right now, especially with HTML 5 being pretty awesome, but I use http://datatables.net/ as it's pretty snappy with tables under a few thousand rows and rather easy to implement.

Answer 3

If you want to use the gvisTable, you can write something like this:

data = .... your frame here, e.g.  data.frame(matrix(1:9, nrow = 3)) ... 
table <- gvisTable(data, options = list(width = 600, height = 300))
print(table, "chart")

gvisTable will create Javascript code that uses Google JS API to render the actual table based on data inside that code.

There are also other various Javascript libraries to do such task if you prefer to create the HTML yourself. Take a look at this one: http://www.kryogenix.org/code/browser/sorttable/ It only takes 2 steps:

1. Inside the HEAD element add:

   <script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js" type="text/javascript"></script>

2. In the opening table tag of your output add class="sortable" like this:

   <table class="sortable"> .... .... </table>