Render peoplecard when hover user in DetailList?

Regular Contributor



I am creating a Web part that is using the DetailList component to render the Title column and a people column. 

I get the values of all columns and now I would like to show information about the user when the pointer is over his/her name. 

I wonder if there is peopleCard component or a combination of components that can do that. 

This is how the lis looks like: 



And this what I want to achieve: 


I doesn't need to be so complete, I mean, I don't need the Files part or the "update your profile".


This is my code until now: 


export default class PersonaApp extends React.Component<IPersonaAppProps, IPersonaAppState> { 
constructor(props: IPersonaAppProps) {
this.state = {
users: [],
name: '',
email: '',
phone: '',
image: null
public componentDidMount(): void {
this.props.provider.getAllUser().then((users: IUsers[]) => {
users: users

private columns: IColumn[] = [
key: 'Title',
name: 'Title',
fieldName: 'Title',
minWidth: 100,
maxWidth: 100
key: 'UserTitle',
name: 'User Name',
fieldName: 'UserTitle',
minWidth: 100,
maxWidth: 100

public render(): React.ReactElement<IPersonaAppProps> {
return (
<div className={ styles.personaApp }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
ariaLabelForSelectionColumn="Toggle selection"
ariaLabelForSelectAllCheckbox="Toggle selection for all items"

I am suspecting that I will need to use MSGraph to get the info of the user and here is my second question: 

I am using pnp to get the context of the web part like this:

public onInit(): Promise<void> {
return super.onInit().then(_ => {
spfxContext: this.context
return Promise.resolve();


 Bu I am not sure how to add MS graph in the onInit. 

Other alternative I found was to use the @pnp/graph but I don't know how to fetch the data of the user that has the mouse over event handler. 


As you can note, I don't have idea how to do all of this. 


Is there a guide to implement this peopleCard in DetailList? or is there som github sample code that do that? 


Best regards



0 Replies