🚀 How to Freeze the Columns in the Interactive Report without Plugins (Oracle APEX)

🚩Introduction 

• In real-world Oracle APEX applications, Interactive Reports often become wide due to data-heavy requirements. Horizontal scrolling is common, but since Interactive Reports do not provide a built-in column freezing option, important reference columns such as IDs or names scroll out of view, affecting readability and usability.

  This limitation can be addressed by implementing custom column freezing using JavaScript and CSS without any Plugins. By fixing key columns, Interactive Reports become easier to navigate and offer a spreadsheet-like, enterprise-friendly user experience.

📑 Why Column Freezing is Needed in Interactive Reports

In data-intensive applications, reports often extend horizontally due to the number of attributes required for business analysis. While horizontal scrolling allows access to all columns, it introduces a usability challenge: users lose sight of key reference information when navigating across the report.

• To keep important columns (like Name, ID, or Code) always visible

• To avoid losing track of rows while scrolling horizontally

• To make wide reports easier to read and understand

• To reduce repeated left / right scrolling

• To compare data across many columns without confusion 

👉 Steps to create Column Freezing in Interactive Report

Columns can be freezed in the Interactive Reports using the Javascript and CSS, without any plugins. We can see how to achieve this in the following steps. 

Step 1: 

In the page designer, create region and change the type to Interactive Report and select the source as SQL Query and write the sample sql query.

Step 2: 

Now click the Interactive Report and in the properties tab, under the Advanced section type RG_EMP in the Static ID.

Step 3: 

To freeze the columns in the interactive report, navigate to the Function and Global Variable Declaration section and copy the below javascript code. we will freeze the first three columns in the report.

function freezeIR(){

    const colWidths = [];
    const numCols = 3; // No. of Columns to be freezed in the report

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

    // Reset all columns first |  #RG_EMP => Static ID
    $(`#RG_EMP .a-IRR-table tr th,
       #RG_EMP .a-IRR-table tr td`).css({
        "position": "relative",
        "left": "",
        "z-index": "",
        "background": ""
    });

    // Setting styles
    for (let i = 1; i <= numCols; i++) {
        let leftOffset = 0;

        for (let j = 1; j < i; j++) {
            leftOffset += colWidths[j];
        }

        $(`#RG_EMP .a-IRR-table tr th:nth-child(${i}),
           #RG_EMP .a-IRR-table tr td:nth-child(${i})`).css({
            "position": "sticky",
            "left": leftOffset + "px",
            "background": "white",
            "z-index": "3"
        }); //css styles for freezing the column 

    }      
}

Step 4: 

In the Execute when Page Loads section, call the javascript function  freezeIR(), to freeze the columns the Interactive Report.

Step 5:

Now save the page and run the application, you will see the interactive report with the freezed columns, which enables users to scroll the page horizontally without loosing the reference for the row. Empno, Ename and Job columns were fixed.

🔥 Conclusion

Thus, column freezing in Oracle APEX Interactive Reports can be implemented using JavaScript and CSS to overcome the lack of native support. By fixing key columns, this approach improves usability, readability, and data accuracy in wide reports, delivering a more intuitive, enterprise-ready user experience without relying on plugins.