Fix order of grouping is now fixed when sorting

Author: estruyf

src/controls/listView/IListView.ts

@@ -3,6 +3,11 @@ import { IColumn ,IGroup} from 'office-ui-fabric-react/lib/components/DetailsLis
 
 export { SelectionMode };
 
+export enum GroupOrder {
+  ascending = 1,
+  descending
+}
+
 export interface IListViewProps {
 
   /**
@@ -20,7 +25,7 @@ export interface IListViewProps {
   /**
    * The fields you want to group your list view by
    */
-  groupByFields?: string[];
+  groupByFields?: IGrouping[];
   /**
    * Boolean value to indicate if the component should render in compact mode.
    * Set to false by default
@@ -52,6 +57,16 @@ export interface IListViewState {
   groups?: IGroup[];
 }
 
+export interface IGrouping {
+  name: string;
+  order: GroupOrder;
+}
+
+export interface IGroupsItems {
+  items: any[];
+  groups: IGroup[];
+}
+
 export interface IViewField {
 
   /**

src/controls/listView/ListView.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IGroup } from 'office-ui-fabric-react/lib/DetailsList';
-import { IListViewProps, IListViewState, IViewField } from './IListView';
+import { IListViewProps, IListViewState, IViewField, IGrouping, GroupOrder } from './IListView';
 import { IColumn } from 'office-ui-fabric-react/lib/components/DetailsList';
 import { findIndex, has, sortBy, isEqual, cloneDeep } from '@microsoft/sp-lodash-subset';
 import { FileTypeIcon, IconType } from '../fileTypeIcon/index';
 import * as strings from 'ControlStrings';
+import { IGroupsItems } from '../../../lib/ListView';
 
 /**
  * File type icon component
@@ -55,7 +56,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
    * @param items
    * @param groupByFields
    */
-  private _getGroups(items: any[], groupByFields: string[], level: number = 0, startIndex: number = 0): {items: any[], groups: IGroup[]} {
+  private _getGroups(items: any[], groupByFields: IGrouping[], level: number = 0, startIndex: number = 0): IGroupsItems {
     // Group array which stores the configured grouping
     let groups: IGroup[] = [];
     let updatedItemsOrder: any[] = [];
@@ -67,7 +68,7 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
         // Create grouped items object
         const groupedItems = {};
         items.forEach((item: any) => {
-          let groupName = item[groupField];
+          let groupName = item[groupField.name];
           // Check if the group name exists
           if (typeof groupName === "undefined") {
             // Set the default empty label for the field
@@ -86,8 +87,16 @@ export class ListView extends React.Component<IListViewProps, IListViewState> {
           groupedItems[groupName].push(item);
         });
 
+        // Sort the grouped items object by its key
+        const sortedGroups = {};
+        let groupNames = Object.keys(groupedItems);
+        groupNames = groupField.order === GroupOrder.ascending ? groupNames.sort() : groupNames.sort().reverse();
+        groupNames.forEach((key: string) => {
+          sortedGroups[key] = groupedItems[key];
+        });
+
         // Loop over all the groups
-        for (const groupItems in groupedItems) {
+        for (const groupItems in sortedGroups) {
           // Retrieve the total number of items per group
           const totalItems = groupedItems[groupItems].length;
           // Create the new group

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -5,7 +5,7 @@ import { escape } from '@microsoft/sp-lodash-subset';
 import { FileTypeIcon, IconType, ApplicationType, ImageSize } from '../../../FileTypeIcon';
 import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/components/Dropdown';
 import { Placeholder } from '../../../Placeholder';
-import { ListView, IViewField, SelectionMode } from '../../../ListView';
+import { ListView, IViewField, SelectionMode, GroupOrder, IGrouping } from '../../../ListView';
 import { SPHttpClient } from '@microsoft/sp-http';
 import { SiteBreadcrumb } from '../../../SiteBreadcrumb';
 
@@ -114,7 +114,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
 
     // Specify the fields on which you want to group your items
     // Grouping is takes the field order into account from the array
-    const groupByFields: string[] = ["ListItemAllFields.Title"];
+    const groupByFields: IGrouping[] = [{name: "ListItemAllFields.City", order: GroupOrder.ascending }, {name: "ListItemAllFields.Country.Label", order: GroupOrder.descending}];
 
     return (
       <div className={styles.controlsTest}>