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