How to add custom sorting in a PCF dataset component ?

[sheldoncopper73]

Hi,

I want to add custom sorting on my PCF grid. However I do not see any method to add sorting. 

Also I want the sorting to not only be applied to the data visible as per the page size. Instead it should be applied to the entire data set.

So lets say my Page Size is 4, and I sort the grid by name and in descending order. Now if there's a record with the name starting with 'Z' on the 5th page still it should get displayed on the 1st page as 1st record. 

Any suggestion is  highly appreciated.

Thanks!

[Goutham]

I believe you had implementing some kind of pagination logic in your custom control.from Datasetgrid,You need to load all items from all pages  and then apply the sorting logic. use dataset.Paging.Loadnextpage() until it loads all pages or set dataset.paging.pagesize(use SetPageSize) to totalrecordscount. I agree this has some performance considerations.

Please look at below forum for implementing sorting.

https://stackoverflow.com/questions/60513317/apply-a-sort-to-a-dataset-in-a-powerapps-component-pcf 

There are also custom grids in PCF gallery which you can look at for sorting.

[skoofy5]

I'm keen to know the answer to this - I don't believe the code below is supported, but I need a correctly sorted dataset.

dataSet.sorting.push({ name: "columnName", sortDirection: 0 });

[DianaBirkelbach · Accepted solution]

Hi @sheldoncopper73 , 

Basically @skoofy5 is right, but it needs a little more: you need to go to page 1 by yourself.

I use loadExactPage, so my code for sorting is looking like this:

const oldSorting = (sorting || []).find((sort) => sort.name===columnClicked);        
const newValue : DataSetInterfaces.SortStatus = {
      name: columnClicked, 
      sortDirection : oldSorting!= null ? (oldSorting.sortDirection === 0 ? 1 : 0) : 0 //0 = ascending
 };
while (dataset.sorting.length > 0) {
   dataset.sorting.pop();
}
dataset.sorting.push(newValue);        
(dataset.paging as any).loadExactPage(1);
dataset.refresh();

In case you don't work with loadExactPage, I guess you need:

dataset.paging.reset()

in order to go to page 1.

 I have a blog about sorting, showing also another issue. Maybe it helps: Dataset PCF using FluentUI: Sorting – Dianamics PCF Lady (wordpress.com)

Kind regards,

Diana

----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

[skoofy5]

@DianaBirkelbach - do you know if there's any potential issues using this considering it's undocumented?

All I can find regarding sorting is this - https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/sortstatus

[DianaBirkelbach]

Hi @skoofy5 , 

If you mean sorting, it is documented here: DataSet - Power Apps | Microsoft Docs

Or do you refer to the unsupported loadExactPage?

Kind regards,

Diana

[Goutham]

Hi @DianaBirkelbach ,

I see below code is not working. Am i missing any?From console, i see that column name pushed to sorting is correct.

I am using fluentUi details list and calling this oncolumnheaderclick. Any thoughts would be appreciated?

oncolumnclicked(ev,column) //column is of IColumn type
{
let columnClicked=column.fieldName;
const newValue : DataSetInterfaces.SortStatus = {
name: columnClicked,
sortDirection : 1
};
while (dataset.sorting.length > 0) {
dataset.sorting.pop();
}
dataset.sorting.push(newValue);
(dataset.paging as any).loadExactPage(1);
dataset.refresh();

}

[DianaBirkelbach]

Hi @Goutham , 

Besides that the sorting is only descending, (which is not the issue here), I cannot detect any problem in the code.

But similar code works for me. 

Calling the dataset.refresh() will call the updateView method of your PCF (later on), this time with refreshed content. Maybe it's a react issue, where the change in the Virtual DOM is not detected. I think a console.log with the data inside the updateView (maybe first line of code there) could clarify this.

Kind regards,

Diana

[Goutham]

Thank you Diane!!

Yes, its issue with overridden logic in Componentdidupdate.