knowledgecenter-breadcrum

Knowledge Center

02 Jul, 2020

How to sort Details List on column header click?

Posted on 02 Jul, 2020 by Admin, Posted in Power Platform

How to sort Details List on column header click? Blogs

How to sort Details List on column header click?

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. })
  4. Define function as follows.
  5. private _onColumnClick = (event: React.MouseEvent, 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;
    }),
    });
    };
  6. Now, define _copyAndSort function as follows.
  7. function _copyAndSort(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> b[key]) ? 1 : -1));
    }
  8. 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 :
  9. function _copyAndSort(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();
    });
    }

Comment

This is a Required Field

Loading

Recent Updates

Blogs
15 May, 2024

Associated Grid Control Component in Dataverse

The Associated Grid Control enables us to improve the simplicity and readability of forms by displaying related record details across…

READ MORE
Blogs
08 May, 2024

How to Create Product Catalog in Dynamics 365 for Sales - Part 2

This is the second part of the blog. In this blog, we will cover the 3 components of the Product…

READ MORE
Blog Title
Blogs
07 May, 2024

Unleashing Business Potential: How CRM Software Drives ROI and Fuels Growth

Unleashing Business Potential: How CRM Software Drives ROI and Fuels Growth In today's competitive business landscape, maximizing return on investment…

READ MORE