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) => 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 { public render(): React.ReactElement { 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 { groupProps={groupProps} className={listClassName} onRenderDetailsHeader={this._onRenderDetailsHeader} + onRenderRow={onRenderRow} componentRef={ref => { if (ref) { ref.forceUpdate();