First Column of a Grid is the headers?

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

From stackoverflow

• 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.

• 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();