Formatting Pivot Header Rows and Columns via CSS

Comments

18 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
  • Avatar
    Toby De Lorenzo

    Hey All, 

    Wondering if there is a way we can restrict this formatting to a single column, I'm finding that it is looking for the key word within sentences in other columns. 

    I've tried the filter function but it doesn't seem to have an effect.

    $("p").filter(function() {
        return $(this).text() === "hello";
    }).css("font-weight", "bold");
    0
    Comment actions Permalink
  • Avatar
    Janet Erdman

    Hello All,

     

    I'm hoping someone can assist me with the below pivot table script.

    - I'd like to have the whole Header row the same color. i.e. 01/2018 to 12/2018 so that they matched the Service Bucket and Grand Total.

    - I'd also like to have a border around the outside of the pivot table

    - The bottom row Grand Total to be colored in like the values  

    - How to change the odd rows background color

     

    Current Sisense View: 

    widget.on("ready", function(w, args) {


    //header columns
    var $ps1 = $(".p-grand-total-head,.p-dim-head", element);
    $ps1.css('font-size' , '14px');
    $ps1.css('font-weight' , 'bolder');
    $ps1.css('color' , 'White');
    $ps1.css('background-color' , '#951a2e');
    $ps1.css('text-align' , 'center');
    $ps1.css('vertical-align' , 'middle');

    //total rows
    var $ps2= $(".p-total-row-val,.p-total-row-head", element);
    $ps2.css('font-size' , '12px');
    $ps2.css('font-weight' , 'plain');
    $ps2.css('color' , 'white');
    $ps2.css('background-color' , '#951a2e');
    $ps2.css('border-top', 'thin solid #951a2e');
    $ps2.css('border-right', 'thin solid #951a2e');
    $ps2.css('border-left', 'thin solid #951a2e');


    //header values
    var $ps3 = $(".p-dim-member", element);
    $ps3.css('font-size' , '13px');
    $ps3.css('font-weight' , 'bold');
    $ps3.css('color' , '#951a2e');
    $ps3.css('text-align' , 'left');

    //Set bottom border for all cells
    $tcells = $("[fidx]", element);
    $tcells.css('border-bottom', 'thin solid #951a2e');
    $tcells.css('border-right', 'thin solid #951a2e');

    });

     

    Example of how I'd like it to look from excel: 

     

    Thanks in advance for any assistance... 

    1
    Comment actions Permalink
  • Avatar
    Ravid Paldi

    Hi Janet,

    How are you? 

     

    We are working on a new free plugin that will be launched to the marketplace soon that will enable you to easily customize your tables without using CSS or JS at the dashboard level. 

    I can give you early access once its ready (in about a week or so).

    Let's discuss it on our meeting today. 

     

    Cheers,

    Ravid

    Paldi Solutions

    0
    Comment actions Permalink
  • Avatar
    YourDMS Dev

    Good Afternoon all,

    This looks great!

    Ravid, are we also able to have access to the plugin once available?

    Being able to easily customise pivot tables would be of great benefit to us, especially being able to freeze the top headings rows/values so it's easy to use for users when scrolling

    Kind Regards,

    Carl

    YourDMS 

    0
    Comment actions Permalink
  • Avatar
    David Oyler

    Ravid Paldi did this plugin ever get released?

    0
    Comment actions Permalink
  • Avatar
    Ravid Paldi

    Hi David Oyler and YourDMS Dev

     

    Appologies for not updating sooner. 

    We got few big projects pushed to our pipeline and we decided to pause this freebe project. 

    We have it working on a normal table but didn't get to start working on the Pivot table. 

    Feel free to send me the specific things you wish to modify and we'll do our best effort to support them once we'll get back to finalizing it (hopefuly in June) 

    ravid@paldi.solutions

     

    Cheers,

    Ravid

     

    0
    Comment actions Permalink
  • Avatar
    Jessica Orlando

    I am trying to make my column labels slightly smaller to fit everything into a PDF export.

    This is what I'm running. Even when I change the font-size to 2, it remains the same as above. Is anyone else having this issue?

    //PIVOT TABLE CHANGE ROW & COLUMN HEADERS
    widget.on("ready", function(w, args) {


    //header columns
    var $ps1 = $(".p-grand-total-head,.p-dim-head", element);
    $ps1.css('font-size' , '10px');
    $ps1.css('font-weight' , 'bold');
    $ps1.css('color' , 'white');
    $ps1.css('background-color' , '#485C64');
    $ps1.css('text-align' , 'center');
    $ps1.css('vertical-align' , 'middle');


    });

    0
    Comment actions Permalink
  • Avatar
    Kendrick Powell

    Janet Erdman

    I am not sure you found a solution or not but I was able to find out how to do this. The code below will format across the date columns. 

    //header columns
    var $ps1 = $(".p-dim-member-head,.p-dim-head", element);
    $ps1.css('font-size' , '14px');
    $ps1.css('font-weight' , 'bold');
    $ps1.css('color' , 'white');
    $ps1.css('background-color' , '#7fcc28');
    $ps1.css('text-align' , 'center');
    $ps1.css('vertical-align' , 'middle');

    0
    Comment actions Permalink

Please sign in to leave a comment.