diff --git a/samples/react-datatable/README.md b/samples/react-datatable/README.md
index c628662de..102d5a202 100644
--- a/samples/react-datatable/README.md
+++ b/samples/react-datatable/README.md
@@ -43,6 +43,7 @@ Version|Date|Comments
 1.1|February 24, 2021|Added support for large lists
 1.2|March 01, 2021|Fixed search issue for number field
 1.3|March 31,2021| Changed UI as per SharePoint list, Set themeing as per current SharePoint site theme, Created custom pagination by using reusable controls, Added features to export CSV based on the filter if the filter is available, Added hyperlink feature for image and link column in export to pdf and also set alternative row formatting in generated pdf as per property pane configuration odd/even row color, fixed object issue (for people/hyperlink, etc) in export to CSV.
+1.4|April 10, 2021|Added feature to show profile picture in user column and shows display name of user field in export to CSV and PDF.
 
 
 ## Disclaimer
diff --git a/samples/react-datatable/assets/preview.png b/samples/react-datatable/assets/preview.png
index 044640cbd..e3adc95d4 100644
Binary files a/samples/react-datatable/assets/preview.png and b/samples/react-datatable/assets/preview.png differ
diff --git a/samples/react-datatable/src/shared/common/ExportListItemsToCSV/ExportListItemsToCSVFormatter.ts b/samples/react-datatable/src/shared/common/ExportListItemsToCSV/ExportListItemsToCSVFormatter.ts
index 529857d6d..ad5a54593 100644
--- a/samples/react-datatable/src/shared/common/ExportListItemsToCSV/ExportListItemsToCSVFormatter.ts
+++ b/samples/react-datatable/src/shared/common/ExportListItemsToCSV/ExportListItemsToCSVFormatter.ts
@@ -1,14 +1,16 @@
 export function csvCellFormatter(value: any, type: string) {
-    if (!value) {
-      return value;
-    }
-    switch (type) {
-      case 'SP.FieldUrl':
-        value = value.props.children;
-        break;
-      default:
-        break;
-    }
+  if (!value) {
     return value;
   }
+  switch (type) {
+    case 'SP.FieldUrl':
+      value = value.props.children;
+      break;
+    case 'SP.FieldUser':
+      value = value.props.displayName;
+    default:
+      break;
+  }
+  return value;
+}
 
diff --git a/samples/react-datatable/src/shared/common/ExportListItemsToPDF/ExportListItemsToPDFFormatter.ts b/samples/react-datatable/src/shared/common/ExportListItemsToPDF/ExportListItemsToPDFFormatter.ts
index bb33f9654..09fc67008 100644
--- a/samples/react-datatable/src/shared/common/ExportListItemsToPDF/ExportListItemsToPDFFormatter.ts
+++ b/samples/react-datatable/src/shared/common/ExportListItemsToPDF/ExportListItemsToPDFFormatter.ts
@@ -1,15 +1,17 @@
 export function pdfCellFormatter(value: any, type: string) {
-    if (!value) {
-      return value;
-    }
-    switch (type) {
-      case 'SP.FieldUrl':
-        let { children: text, href: link } = value.props;
-        value = { text, link, color: 'blue' };
-        break;
-      default:
-        break;
-    }
+  if (!value) {
     return value;
   }
+  switch (type) {
+    case 'SP.FieldUrl':
+      let { children: text, href: link } = value.props;
+      value = { text, link, color: 'blue' };
+      break;
+    case 'SP.FieldUser':
+      value = value.props.displayName;  
+    default:
+      break;
+  }
+  return value;
+}
 
diff --git a/samples/react-datatable/src/shared/common/RenderProfilePicture/RenderProfilePicture.tsx b/samples/react-datatable/src/shared/common/RenderProfilePicture/RenderProfilePicture.tsx
new file mode 100644
index 000000000..7d9c4991a
--- /dev/null
+++ b/samples/react-datatable/src/shared/common/RenderProfilePicture/RenderProfilePicture.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona';
+
+interface IProfilePicProps {
+    loginName: string;
+    displayName: string;
+    getUserProfileUrl: () => Promise<string>;
+}
+
+export function RenderProfilePicture(props: IProfilePicProps) {
+
+    const [profileUrl, setProfileUrl] = React.useState<string>();
+    let { displayName, getUserProfileUrl } = props;
+
+    React.useEffect(() => {
+        getUserProfileUrl().then(url => {
+            setProfileUrl(url);
+        });
+    }, [props])
+
+    return (
+        <Persona
+            imageUrl={profileUrl}
+            text={displayName}
+            size={PersonaSize.size32}
+            imageAlt={displayName}
+            styles={{ primaryText: { fontSize: '12px' } }}
+        />);
+}
\ No newline at end of file
diff --git a/samples/react-datatable/src/shared/service/SPService.ts b/samples/react-datatable/src/shared/service/SPService.ts
index d70df0aec..9b4721d24 100644
--- a/samples/react-datatable/src/shared/service/SPService.ts
+++ b/samples/react-datatable/src/shared/service/SPService.ts
@@ -17,7 +17,7 @@ export class SPService {
             for (var i = 0; i < selectedFields.length; i++) {
                 switch (selectedFields[i].fieldType) {
                     case 'SP.FieldUser':
-                        selectQuery.push(`${selectedFields[i].key}/Title,${selectedFields[i].key}/Name`);
+                        selectQuery.push(`${selectedFields[i].key}/Title,${selectedFields[i].key}/EMail,${selectedFields[i].key}/Name`);
                         expandQuery.push(selectedFields[i].key);
                         break;
                     case 'SP.FieldLookup':
@@ -63,9 +63,10 @@ export class SPService {
         }
     }
 
-    public async getUserProfileUrl(loginName: string, propertyName: string) {
+    public async getUserProfileUrl(loginName: string) {
         try {
-            const profileUrl = await sp.profiles.getUserProfilePropertyFor(loginName, propertyName);
+            const properties = await sp.profiles.getPropertiesFor(loginName);
+            const profileUrl = properties['PictureUrl'];
             return profileUrl;
         }
         catch (err) {
diff --git a/samples/react-datatable/src/webparts/reactDatatable/components/ReactDatatable.tsx b/samples/react-datatable/src/webparts/reactDatatable/components/ReactDatatable.tsx
index 94a2b00af..192932d33 100644
--- a/samples/react-datatable/src/webparts/reactDatatable/components/ReactDatatable.tsx
+++ b/samples/react-datatable/src/webparts/reactDatatable/components/ReactDatatable.tsx
@@ -17,7 +17,7 @@ import { DetailsList, DetailsListLayoutMode, DetailsRow, IDetailsRowStyles, IDet
 import { pdfCellFormatter } from '../../../shared/common/ExportListItemsToPDF/ExportListItemsToPDFFormatter';
 import { csvCellFormatter } from '../../../shared/common/ExportListItemsToCSV/ExportListItemsToCSVFormatter';
 import { IPropertyPaneDropdownOption } from '@microsoft/sp-property-pane';
-
+import { RenderProfilePicture } from '../../../shared/common/RenderProfilePicture/RenderProfilePicture';
 
 export default class ReactDatatable extends React.Component<IReactDatatableProps, IReactDatatableState> {
 
@@ -45,6 +45,10 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
     this.getSelectedListItems();
   }
 
+  private getUserProfileUrl = (loginName: string) => {
+    return this._services.getUserProfileUrl(loginName)
+  }
+
   public componentDidUpdate(prevProps: IReactDatatableProps) {
     if (prevProps.list !== this.props.list) {
       this.props.onChangeProperty("list");
@@ -82,7 +86,7 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
   private _onConfigure() {
     this.props.context.propertyPane.open();
   }
- 
+
 
   public formatColumnValue(value: any, type: string) {
     if (!value) {
@@ -102,7 +106,9 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
         value = value['Title'];
         break;
       case 'SP.FieldUser':
-        value = value['Title'];
+        let loginName = value['Name'];
+        let userName = value['Title'];
+        value = <RenderProfilePicture loginName={loginName} displayName={userName} getUserProfileUrl={() => this.getUserProfileUrl(loginName)}  ></RenderProfilePicture>;
         break;
       case 'SP.FieldMultiLineText':
         value = <div dangerouslySetInnerHTML={{ __html: value }}></div>;
@@ -124,6 +130,7 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
     }
     return value;
   }
+
   public formatValueForExportingData(value: any, type?: string) {
     if (!value) {
       return value;
@@ -144,17 +151,17 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
     return value;
   }
 
-  private exportDataFormatter(fields: Array<IPropertyPaneDropdownOption & { fieldType: string }>, listItems: any[], cellFormatterFn: (value: any, type: string) => any){
+  private exportDataFormatter(fields: Array<IPropertyPaneDropdownOption & { fieldType: string }>, listItems: any[], cellFormatterFn: (value: any, type: string) => any) {
     return listItems && listItems.map(item => ({
-        ...fields.reduce((ob, f) => {
-          ob[f.text] = item[f.key] ? cellFormatterFn(item[f.key], f.fieldType) : '-';
-          return ob;
-        }, {})
-      }));
+      ...fields.reduce((ob, f) => {
+        ob[f.text] = item[f.key] ? cellFormatterFn(item[f.key], f.fieldType) : '-';
+        return ob;
+      }, {})
+    }));
   }
 
-  private handlePaginationChange(pageNo: number, pageSize: number) {
-    this.setState({ page: pageNo, rowsPerPage: pageSize });
+  private handlePaginationChange(pageNo: number, rowsPerPage: number) {
+    this.setState({ page: pageNo, rowsPerPage: rowsPerPage });
   }
 
   public handleSearch(event: React.ChangeEvent<HTMLInputElement>) {
@@ -257,8 +264,8 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
                             columnHeader={columns.map(c => c.name)}
                             listName={list}
                             description={title}
-                            dataSource={()=> this.exportDataFormatter(fields, filteredItems, csvCellFormatter)} 
-                             /> : <></>}
+                            dataSource={() => this.exportDataFormatter(fields, filteredItems, csvCellFormatter)}
+                          /> : <></>}
                         {enableDownloadAsPdf
                           ? <ExportListItemsToPDF
                             listName={list}
@@ -266,7 +273,7 @@ export default class ReactDatatable extends React.Component<IReactDatatableProps
                             columns={columns.map(c => c.name)}
                             oddRowColor={oddRowColor}
                             evenRowColor={evenRowColor}
-                            dataSource={()=> this.exportDataFormatter(fields, filteredItems, pdfCellFormatter)} />
+                            dataSource={() => this.exportDataFormatter(fields, filteredItems, pdfCellFormatter)} />
                           : <></>}
                       </Grid>
                       <Grid container justify='flex-end' xs={6}>