From 7049bb4527d53addc987580a5ec7de5e97969ac5 Mon Sep 17 00:00:00 2001
From: Milan Holemans <11723921+milanholemans@users.noreply.github.com>
Date: Tue, 26 Apr 2022 19:00:21 +0200
Subject: [PATCH 1/2] Add custom row rendering

---
 docs/documentation/docs/controls/ListView.md |  1 +
 src/controls/listView/IListView.ts           | 10 ++++++++--
 src/controls/listView/ListView.tsx           |  3 ++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/docs/documentation/docs/controls/ListView.md b/docs/documentation/docs/controls/ListView.md
index e22fa4718..6c7ba386d 100644
--- a/docs/documentation/docs/controls/ListView.md
+++ b/docs/documentation/docs/controls/ListView.md
@@ -99,6 +99,7 @@ The ListView control can be configured with the following properties:
 | dragDropFiles | boolean | no | Specify the drag and drop files area option. Default false. |
 | onDrop | file | no | Event handler returns files from drag and drop. |
 | stickyHeader | boolean | no | Specifies if the header of the `ListView`, including search box, is sticky |
+| onRenderRow | (props: IDetailsRowProps) => JSX.Element \| null | no | Callback to override the default row rendering. |
 | sortItems | (items: any[], columnName: string, descending: boolean) =&gt; any[] | no | Custom sorting function to handle sorting by column |
 | className | string | no | Class name to apply additional styles on list view wrapper |
 | listClassName | string | no | Class name to apply additional styles on list view |
diff --git a/src/controls/listView/IListView.ts b/src/controls/listView/IListView.ts
index 12353daf5..06733b5f2 100644
--- a/src/controls/listView/IListView.ts
+++ b/src/controls/listView/IListView.ts
@@ -1,5 +1,7 @@
-import { Selection, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
-import { IColumn, IGroup } from 'office-ui-fabric-react/lib/components/DetailsList';
+import {
+  SelectionMode, IColumn,
+  IDetailsRowProps, IGroup
+} from 'office-ui-fabric-react';
 
 export { SelectionMode };
 
@@ -68,6 +70,10 @@ export interface IListViewProps {
    * Set to false by default
    */
   stickyHeader?: boolean;
+  /**
+   * Callback to override the default row rendering.
+   */
+  onRenderRow?: (props: IDetailsRowProps) => JSX.Element | null;
    /**
    * Class name to apply additional styles on list view wrapper
    */
diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx
index be7b6aeae..be5e8408c 100644
--- a/src/controls/listView/ListView.tsx
+++ b/src/controls/listView/ListView.tsx
@@ -580,7 +580,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
   public render(): React.ReactElement<IListViewProps> {
     let groupProps: IGroupRenderProps = {};
 
-    let { showFilter, filterPlaceHolder, dragDropFiles, stickyHeader, selectionMode, compact, className, listClassName } = this.props;
+    let { showFilter, filterPlaceHolder, dragDropFiles, stickyHeader, selectionMode, compact, className, listClassName, onRenderRow } = this.props;
     let { filterValue, items, columns, groups } = this.state;
 
     // Check if selection mode is single selection,
@@ -625,6 +625,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
             groupProps={groupProps}
             className={listClassName}
             onRenderDetailsHeader={this._onRenderDetailsHeader}
+            onRenderRow={onRenderRow}
             componentRef={ref => {
               if (ref) {
                 ref.forceUpdate();

From 6c17a0a20cbe7b5d0d4e75472c7cad7721f0dd3f Mon Sep 17 00:00:00 2001
From: Milan Holemans <11723921+milanholemans@users.noreply.github.com>
Date: Thu, 28 Apr 2022 23:53:31 +0200
Subject: [PATCH 2/2] Update import statement

---
 src/controls/listView/IListView.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/controls/listView/IListView.ts b/src/controls/listView/IListView.ts
index 06733b5f2..a21570525 100644
--- a/src/controls/listView/IListView.ts
+++ b/src/controls/listView/IListView.ts
@@ -1,7 +1,4 @@
-import {
-  SelectionMode, IColumn,
-  IDetailsRowProps, IGroup
-} from 'office-ui-fabric-react';
+import { IColumn, IGroup, SelectionMode, IDetailsRowProps } from 'office-ui-fabric-react/lib/components/DetailsList';
 
 export { SelectionMode };