How to add rows to TableElement in Dart?

Question

I'm playing with Dart, and I'm trying to create a new TableElement with a header and one row in the tbody.

  TableElement table = new TableElement();

  Element head = table.createTHead();
  TableRowElement headerRow =  table.tHead.insertRow(-1);
  headerRow.insertCell(0).text = "9";
  headerRow.insertCell(1).text = "aaa";
  headerRow.insertCell(2).text = "bbb";
  headerRow.insertCell(3).text = "ccc";

  var tBody = table.createTBody();
  TableRowElement newLine = table.insertRow(-1); // add at the end
  newLine.insertCell(0).text = "9";
  newLine.insertCell(1).text = "aaa";
  newLine.insertCell(2).text = "bbb";
  newLine.insertCell(3).text = "ccc";

Unfortunately, both rows end up in the thead section. On top of that, if I leave only

  TableElement table = new TableElement();

  var tBody = table.createTBody();
  TableRowElement newLine = table.insertRow(-1); // add at the end
  newLine.insertCell(0).text = "9";
  newLine.insertCell(1).text = "aaa";
  newLine.insertCell(2).text = "bbb";
  newLine.insertCell(3).text = "ccc";

the row gets to tbody section, as expected. Any Ideas? Dart SDK 9474.

Answer 1

In your example, you are adding the first row directly into the table header that you have created. But the second row, you are trying to add directly into your table (not into your TBody)

Try the following:

TableElement table = new TableElement();

// ... See below ...

var tBody = table.createTBody();
TableElement newLine = tBody.insertRow(-1);
newLine.insertCell(0).text = "9";
newLine.insertCell(1).text = "aaa";
newLine.insertCell(2).text = "bbb";
newLine.insertCell(3).text = "ccc";

As mentioned in the comments, currently dart:html library does not support table header elements. As such a little bit of a work around needs to be done. The create table headers you can use the following:

Element head = table.createTHead();
TableRowElement headerRow =  table.tHead.insertRow(-1);
var cell = new Element.tag('th');
cell.text = '9';
headerRow.insertAdjacentElement('beforeend', cell);
cell = new Element.tag('th');
cell.text = 'aaa';
headerRow.insertAdjacentElement('beforeend', cell);
cell = new Element.tag('th');
cell.text = 'bbb';
headerRow.insertAdjacentElement('beforeend', cell);
cell = new Element.tag('th');
cell.text = 'ccc';
headerRow.insertAdjacentElement('beforeend', cell);

// ... See above ...

Note however that the insertAdjacentElement does not work for firefox (as they chose not to implement that JavaScript method). And alternative is to use:

headerRow.nodes.add(cell);

Note that this is a work around and does not allow for indexing in the same way as insertCell and involves much more work to create the cells individually. This provides a work around util the two bugs listed in comments are resolved.

Answer 2

The below code worked fine with me:

 TableElement table2 = new TableElement();
 table2.style.width='100%';
 var tBody2 = table2.createTBody(); 

 table2.tHead.insertRow(-1)..insertCell(0).nodes.add(new Element.tag('th')..text = '1')
                       ..insertCell(1).nodes.add(new Element.tag('th')..text = '2')
                       ..insertCell(2).nodes.add( new Element.tag('th')..text = '3')
                       ..insertCell(3).nodes.add( new Element.tag('th')..text = '4');

 tBody2.insertRow(0)..insertCell(0).text = "9"
                ..insertCell(1).text = "aaa"
                ..insertCell(2).text = "bbb"
                ..insertCell(3).text = "ccc";

 tBody2.insertRow(1)..insertCell(0).text = "9"
                ..insertCell(1).text = "aaa"
                ..insertCell(2).text = "bbb"
                ..insertCell(3).text = "ccc";

 tBody2.insertRow(2)..insertCell(0).text = "9"
                ..insertCell(1).text = "aaa"
                ..insertCell(2).text = "bbb"
                ..insertCell(3).text = "ccc";