How to Hide a Column in Pivot 2.0
Summary: Micael Santana provides a detailed guide on how to hide a column in Sisense's Pivot 2.0. The article explains the use of a transformPivot script that modifies pivot properties instead of using CSS, ensuring proper rendering of the Pivot layout without disrupting its responsiveness. The script selectively hides specific measure columns without removing them from the data by adjusting cell styles for complete invisibility. The guide notes the limitations of CSS-based approaches like display: none, highlighting potential issues with sizing and dependency on CSS class names, and advises testing in individual environments.
This article shows a solution for hiding a column in Pivot 2.0.
There are several ways to hide a column in a Sisense Pivot, and you can find a few of them here in the Sisense Community. This article presents another approach that can have advantages and limitations.
Before getting started, it's important to know that Sisense has two different versions of the Pivot widget. This only affects users running Windows or Linux versions earlier than L8.2.1. The newer version of the Pivot introduces additional capabilities, which also changes the way columns can be hidden.
If you're looking for a solution that works with Windows/Pivot 1.0, try this approach instead.
The transformPivot method runs between the data fetching and DOM rendering phases. Instead of directly modifying the CSS or the DOM, it changes the Pivot properties so the widget renders differently. Another important detail is that this method works on individual cells, as shown in the following script:
// SETUP: Add this script to a Pivot widget via Widget Script (Edit Widget > Script tab).
// It hides specific measure columns from the pivot table without removing them from the data.
widget.transformPivot({}, function (metadata, cell) {
// SETUP: List the exact column titles you want to hide.
// These must match the measure titles shown in the widget header (case-sensitive).
// Example: ['Total Revenue', 'Cost', 'Margin %']
const columnsToHide = ["Cost"];
const columnTitle =
(metadata.measure && metadata.measure.title) ||
(metadata.column && metadata.column.title) ||
null;
if (columnTitle && columnsToHide.includes(columnTitle)) {
cell.style.width = "0px";
cell.style.minWidth = "0px";
cell.style.maxWidth = "0px";
cell.style.padding = "0px";
cell.style.margin = "0px";
cell.style.border = "none";
cell.style.color = "transparent";
cell.style.fontSize = "0px";
cell.content = "";
}
});The script walks through each cell using transformPivot and retrieves the title of the measure or column. This makes it possible to provide a simple configuration that identifies the specific column title to hide.
Since Pivot in general works with individual cells, every cell that belongs to the target column must be hidden. The style properties applied in the script work together to fully hide the column. While some of these properties alone can hide content with CSS, using all of them ensures the entire column is hidden correctly.
Why not use display: none?
The Pivot is a smart widget that automatically calculates the layout sizes based on the cells size. When a cell is resized, the Pivot recalculates the layout to keep it responsive.
Using display: none removes the element from the layout, which interferes with these calculations. As a result, columns may no longer be positioned correctly, especially when working with nested columns. For this reason, reducing the cell dimensions (such as width) is preferred over removing the element from the layout.
Using jQuerry
You may have seen solutions that manipulate the Pivot using CSS programmatically. While those approaches can work, they are generally not the best practice.
As explained earlier, the Pivot is a smart widget. Although it is ultimately built with HTML and CSS, it is rendered based on internal properties. Hiding a cell directly in the DOM without updating those properties can lead to unexpected sizing issues because the Pivot may still treat the hidden cell as part of the layout.
Using transformPivot avoids this problem because the changes are applied before the DOM is rendered rather than after.
Another potential issue with CSS-based approaches is relying on CSS classes. Class names within the application can change over time, causing the script to break. Whenever possible, avoid depending on CSS class selectors if a more reliable approach is available.
References/Related ContentÂ
Disclaimer: This post outlines a potential custom workaround for a specific use case or provides instructions regarding a specific task. The solution may not work in all scenarios or Sisense versions, so we strongly recommend testing it in your environment before deployment. If you need further assistance with this, please let us know.
