Making Tables in Slidify

This is the dataframe that I'm going to turn into a series of nice looking tables:

df <- data.frame(State=c("Alabama", "Alaska", "Arizona", "Arkansas"),
           Flower=c("Camellia", "Forget-me-not", "Saguaro cactus blossom", "Apple blossom"),
           Amphibian=c("Red Hills Salamander", "none", "Arizona Tree Frog", "none"),
           Bird=c("Northern Flicker", "Willow ptarmigan", "Cactus wren", "Northern mockingbird")
           )
df

##      State                 Flower            Amphibian
## 1  Alabama               Camellia Red Hills Salamander
## 2   Alaska          Forget-me-not                 none
## 3  Arizona Saguaro cactus blossom    Arizona Tree Frog
## 4 Arkansas          Apple blossom                 none
##                   Bird
## 1     Northern Flicker
## 2     Willow ptarmigan
## 3          Cactus wren
## 4 Northern mockingbird

It doesn't neatly fit across the screen

The HTML code for writing this table would be as follows:

<table id="tabletype" style="width:100%">
  <tr>
    <th>State</th>
    <th>Flower</th>
    <th>Amphibian</th>
    <th>Bird</th>
  </tr>
  <tr>
    <td data-th="State">Alabama</td>
    <td data-th="Flower">Camellia</td>
    <td data-th="Amphibian">Red Hills Salamander</td>
    <td data-th="Bird">Northern Flicker</td>
  </tr>
  <tr>
    <td data-th="State">Alaska</td>
    <td data-th="Flower">Forget-me-not</td>
    <td data-th="Amphibian">none</td>
    <td data-th="Bird">Willow ptarmigan</td>
  </tr>
  <tr>
    <td data-th="State">Arizona</td>
    <td data-th="Flower">Saguaro cactus blossom</td>
    <td data-th="Amphibian">Arizona Tree Frog</td>
    <td data-th="Bird">Cactus wren</td>
  </tr>
  <tr>
    <td data-th="State">Arkansas</td>
    <td data-th="Flower">Apple blossom</td>
    <td data-th="Amphibian">none</td>
    <td data-th="Bird">Northern mockingbird</td>
  </tr>
</table>

tabletype refers to the series of instructions in the css style sheet belonging to that table type.

For instance, here is the style sheet for a very simple grid table type:

/*GRIDTABLE STYLE*/
table#gridtable {font-family: 'Helvetica', 'Arial', sans-serif; font-size:16px; color:#333333; border-width: 1px; border-color: #666666; border-collapse:collapse;}
table#gridtable th {font-size:18px;border-width: 1px; padding: 8px; border-style: solid;border-color: #666666; background-color: #dedede;}
table#gridtable td {border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #ffffff;}

The result of this is on the next slide

Simple Grid Table type

The following slides give you some example tables styles that can be written into the custom css and referred to in slidify presentations. They are all available at this github page.

The first set of table examples require you to write out the table in the long HTML format. This is fine for tiny tables like the example here, but would be super annoying for any large table. There are options for turning R output into HTML style code, but I haven't worked out what might be the best solution just yet. In the last few slides I introduce a little function I wrote to turn a data.frame straight into a nice looking table in one line !

All of the following are created by simply modifying the custom css.

Another very Simple style

Zebra Style with colored lines

Zebra Style with solid lines and header filled

Box - Rows change color when hovered over

Another box style

Minimal - Text changes weight when hovered over

Another Simple Hover Table

Clean, modern looking hover table

A green version of the previous example

Another table

Making these tables is great, but nobody wants to write out a bunch of HTML code to make a table. It's easy to make an error, it's boring and it's annoying.

I have a temporary solution - I have written a little function that takes two arguments.

1) the name of the dataframe that I want to turn into a pretty looking table on my slide

2) the tabletype I want it to end up as - i.e. the css format guide for tables that I've predefined in my css.

This is the function - it's ugly. If anybody wants to help me improve it, then great.

tablecode <- function(df, tabletype="gridtable"){
tmp <- noquote(apply(df, 1, function(x) paste0("<td data-th='", sprintf("%s",colnames(df)), "'>", x, "</td>", collapse=" ")))

cat(
c(
noquote(paste0("<table id='", tabletype,"' style='width:100%'> ")),    
noquote(paste0("<tr>", paste0("<th>", sprintf("%s",colnames(df)), "</th>", collapse=" "), "</tr>")),
noquote(unlist(lapply(tmp, function(x) paste0("<tr>", x, "</tr>")))),
noquote("</table>")
)
)

}

The default tabletype is gridtable

The other types you can use are: zebra, zebra1, box, minimal, onecol, simple, hoverTable, flattable, flattable3, another.

You have to have added the css for these into your custom.css file in your assets/css folder.

Let's try this using a different table.

paintings <- data.frame(
Painting = c("Nafea Faa Ipoipo", "The Card Players", "Le Reve", "Three Studies of Lucian Freud", "No. 5, 1948"),
Artist = c("Paul Gauguin", "Paul Cezanne", "Pablo Picasso", "Francis Bacon", "Jackson Pollock"),
Year = c(1892, 1892, 1932, 1969, 1948),
Price = c("$300M", "$259M", "$155M", "$142M", "$140M")
)

paintings

##                        Painting          Artist Year Price
## 1              Nafea Faa Ipoipo    Paul Gauguin 1892 $300M
## 2              The Card Players    Paul Cezanne 1892 $259M
## 3                       Le Reve   Pablo Picasso 1932 $155M
## 4 Three Studies of Lucian Freud   Francis Bacon 1969 $142M
## 5                   No. 5, 1948 Jackson Pollock 1948 $140M

The function is very simple:

tablecode(paintings, tabletype="onecol")

## <table id='onecol' style='width:100%'>  <tr><th>Painting</th> <th>Artist</th> <th>Year</th> <th>Price</th></tr> <tr><td data-th='Painting'>Nafea Faa Ipoipo</td> <td data-th='Artist'>Paul Gauguin</td> <td data-th='Year'>1892</td> <td data-th='Price'>$300M</td></tr> <tr><td data-th='Painting'>The Card Players</td> <td data-th='Artist'>Paul Cezanne</td> <td data-th='Year'>1892</td> <td data-th='Price'>$259M</td></tr> <tr><td data-th='Painting'>Le Reve</td> <td data-th='Artist'>Pablo Picasso</td> <td data-th='Year'>1932</td> <td data-th='Price'>$155M</td></tr> <tr><td data-th='Painting'>Three Studies of Lucian Freud</td> <td data-th='Artist'>Francis Bacon</td> <td data-th='Year'>1969</td> <td data-th='Price'>$142M</td></tr> <tr><td data-th='Painting'>No. 5, 1948</td> <td data-th='Artist'>Jackson Pollock</td> <td data-th='Year'>1948</td> <td data-th='Price'>$140M</td></tr> </table>

This output can simply be copied and pasted into the RMarkdown document between two slide separators to produce the desired table...

I copied and pasted the output of tablecode(paintings) into my RMarkdown document and it works!

An even cooler solution is to add results='asis' to our R chunk options. The below is what I would write at the top of my R chunk to produce the desired table:

{r, results='asis', echo=FALSE}
tablecode(paintings, tabletype="minimal")

The next slide shows the output of this simple one line piece of code ...

It worked !!! We can now write really nice looking tables with one function without having to write out HTML tables in longhand.

Just play around with all the settings in the different table templates in the custom.css file to get your table looking the way you want it. You can even add a new 'id' to the table to make it distinct.

If I get some time, I may even work on extending this function to get it to add inline CSS to the RMarkdown document, thereby allowing the user to on the fly change cell heights, colors, padding, margins, font sizes etc. etc. without having to go and change the custom.css file.... Anyone want to help then give me an email ☺

Adding inline CSS to the RMarkdown document

The next table is produced by simply adding in the following code after the slide divider in our RMarkdown document.

<style>
table#another1 {border-collapse: collapse; border: 1px solid #900000; 
background: #FFCCCC; font-family: 'Helvetica', 'Arial', sans-serif; font-size:16px; color: #003333; }
table#another1 td, th { padding: 3px 3px .75em 3px; line-height: 1.3em; }
table#another1 th {text-shadow: none; font-size:18px; background: #CC0000; color: white; font-weight: 200; text-align: left; padding-right: .1em;  padding-left: .2em; vertical-align: middle; }
</style>

and referring to it like this:

{r, results='asis', echo=FALSE}
tablecode(paintings, tabletype="another1")