2

I have below code where i am trying to display data in a table format based the html element stored in a field.

<table class="slds-table slds-table--bordered slds-table--cell-buffer">
    <thead aura:id="t1"></thead>
    <tbody aura:id="t2"></tbody>
</table>

var t1 = component.find("t1");
var t2 = component.find("t2");
var thead= '', tbody= '';
for (var i = 0, listLength = tableRowList.length; i < listLength; i++) {
    if (tableRowList[i].IsHeader__c) {
        thead=thead+tableRowList[i].Row__c;
    } else {
        tbody=tbody+tableRowList[i].Row__c;
    }
}
t1.getElement().innerHTML += thead;
t2.getElement().innerHTML += tbody;
console.log('@@@@',t1.getElement().innerHTML);

With locker service enabled org, the innerHtml tag is removing the html elements in the data and trying to display the text value.

Any solution for above problem?

1 Answer 1

1

Something like this works:

$A.createComponent("aura:html", {"tag":"th", "body":"My Header", "HTMLAttributes":{"id":"myFirstTH"}},
            function(newCmp, status) {
                // Push newCmp to v.body of existing component
                var t1 = component.find("t1");
                t1.set("v.body",newCmp);
            }
        );

Although if you have HTML elements in the body it gets more complicated but this will add the TH element to the t1 element as an example

3
  • Thanks for the solution, but i have to display html elements dynamically. i.e html code will be present in some field, i need to fetch that field and display then in aura. Example field may contain value in this form <tr> <th>Test Column 1</th> <th>Test Column 2</th> <th>Test Column 3</th> <th>Test Column 4</th> <th>Test Column 5</th> </tr> <tr> <td>Lorem Lorem Lorem Lorem</td> <td>Ipsum Lorem</td> <td>Test Test</td> <td><b>Bold text example</b></td> <td>Test </td> </tr> This value should render as html table in aura Mar 18, 2017 at 17:17
  • And you generate the component based off that field. Or use aura:HTML
    – Eric
    Mar 18, 2017 at 17:18
  • In the 1st example , thead and tbody has that value. How could i use it in aura:Html? I am not getting to put it in aura:Html. Mar 18, 2017 at 17:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .