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 seems to only apply to the last cell in a sub section. What is different between the last cell in the subsection and the cells preceding it that causes this? Is there an additional selector I need to use?

I am using the following script

 

 

 

 

 

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{border-color:transparent ;}`);
         style.appendChild(node);
	document.head.appendChild(style)
})

 

 

 

 

 

 

  • 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

2 Replies

Replies have been turned off for this discussion
  • 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

      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.