Add custom row rendering

pnp · Apr 26, 2022 · 7049bb4 · 7049bb4
1 parent ffc088a
commit 7049bb4
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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();