Question:
Hello all, I am playing around with a custom backend and am curious if it’s possible to incorporate a sticky header for the wix table? There is no option for this effect in wix studio and I have tried incorporating custom CSS (even global CSS) logic but it does not work as intended. In addition, is it possible to style certain cells of the table with different colors depending on the text value inside certain cells? I have done this in custom web applications with react for example but no luck with wix.
Product:
Wix Studio
What are you trying to achieve:
Conditional formatting for the wix table element that includes the following:
- Sticky header
- Changing specific column cell UI depending on cell data values
What have you already tried:
.table_header { position: sticky; top: 0; }
- Adding css to columns js logic to render
Additional information:
I feel as if this is self explanatory but if you need more information or have any questions, please let me know.
This is a gimmicky workaround but you can achieve the sticky header by changing the table height layout to fixed vs automatic.
You then need to set a manual height in the inspector panel. For my demo I did a fixed height of 90vh. I was unable to achieve the sticky header by leaving the height set to auto and setting a max-height to 90vh which was strange.
In your globals.css enter this code:
.custom_table__header {
position: sticky;
left: 0; /* optional */
top:0;
z-index: 1; /* adjust as needed */
}
Then assign the css variable to your table element. If you want it to apply to all tables on your website globally, you would simply remove “custom_” so the name is just
.table__header
But you would need to make the table height fixed for all existing tables in order for it to work.
Here is a screenshot of my configs to get the result:
If you would like to learn more why tables require a max height or a hidden x overflow to maintain a sticky header, you can read some MDN articles about this or enter the following prompt into google ai or chatgpt:
Why does a table header lose its sticky header behavior unless there is a fixed max height on the table and does not include overflow-x?
