How has your experience been using Dash Ag Grid on mobile?

Dash Python
,
1

Hello everyone,

I have a Dash Web Application that I have so far primarily used on desktop. I am now moving to adapt it to be more mobile friendly and was interested in learning other folks’ experience here, particularly on working with Dash Ag Grid: Open Source and Enterprise on mobile?

Also, if you have any other suggestions/tips as I am starting to make my app more mobile friendly, those will be super helpful as well!

Thank you so much.

2

I did briefly look at this a little while back and it seemed to work well except that I couldn’t get filtering to work - the filter icon in the header didn’t appear. This was on an iPhone, and I don’t know why - it’s not just a viewport size thing, the filter icon’s still there on my laptop no matter how small I make the viewport.

Assuming you’re using a usual sort of single-column layout on a mobile, a couple of tentative suggestions are to leave some margin on one side of the grid so the user doesn’t get locked out of browser-level scrolling, and to make sure the grid size always fits within the viewport. With the grid sitting inside a dbc.Col() you can use e.g.:

style={"margin-left":"10%","max-height":"90vh","max-width":"88%"}
1 Like
3

Thanks @davidharris really appreciate you taking time to respond and give suggestions. Really helpful!

And I think I too read about the filter icon thing not showing up on mobile somewhere, but it said that it appears on tapping the column header. Do you happen to know about it? How did it work out for you (the filtering experience eventually)?

Thanks.

4

Hello @manish1022iiti,

You should be able to adjust the filter to be visible all the time when viewed on mobile instead of being responsive with a cursor hover.

This should help.

My frustration is with pinned columns.

:grin:

5

Thanks @jinnyzor

To make the filter menu button always visible:

dashGridOptions = {"suppressMenuHide":True }

Or to put the filter button on a row below the header:

defaultColDef={ "filter": True, "floatingFilter":True }
2 Likes
6

It turns out that the filter can also be made visible by touch-and-hold-for-500ms. I’m not sure how many users would find that though.

And I’d not realised there seems to be a lot of scope for altering the appearence of the grid with CSS and making it responsive with media queries

1 Like
7

That’s what I meant about the filters and sort. You can customize everything thing about how the grid displays by altering the variables. :grin:

1 Like
8

haha, thank you @jinnyzor, and sorry did not check it sooner.

9

I’m working with Dash Ag Grid and facing some challenges with its responsiveness and functionality on mobile screens. I’ve noticed that certain features and grid interactions don’t perform as smoothly as they do on desktop, and I’m struggling with optimizing the layout for smaller screens.

10

Hello @BridgerAlec don’t know if this reply is still relevant or useful, while the experience on mobile isn’t the best but it’s better for me than I would have hoped for. My users aren’t all that much on mobile, so maybe that’s another reason why I haven’t heard of many pain points of UX on mobile. Btw, I am using Ag grid for tables and that seem to be working fine for me; maybe if you can highlight a few specific things which you are trying to do / facing issues with on mobile, I can tell you if I have/had similar use cases and/or if I know how to tackle those. Thank you.

1 Like