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

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.

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

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.

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:

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

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

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

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