First Column of a Grid is the headers?

Question

Is there a way (using jquery, yui or some other js library) to display a grid that has the headers in the first column?

That is, I would have something like:

Name       Geoffrey
EMail      GMan67@..
Username   GJFM

Instead of:

Name      EMail      Username
Geoffrey  GMan67@..  GJFM

G-Man

Answer 1

What you are wanting to create is called a pivot table. I'm not aware of any out of the box solutions for this though.

Answer 2

Yes there is a way to do it, it took me an hour to write but It was a nice exercise :)

This will switch headers and columns inplace. And it works both ways. i.e. you can use it to switch the two styles back and forth.

// number of columns
columns = $('table.flipme th').size();
// number of rows minus one to exclude the header
rows = $('table.flipme tr').size() - 1;  
$table = $('table.flipme');

// Add rows to the table to equal the number of columns
while (rows < columns){
    $table.append('<tr></tr>');
    rows++
}

// flip in place and mark the old rows and
// columns as a duplicate to be removed
for (i=1; i<=rows; i++){
    $('tr')
    .children(':nth-child(' + i + ')').addClass('delete')
    .clone(true).removeClass('delete')
    .appendTo('tr:eq(' + i + ')');
}
// remove dublicate
$('.delete').remove();