Custom Sort is not working with lazy Load Data table in Prime react

[karttik25]

the sortFuntion event is not working in lazyload grid prime react.
Code sample :

Code: Select all

<DataTable
                            lazy={true}
                            value={props.subscriptions}
                            paginator={true} rowsPerPageOptions={[5, 10, 20, 50]}
                            header={header} responsive={true} loading={props.loading}
                            rows={props.rows} totalRecords={props.totalRecords}
                            onPage={props.onPage} first={props.first}
                            resizableColumns={true} columnResizeMode="fit" emptyMessage="No records found">
                            <Column field="subscriptionName" header="Subscription" filter={true} sortFunction={props.sort}
                               sortable={true} filterElement={subscriptionFilter} filterMatchMode="contains" />
                          
</DataTable> 

if the lazy value will change to lazy ={false}, then it works.
Could you please someone help me to do custom sorting in lazyload prime react table.

[dmance]

I have the same issue. Did you resolved it?

[neiltongco]

You need to add code for sorting during the lazyload.

loadCarsLazy(event: LazyLoadEvent) {
this.loading = true;

//in a real application, make a remote request to load data using state metadata from event
//event.first = First row offset
//event.rows = Number of rows per page
//event.sortField = Field name to sort with
//event.sortOrder = Sort order as number, 1 for asc and -1 for dec
//filters: FilterMetadata object having field as key and filter value, filter matchMode as value

// sort by sortfield
if(event.sortField) {
this.datasource.sort((data1, data2) => {
let value1 = data1[event.sortField];
let value2 = data2[event.sortField];
let result = null;

if (value1 == null && value2 != null)
result = -1;
else if (value1 != null && value2 == null)
result = 1;
else if (value1 == null && value2 == null)
result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string')
result = value1.localeCompare(value2);
else
result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;

return (event.sortOrder * result);
});
}
//imitate db connection over a network
setTimeout(() => {
if (this.datasource) {
this.cars = this.datasource.slice(event.first, (event.first + event.rows));
this.loading = false;
}
}, 1000);
}

[mert.sincan]

Thanks a lot @neiltongco, +1

Best Regards,