How to use MGT Person in Ag-Grid

[Ofer-Gal]

I have a cell renderer that shows a person component fine.
<Person fallbackDetails={{ mail: params.data.RequestFor.Email, displayName: params.value }} personQuery={params.data.RequestFor.Email} //style={{zIndex: 13000}} showPresence={true} view={PersonViewType.oneline} personCardInteraction={PersonCardInteraction.hover} />
but the "PersonCard" was hidden under the grid.
I add in CSS: .user-avatar { z-index: 13000 !important; } but that did only part of the unhiding.
It still shows like :

Any idea how to make it show above the rows?

Thank you

[sebastienlevert]

This is something I've seen in the past. Let me transfer this discussion into a bug / issue so we can investigate!

[vogtn]

@Ofer-Gal

I think you should use workarounds with Ag-grid rather than the toolkit. I'm not sure we should cater the toolkit components towards this framework specifically... css-grid, html tables, and other examples will affect dropdown flyout behavior differently. Good news, It looks like there is already some ag-grid workaorounds. I was able to build a sample here:

https://stackblitz.com/edit/mgt-react-login-43xgzm?file=src%2FApp.js

You'll notice suppressRowTransform and additional css per grid item to adjust for overflow. Let us know if this works for you!

[vogtn]

@Ofer-Gal

That error comes from loading different versions of mgt, like mgt and mgt-react at the same time... Are you importing the same library in the tsx and js?

[Ofer-Gal]

I am only using mgt-spfx and mgt-react. When I went back to my old renderer, the error went away.🤫
Thanks

[Mauro-7]

Hi,
the person card display only inside of the ag-grid-table but if you select last items the person card not display:

have you any idea?
Thanks

[Ofer-Gal]

I have the same problem. I tried to set the z-index to the highest possible and it did not work.
The temporary solution is to give AG-grid more height than needed. (empty space on the bottom)

[sebastienlevert]

This is due to how grids are rendering. They are using transform and create a new stacking context for our components. For now, we don't have a lot of control over it, especially living in the Shadow DOM. We added an issue on the repo #1721 and we will following up over there. It's definitely top of mind as the same behavior happens with the Fluent UI Details List. Thanks for bringing to our attention!