Forum Discussion

Astroraf's avatar
Astroraf
Data Pipeline
08-21-2025
Solved

How to target a specific cell/column to change the column in a pivot table?

I have a pivot table where I am trying to turn the "Activity date for billable time" light green (can be any color) in my widget edit script, along with its corresponding value from another column, 2025-08-18, in this example. I have tried a couple of different script but nothing seems to work:

(function () { // === settings === var VALS = 'Activity date for billable time'; // sub-header text to match var COLOR = '#e6f4ea'; // light green var MAX_TRIES = 40, RETRY_MS = 150; // --- tiny helpers (no backticks) --- function getRoot(w){ return (w && ((w.$$container && w.$$container[0]) || (w.$container && w.$container[0]) || w.container)) || document; } function qAll(root, sel){ return Array.prototype.slice.call(root.querySelectorAll(sel)); } // Find runtime column index by reading row-1 sub-header text function getColByRow1Label(root, vals){ var tds = qAll(root, '.table-grid.table-grid--top td.table-grid__cell--row-1'); for (var i = 0; i < tds.length; i++){ var td = tds[i]; var textEl = td.querySelector('.table-grid__content div'); var txt = (textEl && (textEl.innerText || '').trim()) || ''; if (txt === vals){ var classes = td.className.split(/\s+/); for (var c = 0; c < classes.length; c++){ if (classes[c].indexOf('table-grid__cell--col-') === 0){ return parseInt(classes[c].split('--col-')[1], 10); } } } } return null; } // Inject a CSS rule so it survives re-renders/virtualization function injectCSS(root, col){ // remove any prior rule from this script var old = root.querySelector('style[data-col-color]'); if (old && old.parentNode) old.parentNode.removeChild(old); var css = '' + '.table-grid.table-grid--top td.table-grid__cell--row-1.table-grid__cell--col-' + col + ' .table-grid__content{' + 'background-color:' + COLOR + ' !important;' + 'border-radius:4px !important;' + '}\n' + '.table-grid:not(.table-grid--top) td.table-grid__cell--col-' + col + ' .table-grid__content{' + 'background-color:' + COLOR + ' !important;' + 'border-radius:4px !important;' + '}'; var style = document.createElement('style'); style.type = 'text/css'; style.setAttribute('data-col-color', 'col-' + col); style.appendChild(document.createTextNode(css)); (root || document.body).appendChild(style); } function runOnce(w){ var root = getRoot(w); if (!root || !root.querySelector('.table-grid')) return false; // DOM not ready yet var col = getColByRow1Label(root, VALS); if (col == null) return false; injectCSS(root, col); return true; } function schedule(w){ var tries = 0; (function tick(){ if (runOnce(w)) return; if (++tries < MAX_TRIES) setTimeout(tick, RETRY_MS); })(); } // hook into widget lifecycle widget.on('domready', function(w){ schedule(w); }); widget.on('refreshed', function(w){ schedule(w); }); // try immediately too schedule(widget); })(); :

(function () { var COLOR = '#e6f4ea'; // light green // 1) Color the VALUE cells for the target column member widget.transformPivot( { type: ['value'], // only data cells columns: [{ // << CHANGE THIS to the exact dim used in the Columns panel >> dim: '[Program_Assessment_Response_Question.Program_Assessment_Question_Version_Name]', // << keep this as the visible member text in your header >> members: ['Activity date for billable time'] }] }, function (_metadata, cellEl) { // Paint value cells without touching alignment cellEl.style.setProperty('background-color', COLOR, 'important'); cellEl.style.setProperty('box-shadow', 'inset 0 0 0 9999px ' + COLOR, 'important'); cellEl.style.setProperty('border-radius', '4px', 'important'); } ); // 2) (Optional) Also color the COLUMN HEADER cell for that member // If your Sisense version supports targeting column headers: widget.transformPivot( { type: ['columnHeader'], // header cells along the columns axis columns: [{ dim: '[Program_Assessment_Response_Question.Program_Assessment_Question_Version_Name]', // << same dim as above members: ['Activity date for billable time'] }] }, function (_metadata, cellEl) { // Header DOM is the TD; center style already handled elsewhere, so only background var content = cellEl.querySelector('.table-grid__content') || cellEl; content.style.setProperty('background-color', COLOR, 'important'); content.style.setProperty('border-radius', '4px', 'important'); } ); })();

DRay​ any suggestions or anyone from your team have an idea? 

 

 

  • Solved the issue: The order of the scripts and then us

    
    
    
    
    // 1) Color the column's sub-header cell (row-1 "member"):
    widget.transformPivot(
      {
        type: ['member'],                // header cells
        axis: 'columns',                 // match column members
        columns: [{
          dim: '[Program_Assessment_Response_Question.Program_Assessment_Question_Version_Name]',
          members: ['Activity date for billable time']
        }]
      },
      function (metadata, cell) {
        cell.style = cell.style || {};
        cell.style.backgroundColor = '#e6f4ea';  // light green
        cell.style.borderRadius = '4px';
        cell.style.textAlign = 'center';         // keeps it centered
      }
    );
    
    // 2) Color all value cells under that column:
    widget.transformPivot(
      {
        type: ['value'],                 // data cells
        columns: [{
          dim: '[Program_Assessment_Response_Question.Program_Assessment_Question_Version_Name]',
          members: ['Activity date for billable time']
        }]
      },
      function (metadata, cell) {
        cell.style = cell.style || {};
        cell.style.backgroundColor = '#e6f4ea';
        cell.style.borderRadius = '4px';
      }
    );
    
    
    (function () {
      // Same dimension you used for "Activity date for billable time"
      var DIM = '[Program_Assessment_Response_Question.Program_Assessment_Question_Version_Name]';
    
      // The four column headers to color
      var MEMBERS = [
        'CM Assessment/Interview',
        'CM Screening and Evaluation',
        'Contact with Family Member',
        'Contact with Member'
      ];
    
      // Light blue
      var COLOR = '#dbeafe'; // tweak if you want a different shade
    
      function paintCell(_, cell) {
        cell.style = cell.style || {};
        cell.style.backgroundColor = COLOR;
        cell.style.borderRadius = '4px';
      }
    
      // 1) Color the column header (member cells on the columns axis)
      widget.transformPivot(
        {
          type: ['member'],
          axis: 'columns',
          columns: [{ dim: DIM, members: MEMBERS }]
        },
        paintCell
      );
    
      // 2) Color all data cells under those columns
      widget.transformPivot(
        {
          type: ['value'],
          columns: [{ dim: DIM, members: MEMBERS }]
        },
        paintCell
      );
    })();
    
    
    /*--------------------*/
    
    
    
    (function () {
      // Text shown in the top header (row-0)
      var TOP_LABEL = 'Program Activity Time';
    
      // Scope to this widget only
      var root = (widget.$$container?.[0] || widget.$container?.[0] || widget.container || document);
    
      function centerTopHeader() {
        // find the row-0 header cell whose text matches TOP_LABEL
        var tds = root.querySelectorAll('.table-grid.table-grid--top td.table-grid__cell--row-0');
        var col = null;
    
        for (var i = 0; i < tds.length; i++) {
          var td = tds[i];
          var text = td.querySelector('.table-grid__content div')?.innerText?.trim() || '';
          if (text === TOP_LABEL) {
            var cls = Array.prototype.slice.call(td.classList).find(function (c) { return c.indexOf('table-grid__cell--col-') === 0; });
            if (cls) col = +cls.split('--col-')[1];
            break;
          }
        }
        if (col == null) return;
    
        // center ONLY that top header cell’s content
        var nodes = root.querySelectorAll(
          '.table-grid.table-grid--top td.table-grid__cell--row-0.table-grid__cell--col-' + col + ' .table-grid__content'
        );
        nodes.forEach ? nodes.forEach(centerEl) : Array.prototype.forEach.call(nodes, centerEl);
      }
    
      function centerEl(el) {
        el.style.setProperty('display', 'flex', 'important');
        el.style.setProperty('justify-content', 'center', 'important');
        el.style.setProperty('align-items', 'center', 'important');
        el.style.setProperty('text-align', 'center', 'important');
      }
    
      // run after the pivot paints
      function run() { setTimeout(centerTopHeader, 0); }
    
      widget.on && widget.on('domready', run);
      widget.on && widget.on('ready', run);
      widget.on && widget.on('refresh', run);
    
      // tiny retry in case the grid mounts a bit later
      (function tick(n){
        if (n <= 0) return;
        if (!root.querySelector('.table-grid')) return void setTimeout(function(){ tick(n-1); }, 150);
        run();
      })(30);
    
      // re-apply if the grid re-renders its header DOM
      var grid = root.querySelector('.sisense-pivot__multi-grid') || root;
      if (window.MutationObserver && grid) {
        var mo = new MutationObserver(function (m) {
          for (var i=0;i<m.length;i++) { if (m[i].addedNodes.length || m[i].removedNodes.length) { centerTopHeader(); break; } }
        });
        mo.observe(grid, { childList: true, subtree: true });
      }
    })();
    

     

1 Reply

  • Astroraf's avatar
    Astroraf
    Data Pipeline

    Solved the issue: The order of the scripts and then us

    
    
    
    
    // 1) Color the column's sub-header cell (row-1 "member"):
    widget.transformPivot(
      {
        type: ['member'],                // header cells
        axis: 'columns',                 // match column members
        columns: [{
          dim: '[Program_Assessment_Response_Question.Program_Assessment_Question_Version_Name]',
          members: ['Activity date for billable time']
        }]
      },
      function (metadata, cell) {
        cell.style = cell.style || {};
        cell.style.backgroundColor = '#e6f4ea';  // light green
        cell.style.borderRadius = '4px';
        cell.style.textAlign = 'center';         // keeps it centered
      }
    );
    
    // 2) Color all value cells under that column:
    widget.transformPivot(
      {
        type: ['value'],                 // data cells
        columns: [{
          dim: '[Program_Assessment_Response_Question.Program_Assessment_Question_Version_Name]',
          members: ['Activity date for billable time']
        }]
      },
      function (metadata, cell) {
        cell.style = cell.style || {};
        cell.style.backgroundColor = '#e6f4ea';
        cell.style.borderRadius = '4px';
      }
    );
    
    
    (function () {
      // Same dimension you used for "Activity date for billable time"
      var DIM = '[Program_Assessment_Response_Question.Program_Assessment_Question_Version_Name]';
    
      // The four column headers to color
      var MEMBERS = [
        'CM Assessment/Interview',
        'CM Screening and Evaluation',
        'Contact with Family Member',
        'Contact with Member'
      ];
    
      // Light blue
      var COLOR = '#dbeafe'; // tweak if you want a different shade
    
      function paintCell(_, cell) {
        cell.style = cell.style || {};
        cell.style.backgroundColor = COLOR;
        cell.style.borderRadius = '4px';
      }
    
      // 1) Color the column header (member cells on the columns axis)
      widget.transformPivot(
        {
          type: ['member'],
          axis: 'columns',
          columns: [{ dim: DIM, members: MEMBERS }]
        },
        paintCell
      );
    
      // 2) Color all data cells under those columns
      widget.transformPivot(
        {
          type: ['value'],
          columns: [{ dim: DIM, members: MEMBERS }]
        },
        paintCell
      );
    })();
    
    
    /*--------------------*/
    
    
    
    (function () {
      // Text shown in the top header (row-0)
      var TOP_LABEL = 'Program Activity Time';
    
      // Scope to this widget only
      var root = (widget.$$container?.[0] || widget.$container?.[0] || widget.container || document);
    
      function centerTopHeader() {
        // find the row-0 header cell whose text matches TOP_LABEL
        var tds = root.querySelectorAll('.table-grid.table-grid--top td.table-grid__cell--row-0');
        var col = null;
    
        for (var i = 0; i < tds.length; i++) {
          var td = tds[i];
          var text = td.querySelector('.table-grid__content div')?.innerText?.trim() || '';
          if (text === TOP_LABEL) {
            var cls = Array.prototype.slice.call(td.classList).find(function (c) { return c.indexOf('table-grid__cell--col-') === 0; });
            if (cls) col = +cls.split('--col-')[1];
            break;
          }
        }
        if (col == null) return;
    
        // center ONLY that top header cell’s content
        var nodes = root.querySelectorAll(
          '.table-grid.table-grid--top td.table-grid__cell--row-0.table-grid__cell--col-' + col + ' .table-grid__content'
        );
        nodes.forEach ? nodes.forEach(centerEl) : Array.prototype.forEach.call(nodes, centerEl);
      }
    
      function centerEl(el) {
        el.style.setProperty('display', 'flex', 'important');
        el.style.setProperty('justify-content', 'center', 'important');
        el.style.setProperty('align-items', 'center', 'important');
        el.style.setProperty('text-align', 'center', 'important');
      }
    
      // run after the pivot paints
      function run() { setTimeout(centerTopHeader, 0); }
    
      widget.on && widget.on('domready', run);
      widget.on && widget.on('ready', run);
      widget.on && widget.on('refresh', run);
    
      // tiny retry in case the grid mounts a bit later
      (function tick(n){
        if (n <= 0) return;
        if (!root.querySelector('.table-grid')) return void setTimeout(function(){ tick(n-1); }, 150);
        run();
      })(30);
    
      // re-apply if the grid re-renders its header DOM
      var grid = root.querySelector('.sisense-pivot__multi-grid') || root;
      if (window.MutationObserver && grid) {
        var mo = new MutationObserver(function (m) {
          for (var i=0;i<m.length;i++) { if (m[i].addedNodes.length || m[i].removedNodes.length) { centerTopHeader(); break; } }
        });
        mo.observe(grid, { childList: true, subtree: true });
      }
    })();