I have a requirement where in need to fix the header of a UI Table, so that when the user scrolls down through the table content he is still able to see the column headers.
I do not want to set visibleRowCount property as it affects with another functionality that I have implemented to merge cells.
Also, I have my first column as a fixed column in the UI table.
I have tried some css code for that table, which partially worked, but it creates a separate scroll for the first column as it is fixed.
I have attached images
.original-view-without-css.png
with-css-two-scroll-bars-created.png
Below is the css code I have used.
thead {
text-align:left;
display: block;
/*float: left;*/
/* width: 100%; */
width: 100%;
}
thead tr {
display: table-row !important;
width: 100% !important;
}
tbody {
display: block;
/* height: 480px; */
height: 500px;
overflow-y : overlay;
/*float: left;*/
width: 100%;
}
tbody tr {
display: table-row !important;
width: 100% !important;
}
th, td {
width: 290px !important;
}
table {
table-layout: fixed !important;
}
If you have any other approach in mind that works, please advise.
1 Answer
-
Mar 04 at 04:08 PM
Hi,
Because you say "...affects with another functionality..." I can conclude that any solution that is code based (i.e. with "copy-paste" code snippets) given here is incomplete, thus, I would suggest some things you can do on a concept level.
- Create a floating header (any type of element you see fit) that is visible only during scrolling or from a certain row (e.g. after the user scrolled to row 20 and at that time the original header is not visible).
- Have a footer that is fixed with the header of the table.
- Every n number of lines (where 'n' is an integer variable of your choice) you inject the header line as one of the lines of the table (given that this is possible and ideally marked in a unique way that distinguishes it from a non-header line).
- Limit the visible row count of a table in such a way that you can only see n number of lines (where 'n' is an integer variable of your choice) at a time of the table, regardless of scrolling or not (if you are familiar with ABAP WD - the same functionally of method set_visible_row_count under the interface if_salv_wd_table_settings in class cl_salv_wd_config_table) .
This is, of course, an incomplete list, but I hope it helps you.
Add comment
Add comment