Forum Discussion

andrewmenezes's avatar
andrewmenezes
Data Storage
04-07-2023
Solved

Pivot Cell Styling inconsistent

I am having trouble getting the styling on table cells consistent on pivot tables. I am trying to get the line in the attached image between the 3rd and 4th columns all the way down but the styling...
dashboards & reporting
  • Helena_qbeeq's avatar
    Helena_qbeeq
    04-13-2023

    Hi andrewmenezes !

    I adapted slightly your script, and I think I got to your desired outcome.

    Please let me know if it works 🙂

    widget.transformPivot(
  {},
  function (metadata, cell) {
       //set default side and tob/bottom cell colors
    	cell.style.borderColor = 'lightgrey transparent';
      //set line to separate columns 3 & 4
	   if (metadata.colIndex == 2) {
      cell.style.borderColor = 'lightgrey lightgray lightgrey transparent'
    }
	   if (metadata.colIndex == 3) {
      cell.style.borderColor = 'lightgrey transparent lightgrey black'
    }
	
  }
);
 
 
//Set the default border color as transparent for the table cells
prism.on("dashboardloaded",function(){
	
	const style = document.createElement("style");
        const node = document.createTextNode(`.table-grid__cell--col-3{border-right-color:transparent ;}`);
         style.appendChild(node);
	document.head.appendChild(style)
})

     

    Always here to help,
    Helena from QBeeQ
    [email protected]
    QBeeQ - Gold Implementation and Development Partner

Helena_qbeeq's avatar
Helena_qbeeq
Cloud Apps
04-13-2023

Hi andrewmenezes !

I adapted slightly your script, and I think I got to your desired outcome.

Please let me know if it works 🙂

widget.transformPivot(
  {},
  function (metadata, cell) {
       //set default side and tob/bottom cell colors
    	cell.style.borderColor = 'lightgrey transparent';
      //set line to separate columns 3 & 4
	   if (metadata.colIndex == 2) {
      cell.style.borderColor = 'lightgrey lightgray lightgrey transparent'
    }
	   if (metadata.colIndex == 3) {
      cell.style.borderColor = 'lightgrey transparent lightgrey black'
    }
	
  }
);
 
 
//Set the default border color as transparent for the table cells
prism.on("dashboardloaded",function(){
	
	const style = document.createElement("style");
        const node = document.createTextNode(`.table-grid__cell--col-3{border-right-color:transparent ;}`);
         style.appendChild(node);
	document.head.appendChild(style)
})

 

Always here to help,
Helena from QBeeQ
[email protected]
QBeeQ - Gold Implementation and Development Partner

  • andrewmenezes's avatar
    andrewmenezes
    Data Storage
    04-13-2023

    Hi thanks so much for the help.

    It did work as I wanted it to, once I saw how you did it I realized I over-complicated it initially and just the following ended up working as well, but works for any length of pivot table

     

    prism.on("dashboardloaded",function(){
	
	const style = document.createElement("style");
	
        const node = document.createTextNode(`.table-grid__cell--col-2{border-right-color:lightgrey ;}`);
	const node2 = document.createTextNode(`.table-grid__cell{border-color:lightgrey transparent ;}`);
         style.appendChild(node2);
	style.appendChild(node);
	document.head.appendChild(style)
})

     Thanks again.