Introduction

In this blog, I have explained how to sort Details List grid by clicking on column header in PCF control.

Solution

Details List have a property called onColumnHeaderClick which will handle event when we click on column header. On the other hand when we configure the definition of column, then each column has property called onColumnClick. We can add function to one of these events for sorting. In both cases it will pass data to function which contains sorting related fields. Here I added function on onColumnClick event.

Step by Step

1. Add function on onColumnClick event as following.
2. this._columns.push({
   1. key: ‘columnName’,
   2. name: ‘name’,
   3. fieldName: ‘fieldName’,
   4. minWidth: 200,
   5. maxWidth: 200,
   6. isSorted: isSort,
   7. onColumnClick: this._onColumnClick,
   8. isSortedDescending: false
3. })
2. Define function as follows.
3. private _onColumnClick = (event: React.MouseEvent<HTMLElement>, column: IColumn): void => {
      const { columns } = this.state;
      let { sortedItems } = this.state;
      let isSortedDescending = column.isSortedDescending;
      // If we’ve sorted this column, flip it.
     if (column.isSorted) { isSortedDescending = !isSortedDescending; }
      // Sort the items.
      sortedItems = _copyAndSort(sortedItems, column.fieldName!, isSortedDescending);
      // Reset the items and columns to match the state.
      this.setState({
             sortedItems: sortedItems,
             columns: columns.map(col => {
                        col.isSorted = col.key === column.key;
                        if (col.isSorted) {
                                 col.isSortedDescending = isSortedDescending;
                        }
                       return col;
              }),
       });
   };
3. Now, define _copyAndSort function as follows.
4. function _copyAndSort<T>(items: T[], columnKey: string, isSortedDescending?: boolean): T[] {
        const key = columnKey as keyof T;
       return items.slice(0).sort((a: T, b: T) => ((isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1));
   }
4. Above function will sort string type of data easily. but to sort date and number data we need to convert it Date or Number. but we can’t convert the data directly into Date or Number. first we need to convert it to string as follows :
5. function _copyAndSort<T>(items: T[], columnKey: string, isSortedDescending?: boolean): T[] {
        const key = columnKey as keyof T;
        return items.slice(0).sort(function (a: T, b: T) {
            let NumAString = a[key] as unknown as string;
            let NumBString = b[key] as unknown as string;
            //to convert it to number
            let NumA = parseInt(NumAString);
            let NumB = parseInt(NumBString);
            return isSortedDescending ? NumA – NumB : NumB – NumA;          //(OR) to convert it to Date
           //let dateA = new Date(dateAString);
           //let date = new Date(dateBString);
          //return isSortedDescending ? dateA.getTime() – dateB.getTime() : dateB.getTime() – dateA.getTime();
       });
   }