Astroraf
08-21-2025Data Pipeline
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 colu...
- 08-21-2025
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 }); } })();