Hi All,
I have a scenario to freeze the columns in the table,
The “Freeze Up To Column” feature works correctly when the table is first loaded. However, after navigating to the next page using pagination, the behavior changes. Only the column headers remain frozen, while the corresponding column data in the rows does not stay frozen as expected. The rows scroll normally, causing the frozen column alignment to break.
The same issue occurs during infinite scrolling or lazy loading. When the user scrolls to the bottom, new table data loads, but after the new data is appended, the frozen columns stop working properly. Again, only the column headers remain fixed while the row data scrolls horizontally.
This results in inconsistent freezing behavior after pagination and after loading additional data through scrolling.
Hi SreenivasuluReddy Lingala, This is a known behavior with the “Freeze Up To Column” feature in Reactive apps. The column freeze works only on the first render. When pagination, infinite scroll or lazy loading loads new rows, OutSystems rebuilds the table body, but the platform does NOT reapply the frozen-column clone. That’s why only the header stays frozen and the row alignment breaks.
You can fix this with you must re-apply the freeze action after every data load (pagination, infinite scroll, sorting, filtering). Create a small client action with a Run JavaScript like this:
setTimeout(function () {
$actions.TableRecords_FreezeHeaderColumns($parameters.TableId);
}, 100);
Call this action right after you fetch or append new data.
Alternative: If you want a solution that never breaks, use CSS sticky columns instead of the built-in freeze:
.table-sticky-col { position: sticky; left: 0; z-index: 2; background: white;}
.table-sticky-col-2 { left: 150px;}
Apply these classes to the columns you want to freeze.Hope this helps you...!
Thanks and Regards,Akshay Deshpande
@SreenivasuluReddy Lingala ,
please make clear that you are talking about a datagrid, not a table. Do this both in your text and as a tag.
@Akshay Deshpande , please read question carefully before answering : you answer is about a table
Hi,
As Dorine mentioned, it’s important to specify whether you’re using the standard Table widget or the OutSystems DataGrid. The Table widget does not have a built-in "Freeze to Column" action, so I assume you’re working with the DataGrid.
If you’re relying on the native freeze functionality from the context menu, columns should remain frozen even after pagination or reloading the data. Since your grid looks customized, it’s likely that some custom JavaScript is interfering with the freeze behavior. You’ll need to review any custom scripts applied to the grid to identify the conflict.
Without access to your OML or a sample containing those customizations, it’s not possible to pinpoint the exact cause.
i shared the sample OML file
After reviewing your code, whenever you paginate, use infinite scroll, or reload data, the framework completely rebuilds the <tbody>. The <th> headers remain the same DOM elements, so any classes you added stay intact, but all <td> cells in the body are recreated from scratch.
Because of that, the new cells no longer have your .frozen class. Your current script only reapplies the freeze when you manually trigger it through the context menu option “Freeze up to this column” or when the window is resized. After the table renders new rows, nothing automatically invokes applyFreeze, so the new cells end up unfrozen.
To fix this, you need to reapply freeze when rows change. To achieve this, the solution is to add a small observer per table that watches for DOM changes (pagination, infinite scroll, reload) and re-runs applyFreeze using the stored table. I used MutationObserver for this .
___
I attached an updated version of your OML and highlighted with comments the updated code.
It sounds like your table’s “freeze column” logic only applies on the initial render, and after pagination or lazy loading the newly added rows aren’t getting the same freeze styling or script re-initialized. You’ll need to reapply the freeze logic after every data load—whether it’s pagination, infinite scroll, or lazy loading—so that both headers and row cells get the fixed positioning and consistent column widths.