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

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

  • 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 – Chaithra K N Mar 18 '17 at 17:17
  • And you generate the component based off that field. Or use aura:HTML – Eric Mar 18 '17 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. – Chaithra K N Mar 18 '17 at 17:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.