DTaTiA#2 - Dominik's Tips and Tricks in APEX#2: Freeze columns in Interactive Report #JoelKallmanDay

Have you wondered how to freeze columns in Interactive Report in APEX? In Interactive Grid it's no problem, you use the snowflake icon:

When it comes to Classic Report, there is also a solution, a plugin written by a colleague from work (great work Bartosz Sypuła!):

https://github.com/Pretius/pretius-extend-classic-report

What about Interactive Report? I think I found a solution to this case, and here is the effect we would like to achieve:

You need to do 2 things. First, add the following code to your Code Editor - Inline page:

/* freeze 1st column in IR */
.a-IRR-table tr th:nth-child(1),
.a-IRR-table tr td:nth-child(1) {
    position: sticky;
    left: 0px !important;
    background: #73b804;
}

/* adding/gluing the next columns to the first one: 
second, third and fourth */
.a-IRR-table tr th:nth-child(2),
.a-IRR-table tr td:nth-child(2),
.a-IRR-table tr th:nth-child(3),
.a-IRR-table tr td:nth-child(3),
.a-IRR-table tr th:nth-child(4),
.a-IRR-table tr td:nth-child(4) {
    position: sticky;
    background: #9bfb02;
}

Remember that this example is for 4 columns, if you want fewer of them you have to remove 2 lines of code responsible for a given column, e.g. if you want to remove column 4 you have to remove these 2 lines of code:

.a-IRR-table tr th:nth-child(4),
.a-IRR-table tr td:nth-child(4)

Similarly, if you want to add column 5th, you need to add the CSS code:

.a-IRR-table tr th:nth-child(5),
.a-IRR-table tr td:nth-child(5)

On the App Builder page it looks like this:

The next step is to add JavaScript code as a dynamic action on Page Load:

const colWidths = [];
const numCols = 4; // Assuming you want to set styles for 4 columns

// Collecting column widths
for (let i = 1; i <= numCols; i++) {
    colWidths[i] = $(`.a-IRR-table tr th:nth-child(${i})`).width();
}

// Setting styles
for (let i = 2; i <= numCols; i++) {
    let leftOffset = 0;
    for (let j = 1; j < i; j++) {
        leftOffset += colWidths[j];
    }
    $(`.a-IRR-table tr th:nth-child(${i}), 
       .a-IRR-table tr td:nth-child(${i})`).css("left", leftOffset);
}

Of course, line 2 specifies the number of columns to be frozen. On the App Builder page it looks like this:

Important! Remember that if you change the number of columns to freeze in the CSS code, you must also change this number in the JS code.

const numCols = 5; // Assuming you want to set styles for 5 columns

I am also aware that this solution could be changed to a plugin, but it is a "quick" idea that I had to implement in one of the projects.

Until next time! Stay tuned!