Hi Madhu,

Create a container enclosing the table with the class table-scroll-wrapper and on the TableRecords give add the class table-scroll.

Then add this piece of CSS to your Theme:

.table-scroll-wrapper {
    overflow: auto;
    border: var(--border-size-s) solid var(--color-neutral-4);
}

.table-scroll {
    margin: 0px;
    border: none;
}

.table-scroll thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.table-scroll tr td:first-child,
.table-scroll th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: var(--border-size-s) solid var(--color-neutral-4);
}

.table-scroll th:last-child,
.table-scroll tr td:last-child {
  border-right: none;
  position: sticky;
  right: 0;
  z-index: 2;
  border-left: var(--border-size-s) solid var(--color-neutral-4);
}

.table-scroll tr td:last-child {
  border-right: none;
}

.phone .table-scroll tr td,
.tablet .table-scroll tr td {
  border-right: none;
}

Let me know how it goes for you.

Hope it helps.

Cheers,

João

Hi Madhu,

Did you manage to achieve what you were looking for?

Cheers,

João

Hello Joao,

I am completly new to outsystesms and CSS and javascript, and I could not implement the suggested way, because I could not understand the process of doing it as per your instructions. It will be helpfull if I can get an example code or a reference link where I can get the implementation instructions. Thank you.

Regards,

Madhu

Hi Madhu,

The solution is basically CSS so I'm gonna go step-by-step.

First, you need to identify the theme of your application, the basic set of styles your application will take.

You can see on my example the Default Theme is Test1 which I can see on the folder Themes.

Now, I'm gonna double click the theme and paste the following CSS:

.table-scroll-wrapper {
    overflow: auto;
    border: var(--border-size-s) solid var(--color-neutral-4);
}

.table-scroll {
    margin: 0px;
    border: none;
}

.table-scroll thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.table-scroll tr td:first-child,
.table-scroll th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: var(--border-size-s) solid var(--color-neutral-4);
}

.table-scroll tr td:last-child {
  border-right: none;
}

.phone .table-scroll tr td,
.tablet .table-scroll tr td {
  border-right: none;
}

And now on the screen where we have a table, you will have to have a container with table records on it (on the screenshot left corner, you can see the container has a table records inside) and this container will have the class table-scroll-wrapper:And now on the TableRecords I'm adding the table-scroll class:

And that's it. here is the result:

Let me know how it goes for you.

Cheers,

João

I  am looking to implement the same functionality but in reactive module

All headers are fixed but only 1st column header is scrolling with vertical scrollbar in table

I've tried implementing the solution, it working fine the only issue is all header are fixed while just 1st columns header is scrollable. How can we tackle this problem?

I have applied the above CSS solutions to my table but it is not working. My goal is to freeze the first column and apply scroll to others. The attached file is showing actually what I want.                       And also please find the output of my table I have applied the above css but no effect.