Merge pull request #1192 from milanholemans/ListView-rowstyle

Add custom row rendering

Author: joelfmrodrigues

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) => 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 |

src/controls/listView/IListView.ts

@@ -1,5 +1,4 @@
-import { Selection, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
-import { IColumn, IGroup } from 'office-ui-fabric-react/lib/components/DetailsList';
+import { IColumn, IGroup, SelectionMode, IDetailsRowProps } from 'office-ui-fabric-react/lib/components/DetailsList';
 
 export { SelectionMode };
 
@@ -68,6 +67,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
    */

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();