Component: p-table- Incorrect sorting when a column data is a mix of string and number

rajeshmuthyala22 commented 3 months ago

Describe the bug

https://stackblitz.com/edit/primeng-tablesort-demo-cyldwy?file=src%2Fapp%2Fapp.component.html

I wanted to sort nick name, but since the sorting order is incorrect, I had to implement multiple sort mode. Now the problem is when user tries to sort nick name column manually, we are back to same problem. How do we retain the multiple sort?

HTML

<div class="card">
  <p-table
    [value]="products2"
    sortMode="multiple"   
    [multiSortMeta]="[
      { field: 'category', order: 1 },
      { field: 'quantity', order: 1 },
      { field: 'rating', order: 1 }
    ]"
  >
    <ng-template pTemplate="header">
      <tr>
        <th pSortableColumn="nickName">
          Nick Name <p-sortIcon field="nickName"></p-sortIcon>
        </th>

        <th pSortableColumn="name">
          Name <p-sortIcon field="name"></p-sortIcon>
        </th>
        <th pSortableColumn="category">
          Category <p-sortIcon field="category"></p-sortIcon>
        </th>

        <th pSortableColumn="quantity">
          Quantity <p-sortIcon field="quantity"></p-sortIcon>
        </th>
        <th pSortableColumn="rating">
          Rating <p-sortIcon field="rating"></p-sortIcon>
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product>
      <tr>
        <td>{{ product.nickName }}</td>

        <td>{{ product.name }}</td>
        <td>{{ product.category }}</td>

        <td>{{ product.quantity }}</td>

        <td>{{ product.rating }}</td>
      </tr>
    </ng-template>
  </p-table>
</div>

products.json

{
  "data": [
    {
      "id": "1000",
      "code": "f230fh0g3",
      "name": "Bamboo Watch",
      "description": "Product Description",
      "image": "bamboo-watch.jpg",
      "price": 65,
      "category": "Accessories",
      "quantity": 24,
      "inventoryStatus": "INSTOCK",
      "rating": 5,
      "nickName": "Accessories | 24 | 5"
    },
    {
      "id": "1000",
      "code": "f230fh0g3",
      "name": "Bamboo Watch",
      "description": "Product Description",
      "image": "bamboo-watch.jpg",
      "price": 65,
      "category": "Accessories",
      "quantity": 2,
      "inventoryStatus": "INSTOCK",
      "rating": 5,
      "nickName": "Accessories | 2 | 5"
    },
    {
      "id": "1001",
      "code": "nvklal433",
      "name": "Black Watch",
      "description": "Product Description",
      "image": "black-watch.jpg",
      "price": 72,
      "category": "Accessories",
      "quantity": 2,
      "inventoryStatus": "INSTOCK",
      "rating": 4,
      "nickName": "Accessories | 2 | 4"
    },
    {
      "id": "1001",
      "code": "nvklal433",
      "name": "Black Watch",
      "description": "Product Description",
      "image": "black-watch.jpg",
      "price": 72,
      "category": "Accessories",
      "quantity": 6,
      "inventoryStatus": "INSTOCK",
      "rating": 4,
      "nickName": "Accessories | 6 | 5"
    },
    {
      "id": "1002",
      "code": "zz21cz3c1",
      "name": "Blue Band",
      "description": "Product Description",
      "image": "blue-band.jpg",
      "price": 79,
      "category": "Fitness",
      "quantity": 2,
      "inventoryStatus": "LOWSTOCK",
      "rating": 3,
      "nickName": "Fitness | 2 | 3"
    },
    {
      "id": "1003",
      "code": "244wgerg2",
      "name": "Blue T-Shirt",
      "description": "Product Description",
      "image": "blue-t-shirt.jpg",
      "price": 29,
      "category": "Clothing",
      "quantity": 25,
      "inventoryStatus": "INSTOCK",
      "rating": 5,
      "nickName": "Clothing| 25 | 5"
    },
    {
      "id": "1004",
      "code": "h456wer53",
      "name": "Bracelet",
      "description": "Product Description",
      "image": "bracelet.jpg",
      "price": 15,
      "category": "Accessories",
      "quantity": 73,
      "inventoryStatus": "INSTOCK",
      "rating": 4,
      "nickName": "Accessories | 73 | 4"
    }
  ]
}

On load sorting

After click on nick name column manually highlighted row is incorrectly sorted

Environment

Primeng- 11.0.0 Angular- 11.0.1

Provided stackbliz link

Reproducer

No response

Angular version

11.0.1

PrimeNG version

11.0.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

8.3.0

Browser(s)

Chrome 125.0.6422.141

Steps to reproduce the behavior

After default multi sort is loaded, click on nick name column. Sorting is lost

Expected behavior

Sorting order to be correct based on multiple sort

Sinan997 commented 3 months ago

It actually sorting correctly. It is sorting by string by default.

You can use custom sort function. https://primeng.org/table#api.table.props.customSort https://primeng.org/table#api.table.emitters.sortFunction

rajeshmuthyala22 commented 3 months ago

Thanks @Sinan997 for the response.

I'm new to this custom sorting. can you please provide some reference to suit my case where click of one column would sort based on multiple other columns

primefaces / primeng