Table column freeze
Question
Application Type
Reactive

Imagine I have 10 columns - consider freezing first column and other columns as dynamic( we can scroll horizontally and check for remaining columns )

mvp_badge
MVP

Hi nilesh,


You can see this post which reports the same need and the respective solution step-by-step.


Hope it helps you.


Regards,
João

Thanks João !

Imagine there is an update button at right of add button and I want to enable the table row which is checked (So that I can update the cell items/row items or update the tuples).If check box is not selected then the row will be disabled and we cannot edit.

mvp_badge
MVP

You can do that by setting a condition on the Enabled field of the Button properties:

You just need to add the checkbox value on the Enabled (if it is true, it will be enabled; if it is false, it will be disabled).


The example I showed for the button, you can also apply on the link on your column Description.


Cheers,
João

Imagine there is an update button at right of add button and I want to enable the table row which is checked (So that I can update the cell items/row items or update the tuples).If check box is not selected then the row will be disabled and we cannot edit.

mvp_badge
MVP

Hi Nilesh,

 

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;
}

.table-scroll *[data-expression] {
    white-space: nowrap;
}


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


And now on the Table I'm adding the table-scroll class:


And that's it.


Hope it helps.


Regards,
João

How can I freeze 3 columns in this case? 

Because currently it's freezing one column. 

Try to use :nth-child(3) and :nth-child(3)  for TH and TD

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.