Sorting

The sorting feature is provided by enabling the sortable property on each column. By default, the component supports single sorting (sortMode="single"). We can achieve multi sorting by setting sortMode="multiple". The DataTable component with the sorting feature to sort browser records in either ascending or descending order would be written as follows:

<p-dataTable [value]="browsers" (onSort)="onSort($event)">
<p-column field="engine" header="Engine" [sortable]="true">
</
p-column>
<p-column field="browser" header="Browser" [sortable]="true">
</
p-column>
<p-column field="platform" header="Platform" [sortable]="true">
</
p-column>
<p-column field="grade" header="Grade" [sortable]="true">
</
p-column>
</p-dataTable>

The following screenshot shows a snapshot result with a single sorting on a limited number of records as an example:

We need to use the Meta key (Ctrl for Windows and Command key for macOS) for the multi column sorting feature. The custom sorting is also supported using the sortFunction function instead of regular sorting on the field property. The sorting feature also provides the onSort event callback, which will be invoked on sorting a column. Refer to the event details section for more information.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.191.176.99