Package

@carbon/react

Browser

Chrome

Package version

1.70.0

React version

18.3.1

Description

The TypeScript definition of sortRow for Datatable is wrong:

(
    cellA: DataTableCell<any>,
    cellB: DataTableCell<any>,
    sortRowOptions: {
      sortDirection: DataTableSortState;
      sortStates: Record<DataTableSortState, DataTableSortState>;
      locale: string;
    }
  ) => number

If you look at the call implementation here, you can find two issues:

1. cellA is not of type DataTableCell but is directly the value of the cell, same for cellB.
2. sortRowOptions is missing the key and compare properties, hence making it impossible to know in which column we are and choose the correct sorting strategy

As a work around we can of course force a cast such as:

sortRow={customSort as DataTableProps<Item, string[]>['sortRow']}

Then define the customSort with the real implementation signature:

const customSort = (
  cellA: any,
  cellB: any,
  {
    sortDirection,
    sortStates,
    locale,
    key,
    compare,
  }: {
    sortDirection: DataTableSortState;
    sortStates: Record<DataTableSortState, DataTableSortState>;
    locale: string;
    key: string;
    compare: (a: any, b: any, locale: string) => number;
  }
) => {
  return 0;
};

I created another sandbox with the workaround.

But that would be nice it the type was correct.

Reproduction/example

https://stackblitz.com/edit/github-lctgtu-4rv1zf?file=src%2FApp.tsx

Steps to reproduce

1. Open the sandbox
2. Wait for it to install dependencies and load
3. Open the developer tool of the browser, and switch to the console
4. Click on the Status header on the table to sort
5. Issue 1: You can see what cellA.value is undefined, and cellA is actually the value
6. Issue 2: try adding the key or compare property to the deconstructed 3rd argument { sortDirection, sortStates, locale }, and you will see the type script error:
   

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems