Lighter frozen columns, and frozen column support at the end

[cesarreyes3]

trafficstars

I was checking how other plugins handle the frozen columns feature, but I found that they make it simpler, just with CSS, this also works to have the frozen columns on the right DEMO: https://primevue.org/datatable/#frozen_columns

I have created an example for those who want frozen column at the end with css EXAMPLE: https://jsfiddle.net/68c073yu/

It would be great if it could be simplified using just CSS, I don't know if it would be a breaking change

It would also solve many problems related to frozen columns, such as the toolbars

[tonytomov]

How quick go the time 😉

To the time when I tested position : sticky it was with very limited implementations. Right now it seems to be a ready to use in tables.

This is really very light and elegant solution. I have play with it. It need some additional work for the border, but I think this can be solved. Let me test some other time and will I will replay with final solution.

[systemsolutionweb]

I found a problem in the frozen columns, when you have the first columns hidden, but with width, the calculation of the visible ones is incorrect, it places them where they would be if the hidden ones were visible

Strangely, it doesn't happen in the header or the footer.

[tonytomov]

Thank you.

I have fixed it. Please let me know if it is ok for you.

[fredsal]

I don't know if it's just me, but all the inset-inline-start are out of place by one pixel wide, when I scroll horizontally I can see flashes of text underneath, It's not much of a problem, it just caught my attention.

UPDATE: I'm using boostrap 4 table-bordered class, There seems to be a conflict, I'll check it

[fredsal]

I fix it by adding

.frozen-col-class {
    border-right: 0 !important;
}

It is smoother, it is a problem with the border

[tonytomov]

Hello,

Thank you, but did you have updated the css for the last 5.8.10 version? I mean the ui.jqgrid-bootstrap4.css file.

In which browser is this?

[fredsal]

did you have updated the css for the last 5.8.10 version?

Yes

My boostrap version has this

.table-bordered td, .table-bordered th {
    border: 1px solid #dee2e6;
}

In which browser is this?

tested on Brave, Chrome

[tonytomov]

Yes, I see what you mean. This is caused by the box-shadow. Actually I do not find a better way to overcome transparency when scrolling. For bootstrap 5 outline works, but not for bootstrap 4.

Thanks again - your solution is ok for now and I will include it in the next release if there are no problems

[parallels999]

Hi, there is a border problem using setGroupHeaders and setFrozenColumns

The middle border acts strange, allowing the displacement to be seen

[tonytomov]

Hello,

Can you please send a test case. In which CSS framework is this?

[parallels999]

In which CSS framework is this?

bootstrap, I have added it to the example

https://jsfiddle.net/orhauxpc/

[tonytomov]

Thanks. I see the problem. Will see what we can do.