pivottable display html in table

Question

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>

I had to unfortunately remove support for this feature after all as it created an XSS security vulnerability. See https://github.com/nicolaskruchten/pivottable/pull/401 for details — nicolaskruchten, Dec 11 '15 at 14:01

Emil Condrea · Accepted Answer · 2014-09-24T06:08:52.130

5

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
            }
        }
    );
 });

edited Sep 24 '14 at 06:08

answered Sep 23 '14 at 20:17

Emil Condrea

9,705
7
33
52

I salute you friend it works perfect except when I drag n drop image field onto pvtAxisContainer pvtHorizList. I doesnt display image there – Ktt Sep 24 '14 at 05:57
1

@Ktt in which version it does not work? first or second? It were multiple `textContent` properties and I updated all on jsfiddle: http://jsfiddle.net/u3pwa0tx/1/ – Emil Condrea Sep 24 '14 at 06:01
It was first one and I checked it now and it works! thank you very much – Ktt Sep 24 '14 at 06:35
I also updated my answer that I sent a pull request with this feature on the main repository and if the maintainer accepts it you will be able to use it directly from pivot.js – Emil Condrea Sep 24 '14 at 06:36
1

I also created an issue yesterday, https://github.com/nicolaskruchten/pivottable/issues/213 maybe you can also answer it there to contribute as well – Ktt Sep 24 '14 at 06:38
There is a point in your script. you say like th.innerHTML = txt; //<===================edited here. what do you mean by that? – Ktt Sep 24 '14 at 09:00
there is a little incident too, please check http://jsfiddle.net/u3pwa0tx/2/. it is bug when you set columns and rows when initializing – Ktt Sep 24 '14 at 09:04
1

you should pass renderers along with rows and cols: http://jsfiddle.net/n7pngdhg/1/ – Emil Condrea Sep 24 '14 at 09:17

pivottable display html in table

1 Answers1

Linked