Hi,
I have a Table Records / Data Grid in OutSystems that contains more than 50 columns. To control visibility, I created a Structure with Boolean attributes representing each column header. Then I added checkboxes on the screen and bound them to these Boolean attributes. When I check or uncheck a box, the corresponding column becomes invisible or visible.
This logic works correctly for some columns. But for certain columns, when the header becomes invisible, the row cells do not hide properly. Instead, the row shifts or moves to the next line, which breaks the table layout. So the header hides, but the row content doesn’t align or it pushes other columns incorrectly. i am used this style class
Hi @SreenivasuluReddy Lingala
To get a better view on your problem, could you please share your oml file.
Thanks
Hi Mohd Anees Mansoori, thanks for responding
i added style class to every column header and row with boolean check box with above given condition
i deselect the checkbox only column header will hide not row
I got your problem statement, but just by viewing the screenshot and expression value its hard for me to say what's going wrong.
That's why asked for oml file.
Hi @SreenivasuluReddy Lingala ,
To correctly hide a column in an OutSystems Table Records or Data Grid, you must apply the same visibility logic to both the header (TH) and the row cells (TD). Hiding only the header causes the data cells to remain visible, which makes the table shift and break alignment. Some columns work by accident if the style is applied to the right container, while others fail because the style is applied too deep inside the cell. The proper approach is to apply the visibility expression—either the inline display:none or a custom CSS class—to the header cell and to the outermost container of the column’s row content. This ensures that both the header and all corresponding data cells hide together, keeping the table layout stable and aligned.
Thanks and Regards,
Karan Shinde
1) Best — use the OutSystems Data Grid (Reactive) (recommended)
The Data Grid columns expose properties (e.g. Visible / hide/display) you can bind at runtime.
2) In the Cell (the column’s cell) extended properties Style set the same:
If(CheckBoxTable.MaterialCode, "", "display:none;")
Hi Amit Jat, i am already used second point, but it's not worked.
The reason I asked you to share the oml is because you said the condition is working on Header and not working on the corresponding row.
I need to check the exact implementation.
But, If you cant share the oml file due to privacy concerns then try replicating the same implementation with some sample data on your personal environment and check if it work, if it doesn't work then please share that oml file.
Regards,
Anees
Hi, i shared OML file
The functionality seems to be working as you were expecting, have you checked it or am I missing something?
Hi, its not working some columns
Headers are invisible working fine but rows are visible
you are doing a horrible thing there with all those predefined columns and all those checkboxes.
Your first job will be to check if you didn't make any error in all those hardcoded conditions.
here's one I found :
Hi Dorine Boudry , thanks for responding
i corrected that header cells style but also not working , i shared the another OML file for your reference
Its not best practice to do the boolean structure to handle the toggle columns. Whenever new columns are added, you will need to implement the logic more.
In my opinion, we should use Javascript to handle the display on / off, you can use class name or simply the data-id to determine which columns to be on / off.
Hope it add more approach to your issue.