Introduction:
In Oracle APEX Interactive Reports (IRRs), dealing with wide datasets often means excessive horizontal and vertical scrolling. This can cause users to lose track of the column headers or the key identifying column, making the data harder to read.
A simple enhancement — freezing the header row and a specific column — can greatly improve usability, similar to how Excel allows locking rows and columns.
The following technologies are used to achieve this:
- Oracle APEX Interactive Reports
- JavaScript
- CSS
Why We Need to Do This?
Better Data Navigation:
Freezing headers keeps column names visible, ensuring clarity even when scrolling through large datasets.
Enhanced Readability:
Locking the most important column (like ID or Name) helps users always see the key reference point alongside other details.
Excel-like UX:
Gives a familiar spreadsheet feel, making navigation easier for business users.
No Plugins Required:
Achieved using native JavaScript and CSS, ensuring performance and maintainability.
How Do We Solve This
Step 1: Set a Static ID on the column you want to freeze.
Navigate to Column Attributes → Static ID → set it as HEAD.
Step 2: Add the following JavaScript:
$(document).ready(function() {
var columnLeft = $(“th#HEAD”).position().left;
$(“th#HEAD, td[headers=’HEAD’]”).addClass(“freeze-column”).css(“left”, columnLeft + “px”);
$(“th#HEAD”).addClass(“freeze-header”);
});
Step 3: Add the following CSS:
.a-IRR-reportTable {
overflow: auto;
max-height: 500px;
}
.freeze-column {
position: sticky;
background-color: #fff;
z-index: 2;
min-width: 150px;
max-width: 200px;
border-right: 1px solid #ccc;
}
.freeze-header {
position: sticky;
top: 0;
background-color: #f8f9fa;
z-index: 3;
}
Step 4 (Optional Bonus): Highlight the frozen column for better visibility.
.freeze-column {
background-color: #e3e3e3 !important;
}
.freeze-header {
background-color: #e3e3e3 !important;
color: white !important;
font-weight: bold;
}
Conclusion:
Freezing a header and column in Oracle APEX IRRs improves navigation, boosts readability, and delivers a more professional, Excel-like experience — all without using any plugins. This reusable snippet can be applied to multiple reports and dash.
Output:
- Header stays fixed while scrolling.
- First column stays visible during horizontal scrolling.
- Optional highlighting improves user focus.
