Working with <table> elements in Dart

Much like with my java_osx snippet, I haven't found any good and up-to-date guides online that cover this topic, so here I am writing one.

Find more information on Dart here.

For the sake of simplicity I will not be using Dart's cascade feature in my code.

Introduction to Tables in Dart

These are the classes you'll have to work with:

TableElement : The <table> itself, contains TableSectionElement s

: The itself, contains s TableSectionElement : Parts of the <table> (like <thead> and <tfoot> ), contains TableRowElement s

: Parts of the (like and ), contains s TableRowElement : <tr> element, contains TableCellElement s

: element, contains s TableCellElement : <td> element, contains text

You should never have to instantiate TableSectionElement s, TableRowElement s or TableCellElement s yourself:

TableElement.createTHead() , TableElement.createTBody() and TableElement.createTFoot() will insert and return a TableSectionElement signifying <thead> , <tbody> and <tfoot> respectively

, and will insert and return a signifying , and respectively TableSectionElement.insertRow(int index) inserts and returns a TableRowElement

inserts and returns a TableRowElement.insertCell(int index) inserts and returns a TableCellElement

Creating a table

TableElement table = new TableElement();

Creating a thead

TableSectionElement tHead = table.createTHead();

Setting thead Column Titles

TableRowElement tHeadRow = tHead.insertRow(0); Element column1Title = new Element.tag("th"); column1Title.text = "Column 1"; tHeadRow.nodes.add(column1Title);

You'll notice I'm manually creating and adding the th element, this is because Dart doesn't appear to support th elements. An issue has been opened regarding this but has been closed with no real solution.

Creating a tbody

TableSectionElement tBody = table.createTBody();

Adding Rows

TableRowElement tRow = tBody.insertRow(0);

Adding Cells

TableCellElement tCell = tRow.insertCell(0); tCell.text = "Cell data";

Creating a tfoot

TableSectionElement tFoot = table.createTFoot();

Add rows and data to it normally with insertRow and insertCell .

Full Code

TableElement table = new TableElement(); TableSectionElement tHead = table.createTHead(); TableRowElement tHeadRow = tHead.insertRow(0); Element column1Title = new Element.tag("th"); column1Title.text = "Column 1"; tHeadRow.nodes.add(column1Title); Element column2Title = new Element.tag("th"); column2Title.text = "Column 2"; tHeadRow.nodes.add(column2Title); TableSectionElement tBody = table.createTBody(); TableRowElement tBodyRow1 = tBody.insertRow(0); TableCellElement tBodyRow1Cell1 = tBodyRow1.insertCell(0); tBodyRow1Cell1.text = "Cell 1"; TableCellElement tBodyRow1Cell2 = tBodyRow1.insertCell(1); tBodyRow1Cell2.text = "Cell 2"; TableSectionElement tFoot = table.createTFoot(); TableRowElement tFootRow = tFoot.insertRow(0); TableCellElement column1Foot = tFootRow.insertCell(0); column1Foot.text = "Column 1"; TableCellElement column2Foot = tFootRow.insertCell(1); column2Foot.text = "Column 2";

Will produce: