From 74f27fb625bd3e478e2e2cc7bd2623731b523aa4 Mon Sep 17 00:00:00 2001 From: Alex Terentiev Date: Sat, 1 May 2021 13:01:19 -0700 Subject: [PATCH] #880 - ability to provide custom sorting function to the ListView --- docs/documentation/docs/controls/ListView.md | 1 + src/controls/listView/IListView.ts | 5 +++++ src/controls/listView/ListView.tsx | 3 +++ 3 files changed, 9 insertions(+) diff --git a/docs/documentation/docs/controls/ListView.md b/docs/documentation/docs/controls/ListView.md index 6d2a4a04d..d9772122b 100644 --- a/docs/documentation/docs/controls/ListView.md +++ b/docs/documentation/docs/controls/ListView.md @@ -97,6 +97,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 | +| sortItems | (items: any[], columnName: string, descending: boolean) => any[] | no | Custom sorting function to handle sorting by column | The `IViewField` has the following implementation: diff --git a/src/controls/listView/IListView.ts b/src/controls/listView/IListView.ts index b2bef2432..814e16683 100644 --- a/src/controls/listView/IListView.ts +++ b/src/controls/listView/IListView.ts @@ -68,6 +68,11 @@ export interface IListViewProps { * Set to false by default */ stickyHeader?: boolean; + /** + * Custom sorting function. + * @returns sorted collection of items + */ + sortItems?: (items: any[], columnName: string, descending: boolean) => any[]; } export interface IListViewState { diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx index 96e752e40..6bac32f9d 100644 --- a/src/controls/listView/ListView.tsx +++ b/src/controls/listView/ListView.tsx @@ -459,6 +459,9 @@ export class ListView extends React.Component { * @param descending */ private _sortItems(items: any[], columnName: string, descending = false): any[] { + if (this.props.sortItems) { + return this.props.sortItems(items, columnName, descending); + } // Sort the items const ascItems = sortBy(items, [columnName]); const sortedItems = descending ? ascItems.reverse() : ascItems;