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

**URL:** <https://community.plotly.com/t/how-has-your-experience-been-using-dash-ag-grid-on-mobile/84369>\
**Category:** Dash Python\
**Tags:** community-components, question\
**Created:** [May 8, 2024, 5:18pm UTC](https://community.plotly.com/t/how-has-your-experience-been-using-dash-ag-grid-on-mobile/84369 "2024-05-08T17:18:36Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![manish1022iiti](https://avatars.discourse-cdn.com/v4/letter/m/97f17d/32.png) [@manish1022iiti](https://community.plotly.com/u/manish1022iiti)\
**Post date:** [May 8, 2024, 5:18pm UTC](https://community.plotly.com/t/how-has-your-experience-been-using-dash-ag-grid-on-mobile/84369/1 "2024-05-08T17:18:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![davidharris](https://avatars.discourse-cdn.com/v4/letter/d/df705f/32.png) [@davidharris](https://community.plotly.com/u/davidharris)\
**Post date:** [May 9, 2024, 8:14am UTC](https://community.plotly.com/t/how-has-your-experience-been-using-dash-ag-grid-on-mobile/84369/2 "2024-05-09T08:14:57Z")

</div>

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.:

```python
style={"margin-left":"10%","max-height":"90vh","max-width":"88%"}

```

---

<div class="post-metadata">

**Author:** ![manish1022iiti](https://avatars.discourse-cdn.com/v4/letter/m/97f17d/32.png) [@manish1022iiti](https://community.plotly.com/u/manish1022iiti)\
**Post date:** [May 10, 2024, 1:22am UTC](https://community.plotly.com/t/how-has-your-experience-been-using-dash-ag-grid-on-mobile/84369/3 "2024-05-10T01:22:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [May 10, 2024, 4:53am UTC](https://community.plotly.com/t/how-has-your-experience-been-using-dash-ag-grid-on-mobile/84369/4 "2024-05-10T04:53:34Z")

</div>

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.

😁

---

<div class="post-metadata">

**Author:** ![davidharris](https://avatars.discourse-cdn.com/v4/letter/d/df705f/32.png) [@davidharris](https://community.plotly.com/u/davidharris)\
**Post date:** [May 10, 2024, 4:54pm UTC](https://community.plotly.com/t/how-has-your-experience-been-using-dash-ag-grid-on-mobile/84369/5 "2024-05-10T16:54:52Z")

</div>

Thanks @jinnyzor

To make the filter menu button always visible:

```python
dashGridOptions = {"suppressMenuHide":True }

```

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

```python
defaultColDef={ "filter": True, "floatingFilter":True }

```

---

<div class="post-metadata">

**Author:** ![davidharris](https://avatars.discourse-cdn.com/v4/letter/d/df705f/32.png) [@davidharris](https://community.plotly.com/u/davidharris)\
**Post date:** [May 12, 2024, 7:54am UTC](https://community.plotly.com/t/how-has-your-experience-been-using-dash-ag-grid-on-mobile/84369/6 "2024-05-12T07:54:53Z")

</div>

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

> **[JavaScript Grid: Touch | AG Grid](https://www.ag-grid.com/javascript-data-grid/touch/)**
>
> AG Grid is designed to work on touch devices. By default, browsers convert tap events to mouse click events. This means, for example, if you tap on a cell in AG Grid, the cell will get selected just like you clicked on the cell with a mouse. The...

> **[Angular Grid: Using CSS | AG Grid](https://www.ag-grid.com/angular-data-grid/global-style-customisation-css/)**
>
> This page contains information for troubleshooting and advanced use of CSS Download AG Grid today: The best Angular Data Table in the world.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [May 12, 2024, 11:17am UTC](https://community.plotly.com/t/how-has-your-experience-been-using-dash-ag-grid-on-mobile/84369/7 "2024-05-12T11:17:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![manish1022iiti](https://avatars.discourse-cdn.com/v4/letter/m/97f17d/32.png) [@manish1022iiti](https://community.plotly.com/u/manish1022iiti)\
**Post date:** [May 20, 2024, 7:39pm UTC](https://community.plotly.com/t/how-has-your-experience-been-using-dash-ag-grid-on-mobile/84369/8 "2024-05-20T19:39:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![BridgerAlec](https://avatars.discourse-cdn.com/v4/letter/b/22d042/32.png) [@BridgerAlec](https://community.plotly.com/u/BridgerAlec)\
**Post date:** [September 5, 2024, 9:42am UTC](https://community.plotly.com/t/how-has-your-experience-been-using-dash-ag-grid-on-mobile/84369/9 "2024-09-05T09:42:32Z")

</div>

> [@manish1022iiti](#):
>
> 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’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.

---

<div class="post-metadata">

**Author:** ![manish1022iiti](https://avatars.discourse-cdn.com/v4/letter/m/97f17d/32.png) [@manish1022iiti](https://community.plotly.com/u/manish1022iiti)\
**Post date:** [September 16, 2024, 7:42pm UTC](https://community.plotly.com/t/how-has-your-experience-been-using-dash-ag-grid-on-mobile/84369/10 "2024-09-16T19:42:57Z")

</div>

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.
