HTML in table data is rendering as escaped

[richardtallent]

My data objects (a JSON embedded in the HTML file, no AJAX) have fields that include HTML markup, but the markup is displayed escaped in my sortable-table (rather than being rendered).

Example:

var Stuff = [ { "id": 1, "Result": "<table><tr><td>blah</td></tr></table>" } ];
window.addEventListener('polymer-ready', function(){
    document.getElementById('StuffTable').data = Stuff;
});

How can I disable the HTML encoding in the Result column so the table is rendered inside the cell?

[richardtallent]

Hmm... this appears to be a limitation of Polymer expressions in general.

https://www.polymer-project.org/docs/polymer/expressions.html

There appears to be a workaround (injectBoundHTML), but it's unclear to me how this might be used with this table element.

[richardtallent]

Someone else seems to have a solution called "Juicy." Again, not sure how to integrate this, I'm assuming it would involve overriding cellTemplate for the column where I'm expecting HTML.

https://github.com/Juicy/juicy-html

[richardtallent]

Sorry for the traffic. I figured out how to get juicy-html and sortable-table to play nicely, so I'm back in business!

The solution (in case other newbies wander by) was to install and link juicy-html, then change the cellTemplate of the column to reference a copy of the default cellTemplate (which I gave the ID "htmlcell") with {{value}} replaced by <template is="juicy-html" content="{{ value }}">. Works like a charm.

[stevenrskelton]

No worries about the traffic, I'm still figuring out Polymer too! :smile:

It looks like juicy-html does a lot of extra stuff I'm probably going to need. This project includes an html-echo component which will insecurely print raw HTML into your document. Can't recall where I used it at the moment.