Smart Table external sort not working with object fields

[UltraWelfare]

Operating System: Windows 11 - 23H2 (22631.4169) Browser: Firefox (131.0) and Chrome (129.0.6668.101)

I have a smart-table component in my page which I need to sort (externally). I've set the [columnSorter]="{ external: true }" on the table as well as the [sorterValue] and the (sorterValueChange) to change my query params and refetch the data from the backend.

A specific field is a nested object therefore their key doesn't apply to the object. What I mean is

Structure of an order:

{
   "id": 1,
   "title": "Order 123",
   "customer": {
        "firstName": "...",
        "lastName": "..."
   }
}

The columns that I'm providing to smart table is as follows:

readonly columns: (string | IColumn)[] = [
    {
      key: 'id',
      label: 'ID',
    },
    {
      key: 'title',
      label: 'Title',
    },
    {
      key: 'customerTitle',
      label: 'Customer',
    },
]

In order to display this field I'm using an ng-template inside the smart table:

<ng-template cTemplateId="tableData" let-columnName="columnName" let-item="item" let-tdContent="tdContent">
            <td [cTableActive]="smartTable.getTableDataCellProps(item, columnName)?.['active']"
                [cTableColor]="smartTable.getTableDataCellProps(item, columnName)?.['color']"
                [cAlign]="smartTable.getTableDataCellProps(item, columnName)?.['align']"
                [ngClass]="smartTable.getTableDataCellClass(item, columnName)"
            >
              @switch (columnName) {
                @case ('customerTitle') {
                  {{ item.customer.firstName }} {{ item.customer.lastName }}
                }

However, while the sorting is clickable and changes state when you click the ID and Title columns it doesn't do anything when clicking the Customer column; it doesn't fire the sorterValueChange event, nor does it change visually (the arrows icon next to the title).

I assume there's a condition somewhere inside the smart table column sort click that checks whether this field exists on the objects which makes sense if the sorting was being done automatically. But since I'm making an external sorting, I'd expect for this to work...

Or maybe there's something else different going on that I can't figure out? 🤔

[xidedix]

External sort does not work for derived columns at the moment.
We are working on a patch to resolve this issue.

[UltraWelfare]

External sort does not work for derived columns at the moment. We are working on a patch to resolve this issue.

Glad to hear. For anyone else facing the same issue, a temporary but also a good fix is to flatten your data structure. You can make a secondary type like

type OrderTableItem = {
    id: number,
    title: string,
    customerTitle: string
}

and when you fetch your data, just map it for the purposes of the smart table

getOrders().pipe(
   map(apiItem => ({
        id: apiItem.id,
        title: apiItem.title,
        customerTitle: apiItem.customer.firstName + " " + apiItem.customer.lastName
   }))
).subscribe(...);

[xidedix]

@UltraWelfare fixed in 5.2.20