🔒 Implement Sticky Columns for Classic Reports Without Plugins

🚩Introduction 

• In real-world Oracle APEX applications, Classic Reports often become wide due to data-heavy requirements. Horizontal scrolling is common, but since Classic 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, Classic Reports become easier to navigate and offer a spreadsheet-like, enterprise-friendly user experience.

📑 Why Column Freezing is Needed in Classic 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 Classic Report

Columns can be freezed in the Classic 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 Classic Report and select the source as SQL Query and write the sample sql query.

Step 2: 

Now click the Classic 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 classic report, navigate to the Function and Global Variable Declaration section and copy the below javascript code. we will freeze the first two columns in the report.

function freezeCR(){

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

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

    // Reset all columns first |  #RG_EMP => Static ID
    $(`#RG_EMP .t-Report-report tr th,
       #RG_EMP .t-Report-report 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 .t-Report-report tr th:nth-child(${i}),
           #RG_EMP .t-Report-report 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  freezeCR(), to freeze the columns the Classic Report.

Step 5:

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

🔥 Conclusion

Thus, column freezing in Oracle APEX Classic 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.