Customizing the Look and Feel of Tables in Displayr

Customizing the Look and Feel of Tables in Displayr

In this post I describe the six main ways of customizing the look and feel of tables in Displayr: (1) using the in-built tables; (2) R Outputs as table; (3) Rules created in Q; (4) HTML widgets; (5) HTML, and (6) using images as backgrounds.

(1) Using Displayr’s in-built tables

When you create a table in Displayr by dragging from the Data Sets Tree (bottom left of the screen) onto a page, the table automatically appears as a default blue table. An example is shown below. You can change the appearance of the table by selecting it and clicking Appearance > Tables Styles (Tables) and Appearance > Highlight Results (Significance). This is the most straightforward approach to formatting tables in Displayr.

(2) R Outputs as tables

Where the table is created by writing R code in an R Output (Insert > R Output (Analysis)), a blue table is also created by default. As with the standard tables, you can customize the appearance using Appearance > Table Styles (Table)). However, the table also has additional functionality, with sort and filter buttons in the header row. In this example, my code is as simple as just being the name of the table shown in the previous section (table.Q3.age).


(3) Q Tables and Charts

Tables created using conditional formatting (rules) in Displayr’s sister program, Q, can also be viewed in Displayr. These are purpose-built for automatically formatting large tables from surveys.

This approach can also be used to automatically format table-like charts, such as the one shown below.

(4) HTML widgets

Various HMTL widgets have been developed for translating R data into attractively formatted tables with a few lines of code, with the DT and formattable package perhaps being the two most useful. The DT package allows creation of fairly generic-looking tables with an emphasis on various usability-related features (e.g., search, sorting), whereas formattable focuses on the creation of more striking tables. The formattable package makes quite striking tables, such as the two below.




Two key things to keep in mind if trying to use formattable are:

  • It is quite technical to use. If you have never written code before, this is not the place to start.
  • While it makes things that look great, at the end of the day you need to be creating things in the house style of formattable. You will struggle to get it to match the outputs of other programs, unless you are a truly awesome programmer.

I’ve written a post about how this all works – Make Beautiful Tables with the Formattable Package.

(5) Pure HTML

As you have probably guessed, HTML widgets use HTML to do the formatting. However, the HTML is in the background, and the user controls it by giving R commands, as in the examples above. It is also possible to use pure HTML. This is by far the most flexible approach, as you can do pretty much anything if you know how. And, if you know a bit of R, you can use functions to automate the whole process. For example, one of our clients had a strict style guide they needed to follow, where all the tables would look the same on the left side, but variously showed numbers, heat map shading, and charts on the right. We created an R function using HTML which allowed them to create these tables automatically. Creating Tables Using R and Pure HTML provides more detail about how to do this.




(6) Using images as backgrounds.

In the last example above I have cheated a bit. HTML is used to create the table, but I have not used it to create the chart. Instead, I create an HTML table with a blank last column, and then inserted a bar chart (Insert > Visualization (Analysis)) on top of it.

A more general strategy is to use other programs (e.g., Illustrator) to create picture-perfect backgrounds, and then place charts and blank tables of numbers on top of them. This gives the highest level of control over appearance, and is superior to HTML for really fiddly things, as a problem with HTML is that different browsers can show things inconsistently, making it difficult to make things perfect unless you are a pro web developer.

If you want to play with any of these examples, you can open them up in Displayr by clicking here.

About Tim Bock

Tim Bock is the founder of Displayr. Tim is a data scientist, who has consulted, published academic papers, and won awards, for problems/techniques as diverse as neural networks, mixture models, data fusion, market segmentation, IPO pricing, small sample research, and data visualization. He has conducted data science projects for numerous companies, including Pfizer, Coca Cola, ACNielsen, KFC, Weight Watchers, Unilever, and Nestle. He is also the founder of Q www.qresearchsoftware.com, a data science product designed for survey research, which is used by all the world’s seven largest market research consultancies. He studied econometrics, maths, and marketing, and has a University Medal and PhD from the University of New South Wales (Australia’s leading research university), where he was an adjunct member of staff for 15 years.