Pivot2.0 JavaScript Column Width

Hi Tim

I haven't tested this personally, so please treat it as a suggestion to try out — but I think the most maintainable approach here is scoped CSS using nth-child, rather than direct DOM manipulation.

Instead of fighting the Pivot DOM structure, you can inject a scoped <style> tag tied to your widget's ID in the widget's Script panel:

widget.on('ready', function(widget, args) {
    var widgetId = widget.oid;
    var style = document.createElement('style');
    style.innerHTML = `
        [widget-id="${widgetId}"] td:nth-child(2),
        [widget-id="${widgetId}"] th:nth-child(2) {
            width: 10px !important;
            max-width: 10px !important;
            min-width: 0 !important;
            overflow: hidden;
        }
    `;
    document.head.appendChild(style);
});

Why this approach:

• Scoped to your specific widget — won't affect other pivots on the dashboard
• Doesn't rely on specific class names or DOM nesting, so it's much less vulnerable to Sisense UI updates
• Easy to read and maintain

One thing worth checking: if your Pivot 2.0 runs on ag-Grid (the case in newer Sisense versions), the nth-child index might be offset depending on whether row headers are rendered as separate cells. So if column 2 doesn't respond, try adjusting the index (2, 3, or 4) until you hit the right one.

Let us know if this approach works for your use case — or if you find a better solution, feel free to share it in this thread.

Best Regards,
Piotr from QBeeQ, a Sisense Gold Implementation Partner
www.qbeeq.io