Thanks for sharing your solution!
Perhaps someone can assist me in taking it a step further with the css. I typically only need to freeze the first column, but if the text in the first column is lengthy, then it flows over into the next cell. In my example app below, my first column is typically 100px wide. If I have a short cell input, everything looks great, however, if the cell input becomes long as shown in the first 2 rows of my datagrid, then the text doesn’t wrap as I would like it to.
One solution is to increase cell width to 200px and then change the margin-left: 200px and margin-left: -200px for the “wide” roles in the theme.css. The problem with that is then all “fix” columns for all datagrids across my app need to have a first column width of 200px or it doesn’t look good. So I’d like to keep all my first columns to a width of 100px but wrap the text when it becomes lengthy.
I’ve tried changing the css for the “fix” role with
word-break: break-all;
word-wrap: break-word;
and all sorts of other css. None seem to do the trick. I suspect it’s clashing with the “wide” role but not yet comfortable enough with css to figure out a solution.
https://anvil.works/build#clone:5RN4EYI7AHZXZVFI=VF2NV3KBC43N6I4F6HXIN6NC
Appreciate the help.