JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>
CSS
.link {
text-decoration: underline !important;
cursor: pointer;
color: #457dff !important;
}
JavaScript
var jsonData = [{
billDate: {
type: "date string"
},
userName: {
type: "string"
},
entryId: {
type: "id"
}
},
{
billDate: "2020-02-05",
userName: 'user1',
entryId: 'userId1&¶m1'
},
{
billDate: "2019-10-15",
userName: 'user2',
entryId: 'userId2&¶m2'
},
{
billDate: "2015-12-22",
userName: 'user3',
entryId: 'userId3&¶m3'
},
{
billDate: "2019-11-09",
userName: 'user1',
entryId: 'userId4&¶m1'
}
];
var pivot = new Flexmonster({
container: "pivot-container",
customizeCell: customizeCellFunction,
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
report: {
dataSource: {
data: jsonData,
dataSourceType: "json"
},
slice: {
reportFilters: [],
rows: [{
uniqueName: "userName"
}],
columns: [{
uniqueName: "[Measures]"
}],
measures: [{
uniqueName: "billDate"
}]
}
}
});
function customizeCellFunction(cell, data) {
let resolveLinkProperties = function(data) {
let link = 'wwww.somelink.com/${0}?param=${1}';
let caption = data.label;
let parts = (function() {
if (typeof(data.recordId) == "string") {
return data.recordId.split('&&')
} else {
return data.recordId[0].split('&&')
}
})();
for (let i = 0; i < parts.length; i++) {
link = link.replace('${' + i + '}', parts[i]);
}
return {
caption: caption,
link: link
};
};
if ((data.hierarchy && data.hierarchy.uniqueName == "userName" && data.member) ||
(data.hierarchy && data.hierarchy.uniqueName == "userName" && data.isDrillThrough && data.recordId)) {
let hl = resolveLinkProperties(data);
cell.style['z-index'] = 1;
cell.text = `<a href="https://${hl.link}" target=”_blank” class='link'>${hl.caption}</a>`
}
}