#880 - ability to provide custom sorting function to the ListView

pnp · May 1, 2021 · f3590c0 · f3590c0
1 parent eaaab7e
commit f3590c0
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git 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) =&gt; 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
@@ -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 {
@@ -86,7 +91,7 @@ export interface IListViewState {
   columns?: IColumn[];
 
   groups?: IGroup[];
-  
+
 }
 
 export interface IGrouping {

diff --git a/src/controls/listView/ListView.tsx b/src/controls/listView/ListView.tsx
@@ -460,6 +460,9 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
    * @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;