pivottable display html in table
I am trying to use https://github.com/nicolaskruchten/pivottable, basically I want to show image in the table. What I've done so far is ; but it wont display the image as img tag instead it considers it as string
<body>
<script type="text/javascript">
$(function(){
$("#output").pivotUI(
[
{product: "product1", image: "<img src='image1' alt='' height='42' width='42'>"},
{product: "product2", image: "<img src='image2' alt='' height='42' width='42'>"}
]
);
});
</script>
<p><a href="http://nicolas.kruchten.com/pivottable/examples/index.html">« back to examples</a></p>
<div id="output" style="margin: 10px;"></div>
</body>
Answer
Since the table renderer does not support html values for th elements, it sets explicitely the textContent property of th you must create your own renderer.
You have two choices:
1.Create a renderer based on Table renderer code and change textContent to innerHTML. I will use a jsfiddle snippet since the render function is pretty big: http://jsfiddle.net/u3pwa0tx/
2.Reuse existing Table renderer which displays the html as plain text but before returning it to the parent to be appended, move all th text to th html.
Edit: I created a pull request on main repository https://github.com/nicolaskruchten/pivottable/pull/214
$(function(){
var rendererHtml = function(){
var result = pivotTableRenderer2.apply(this,arguments);
$(result).find('th').each(function(index,elem){
var $elem = $(elem);
$elem.html($elem.text());
})
return result;
}
$("#output").pivotUI(
[
{product: "product1", image: "<img src='image1' alt='' height='42' width='42'>"},
{product: "product2", image: "<img src='image2' alt='' height='42' width='42'>"}
],{
renderers:{
'table2Renderer': rendererHtml
}
}
);
});