1

I am attempting to add sorting functionality to a DataTable using primereact 8.6.1. As written in the official documentation (https://www.primefaces.org/primereact/datatable) "In lazy mode, pagination, sorting and filtering must be used in controlled mode" and "In controlled mode, sortField, sortOrder and onSort properties need to be defined to control the sorting state". The following example is provided:

const onSort = (e) => {
    setSortField(e.sortField);
    setSortOrder(e.sortOrder);
}
 

<DataTable value={products} sortField={sortField} sortOrder={sortOrder} onSort={onSort}>
    <Column field="code" header="Code" sortable></Column>
    <Column field="name" header="Name" sortable></Column>
    <Column field="category" header="Category" sortable></Column>
    <Column field="quantity" header="Quantity" sortable></Column>
</DataTable>

However, in my case, only the sorting which takes place by default based on the initial values of sortField and sortOrder, works. Clicking on any of the sortable columns triggers the "onSort" function, but doesn't re-order the data. Below are excerpts of my code:

 const [sortField, setSortField] = useState<string>('lastModified');
 const [sortOrder, setSortOrder] = useState<any>(-1);

 const handleSorting = (e: any) => {
    setSortField(e.sortField);
    setSortOrder(e.sortOrder);
 };

<DataTable value={(data?.items || []) as NlSearchResult[]} paginator paginatorRight
                       paginatorTemplate={paginatorTemplate}
                       first={paginatorFirst} rows={rowsPerPage} lazy totalRecords={data?.total || 0}
                       onPage={handlePageChange} onSort={handleSorting} sortField={sortField}
                       sortOrder={sortOrder}>
      <Column header="Last Updated" sortable field="lastModified" body={lastUpdatedDateTemplate}/>
      <Column header="Created By" sortable field="createdBy"/>
      <Column header="Newsletter" body={imageTemplate}/>
      <Column header="Name" sortable field="name" body={nameAndSubjectTemplate}/>
      <Column header="Scheduled" body={scheduledTemplate}/>
      <Column header="Campaign/Company" body={campaignCompanyTemplate}/>
      <Column header="Newsletter Type" body={nlTypeTemplate}/>
      <Column header={filterHeader}/>
</DataTable>

I'm not sure what I'm missing or doing wrong and any help would be immensely appreciated.

Boris Layvant
  • 151
  • 13
  • I think you are doing it wrong. You should look at my example of a fully working PrimeReact Lazy Table with real REST Services: https://github.com/melloware/quarkus-monorepo – Melloware Sep 26 '22 at 21:31
  • @Melloware The only difference related to sorting that I see between my code and your example is that in your example, since you're sorting on multiple columns, your sort event handler modifies the value for multiSortMeta. Whereas in my case, since I'm sorting on a single column, the sort event handler modifies the values for sortField and sortOrder. – Boris Layvant Sep 28 '22 at 16:11
  • Interesting. I will see if I can modify mine for single sorting. – Melloware Sep 28 '22 at 17:10

1 Answers1

1

If you use lazy loading then all sorting must be done serverside (clientside sorting is not involved in this scenario) because with lazy loading you load only page of data but sorting must be done on the whole dataset and for this you have to send sortField and sortOrder values (pageNumber and rowsPerPage also) to server and do sorting by JPA or DB query or stored proc.

ubau
  • 26
  • 1