Row label hyperlinks

[cc5350]

I have used the jQuery version of this library for a long time now and it has been a huge benefit! In that version, I had implemented a tiny change to allow pivot row labels to be hyperlinks. Now we're starting to use React, and I'm trying to figure out how to make this work in the react pivottable code. But, being new to React/Node, I haven't been able to track down exactly how to do that yet, so I'm hoping for some help (or even better, adding the feature in the library). Thanks for any help/guidance.

[nicolaskruchten]

Unfortunately, this would be quite hard to do in this version, and is not a feature I think would be of general interest, so not something I would have time to prioritize... Sorry!

[nicolaskruchten]

But I should say I'm glad that you've been getting good mileage out of the other version :)

[cc5350]

Thanks for the fast feedback! I had some hope it might be (nearly) as simple as the jQuery version, changing th.textContent = txt; to th.innerHTML = txt;.

If I find a solution I'll post it. This is actually a huge time saver for my users, because they use the pivottable UI to explore data behind various charts. At some point in exploring you get down to a list with individual items, and then you want to jump to the actual item to see all of the details. Having the item ID as a link saves a lot of copying/pasting.

Thanks.

[cc5350]

I figured it out. Solution below. I'm sure this isn't for everyone, but it works for my use cases.

In TableRenderers.jsx, set the inner HTML rather than setting the text for the th pivot row label elements, using the dangerouslySetInnerHTML prop.

Original code:

                      <th
                        key={`rowKeyLabel${i}-${j}`}
                        className="pvtRowLabel"
                        rowSpan={x}
                        colSpan={
                          j === rowAttrs.length - 1 && colAttrs.length !== 0
                            ? 2
                            : 1
                        }
                      >
                        {txt}
                      </th>
                    );

Modified code:

                    return (
                      <th
                        key={`rowKeyLabel${i}-${j}`}
                        className="pvtRowLabel"
                        rowSpan={x}
                        colSpan={
                          j === rowAttrs.length - 1 && colAttrs.length !== 0
                            ? 2
                            : 1
                        }
                        dangerouslySetInnerHTML={{ __html: txt }}
                      >

                      </th>
                    );