Create table in word with data which is in html form using office.js

Question

I am creating an addin which displays data from database in table form using office.js. and in that table column can have data in html form. So my requirement is when i create the table and in that table if any column have html contents that should be displayed as normal text with formatting .

I found some code that creates the table

 function writeTable() {
    // Build table.
    var myTable = new Office.TableData();
    myTable.headers = [["Cities"]];
    myTable.rows = [['<b>Hello there</b>'], ['Roma'], ['Tokyo'], ['Seattle']];

    // Write table.
    Office.context.document.setSelectedDataAsync(myTable, { coercionType: Office.CoercionType.Table },
        function (result) {
            var error = result.error
            if (result.status === Office.AsyncResultStatus.Failed) {
                write(error.name + ": " + error.message);
            }
        });
}

In the above code

myTable.rows = [['<b>Hello there</b>'], ['Roma'], ['Tokyo'], ['Seattle']];

in above code the first value is html contents so when the table is created the html should not be displayed and the output should be like Hello there in bold .

I also found the code that actually displays the html in normal form as needed but i am not able to use it with the code mentioned above. The code i found for html rendering is bellow.

function writeHtmlData() {
    Office.context.document.setSelectedDataAsync("<b>Hello</b> World!", { coercionType: Office.CoercionType.Html }, function (asyncResult) {

        if (asyncResult.status === Office.AsyncResultStatus.Failed) {
          //  write('Error: ' + asyncResult.error.message);
        }
    });
}

Thank you!

Answer 1

You could generate the whole table in HTML and then insert it as HTML.

function writeHtmlData() {
    console.log('writeHtmlData');
    var headers = [["Cities"]];
    var rows = [['<b>Hello there</b>'], ['Roma'], ['Tokyo'], ['Seattle']];
    var html = '<table>';
    html += '<thead>';
    for (var i = 0; i < headers.length; i++) {
        html += '<tr>';
        var cells = headers[i];
        for (var j = 0; j < cells.length; j++) {
            html += '<th>' + cells[j] + '</th>';
        }
        html += '</tr>';
    }
    html += '</tr>';
    html += '</thead>';
    html += '<tbody>';
    for (var i = 0; i < rows.length; i++) {
        html += '<tr>';
        var cells = rows[i];
        for (var j = 0; j < cells.length; j++) {
            html += '<td>' + cells[j] + '</td>';
        }
        html += '</tr>';
    }
    html += '</tbody>';
    html += '</table>';

    Office.context.document.setSelectedDataAsync(html, { coercionType: Office.CoercionType.Html }, function (asyncResult) {
        if (asyncResult.status == "failed") {
            console.debug("Action failed with error: " + asyncResult.error.message);
        }
    });
}