Formatting Pivot Header Rows and Columns via CSS

Comments

10 comments

  • Avatar
    JJ Chritton

    This has been tremendously useful in formatting our pivot tables to look a lot nicer. Thanks!

    0
    Comment actions Permalink
  • Avatar
    Janet Erdman

    What about if you just what to alternate the color of every other row in a pivot table?

    0
    Comment actions Permalink
  • Avatar
    Jessica Orlando

    This is great! Is there a way to keep this formatting when downloading to Excel?

    0
    Comment actions Permalink
  • Avatar
    Jessica Orlando

    I noticed if I have a field on both the rows and columns, the column headers do not take the formatting, only the row headers. Is there a way to format everything?

     

     

    0
    Comment actions Permalink
  • Avatar
    Jay Dastur

    Hi Jessica

    No, the excel download does not seem to respect the formatting. That would be a product feature

    0
    Comment actions Permalink
  • Avatar
    Jay Dastur

    Let me look into the formatting of the columns

    0
    Comment actions Permalink
  • Avatar
    Jessica Orlando

    Just checking if there was ever a solution to also format the Column headers?

    0
    Comment actions Permalink
  • Avatar
    JJ Chritton

    We were able to format the headers with a few tweaks to the script above by digging around in the dev tools in the browser:

    //sub header columns
    var $ps2 = $(".p-grand-total-head,.p-dim-member-head", element);
    $ps2.css('font-size' , '14px');
    $ps2.css('font-weight' , 'bold');
    $ps2.css('color' , 'white');
    $ps2.css('background-color' , '#005b92');
    $ps2.css('text-align' , 'center');
    $ps2.css('vertical-align' , 'middle');


    //top header column 
    var $ps3 = $(".p-fake-measure-head, .p-fake-measure-head p-colored", element);
    $ps3.css('font-size' , '18px');
    $ps3.css('font-weight' , 'bold');
    $ps3.css('color' , 'white');
    $ps3.css('background-color' , '#80bde1');
    $ps3.css('text-align' , 'center');
    $ps3.css('vertical-align' , 'middle');
    $ps3.css('height' , 'auto');

    The main annoyance with this is that the column header extends well beyond the rows in the pivot table, leaving an overhang that looks strange to me:

    0
    Comment actions Permalink
  • Avatar
    Jessica Orlando

    Thank JJ!

    I have this script which removes the lines extending past a Pivot Table. I put it after your script and it removed the column header extending beyond the rows.

    //PIVOT TABLE REMOVE EXTENDING LINES
    widget.on("domready", function(w){
    var tags = $('td.phantom', element);
    for(var i=0; i<tags.length; i++) {
    tags[i].style.width = '0px';
    }
    });

     

    Have you seen any scripts to completely remove the top header column (light blue in your example)? 

    0
    Comment actions Permalink
  • Avatar
    JJ Chritton

    Thanks Jessica! That makes my day. Teamwork for the win!

    For the issue of removing the entire top header, you could try setting the height to 0? Sometimes I've seen issues with rendering the correct widget height with scripts like that, but it might not be enough for one row to make a difference. So something like this to the script above:

    $ps3.css('height' , 0);

    0
    Comment actions Permalink

Please sign in to leave a comment.