Pin first columns in datagrid

Anvil Q&A
1

Hi,

I’ve got a datagrid with allows horizontal scrolling (see below gif), what I want to do is to freeze/pin the first three columns, is there any way to do this?

If not then I think I have to put two datagrids in a column panel, any other options?!

scroll.gif
scroll.gif1060×592 665 KB

3

Welcome!

I’m thinking this is going to require a custom solution. Here are some pointers: css - How do I create an HTML table with a fixed/frozen left column and a scrollable body? - Stack Overflow

4

Hi Tim,

Thanks you put me on the right track! Got it working now with some CSS, took some trail and error to get it right…

So this what my theme.css looks like for the relevant bits:

.anvil-role-wide .data-grid-child-panel {
overflow-x: auto;
margin-left:13em;
}

.anvil-role-wide .anvil-data-row-panel {
flex-wrap: nowrap;
min-width: -moz-min-content;
min-width: min-content;
margin-left:-13em;
}

.anvil-role-fix {
position: absolute;
margin-left:0em;
}

And I have applied the role=‘fix’ to the buttons and labels in the first three columns of the data rows of the datagrid, see below in action:

scroll2
scroll21060×610 589 KB

9 Likes
5

Wow, very cool. I thought there would be a lot more to it than that.

6

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.

7

Hi,

what you could try is change the css width, dynamically , I’m also not wel versed in css but when looking for a solution I found this:https://css-tricks.com/updating-a-css-variable-with-javascript/ which implies that you could make the width a css-variable and then use javascript to change this.

1 Like