12
Views
6
Comments
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 )

Rank: #67

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

Rank: #21633

Thanks João !

Rank: #21633

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.

Rank: #67

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

Rank: #21633

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.

Rank: #67

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