Sticky header in data table

Anvil Q&A
1

What I’m trying to do:

Hi! I’ve been trying to make the header sticky of data table. I have used data row panel as header for the table. So while scrolling on the table the header should be in its posiion

What I’ve tried and what’s not working:
I thought it will work using “position: sticky” property in css but it doesn’t seem to work

Anyone ? please!

2

Have a look at “Pinning Rows” in
Controlling pagination

Does that help?

3

Hi @p.colbert , this property works when I turn the page to see next set of rows

I’m trying to do something like this

4

I strongly recommend @stucork’s Tabulator wrapper if you are hitting the limits of data tables.

The app dependency is TGQCF3WT6FVL2EM2

With Tabultor you can pass the table config

    "maxHeight": "100%",  # Freezes column headers

And this will make sure your column headers stay visible at the top.

You can also freeze rows using Tabulator, among many other things!

1 Like
5

Actually @danbolinson , I have already checked this and the project in which me and my friends are working on is almost complete. We are in the testing stage , because we have already made lots of tables using anvil’s components so we think using new dependency will take us more time.

So, please other options? :sweat_smile::sweat_smile:

6

The DataGridJson does use a sticky row.

If your templates are simple, you can get rid of them and replace your DataGrid with a DataGridJson. That’s what I do. It’s faster, has headers and many more features, and doesn’t need template forms.

Or you can just clone it and look at how the headers are managed.

1 Like