How can I create a horizontal scrollable table that has a fixed coloumn?

Hi Team,

Could you please help me how can create a horizontal scrollable table that has a fixed coloumn, in a Traditional web.

I have table will few columns and the first column has "edit and delete" links and while scrolling horizontally the first column should not move, while other columns can move while scrolling. and I need to do this in Traditionla web. please help, thanks in advance.

Regards,

Madhu 


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


Solution

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

Solution