Make table headers "Sticky"

[transistorgrab]

Hi,

first of all, thank you for this great plugin!

However, I would suggest to make the table header sticky.
By this I mean that the table header should always be visible when scrolling down in the table.
This would making working with the list more comfortable since I always forget which of "Sourced" and "Placed" is which column…

[qu1ck]

Making it sticky significantly reduces usable space for the table data on smaller screens like tablets/phones.

You can temporarily remove checkbox column when you don't need it to reduce confusion, it will not lose the checkbox data if you add it back later. Also you can use mark when checked feature to highlight checked column for specific checkbox.

If someone comes up with a way to make the stickiness adaptive to screen size without a lot of code or third party libs I can include it.

[siditm]

As a crude workaround I've edited two lines in html file:
change <thead id="bomhead"> to <thead id="bomhead" style="position: sticky; top: 0px; z-index: 1;">.

You can also add it to <div style="100%;"> container with reflookup input few lines before, just make sure to then offset <thead> to about top: 60px;.

[qu1ck]

No need to edit the html which you will have to do again after plugin update. Use customization instead, create user.css in web directory with following contents:

#bomhead {
    position: sticky;
    top: 0px;
    z-index: 1;
}

[siditm]

No need to edit the html which you will have to do again after plugin update. Use customization instead, create user.css in web directory with following contents:

#bomhead {
    position: sticky;
    top: 0px;
    z-index: 1;
}

Thanks, for sure a cleaner solution.

Or even stick reflookup's parent <div> with :

div:has(#reflookup) {  
   position: sticky;  
   top: 0px;  
   z-index: 1;  
}

This will stick search inputs and table headers.

[mMuck]

Nice. Thanks.

This will stick search inputs and table headers.

Perhaps due to the update: I had to add this to achieve it

div:has(#reflookup) {
    position: sticky;
    top: 0px;
    z-index: 1;
}
#bomhead {
    position: sticky;
    top: 60px;
    z-index: 1;
}

I don't like my absolute positioning...