Tables: HTML-Based vs DIV-Based vs SVG-Based

[John Hilbert]

Does any one have any opinions on what is the best way to create complex animated tables these days?  What started this was reproducing a dashboard I had on hand which actually had quite a few tables in them.  One of these tables is laid out like this:

			Column Group			Column Group			Column Group
			C1	C2	C3	C1	C2	C3	C1	C2	C3
Row Group (rotate)	1	Label	R1C1
	2	Label	R2C1
	3	Label
Total				R4C2	2
Row Group (rotate)	1	Label
	2	Label
	3	Label
Total				2	3
Supplementary Row				1 / 2	2 / 3

Notice that there are two header (green) columns with one grouping the other and 3 row headers (red) with some grouping others while others are totals or supplementary calculations.  Gray is the data and white should be deleted (or not visible).  Since most table + d3 examples (which are scarce) simply use typical HTML table tags which is where I started.  Hopefully you can see where I ran into issues:

• It appeared easier to layout the table first than have d3 create it from scratch (with all those column and row spans), however I needed some way to link the data to the correct row and column now.
• It also appears that the spans make mapping the data table to the actual HTML table difficult.  For instance R1C1 is actually the 3rd <td> tag in the 3rd <tr> tag however R2C1 is NOT the 3rd <td> tag in the 4th <tr>.  Anyone want to take a guess where R4C2 is?
• Because of this CSS row and column coloring becomes difficult also.
• Another issue I noticed that I would run into is rotating the text in the row groups.  The web appears to be littered with solutions but they appear to be browser dependent (I figure all the other d3 SVG graphics would look same in all browsers supporting SVG, i.e. it would work or not).
• The final straw was collapsing and sorting (thought not particularly needed at this juncture).  For instance if I wanted to sort on C1 only wanted both 1-3 groups to reorder, leaving the totals and supplementary rows in place.  Also collapsing the row or column groups would be nice (think a d3 tree hybrid).

Understand I am a data scientist, not a web designer or programmer so I am pretty green.  The only thing simplification I came up with was by nesting the two row groups into sub-tables (though this appeared to only complicated things).  Over the last few days I have come to the conclusion that I need to create some functions to map my data from this Row / Column space to the HTML TR / TD space.  That is when I thought to uses SVG text and rectangles.  Here are my thoughts on why:

• I already have to create functions from a Row/Column space, why not map that to X/Y.  This actually would be easier in the sense that R2C1 is exactly below R1C1 where in the HTML table it is not.  This does not come without difficulty: HTML handles the heights, widths, and wrapping where in SVG I have to manually handle (as far as I know).
• Rotating my labels would be easier.
• Collapsing & sorting may be easier.
• I get transitions.  For example in a quick mock-up I was able to translate a particular cell's text off the screen and fade as data changed.  In my experiments with HTML & d3 I was not able to do this (which makes sense, SVG > HTML, see http://mbostock.github.io/d3/tutorial/bar-1.html).  Another nice transition I was able to easily implement was zoom on hoover.  Since the cell = rectangle + text, I simply added a scale(2) function to each cell.

So why the hesitation?  Well since I am a bit new to this, Google is my friend and honestly I have not really found anyone making this leap.  I have found many packages to give interactivity to HTML tables but no one appears to have made a framework for tables in SVG.  I was starting to think that there was actually good reason not to do what I am suggesting.  That was until I saw the post, Anyone have a great data grid, or want to work on one?.  This appeared to delve more into a DIV-based approach and interfacing with slickGrid (not sure on the pros/cons of this approach).  However further down the thread was Chris Viau thoughts on doing what I suggest and further more MIKE BOSTOCK and KEVIN QUEALY SVG table implementation in the NYTimes. The latter I take as Mike tipping his hat to me to use SVG for tables.

What I ask is this:

• Has anyone thought about jumping ship like me and start using SVG for tables?
• Does anyone else have some pro/cons of doing this?
• If anyone has begun using SVG for tables, any tips?
• More philosophically, what is the future of web tables?

[Chris Rich]

One of the only downside I can think of is that SVG doesn't word wrap easily, whereas the text in a <table> would.  That being said, I say charge on and try and implement an all SVG version =).  

Chris

P.S.  Found a block doing some word wrapping with SVG http://bl.ocks.org/mundhradevang/1387786

[John Hilbert]

Thanks Chris for the vote and tip. Coincidentally I was writing a similar blog post on this subject last night and the same issue occurred to me. I was actually worried about word wrapping in general since chart axises occasionally are lengthy. Either way I've made fixes for this in R and other languages, so it shouldn't be a deal breaker.

[Chris Rich]

Make sure to share your blocks as as you come up with stuff.  I'd be curious to see your solutions.

Chris

[Scott MacDonald]

Hi John,

I realize this is a really old thread but was wondering how you made out with SVG tables?  I find myself needing to build a very similar table as you describe in the beginning of this thread.

Appreciate your time.

Cheers,

Scott