[data grid] sortComparator function signature is not available when using typescript

[ui-code]

Related page

https://mui.com/x/react-data-grid/

Kind of issue

Missing information

Issue description

I was trying to use custom sorting by using value of another column, like below:

import { GridColDef, GridValueFormatter, GridComparatorFn, GridCellParams } from "@mui/x-data-grid"

const columns: GridColDef<Location>[] = [
  {
    field: "siteNo",
    headerName: "Site No.",
    width: 100
  },
 {
    field: "totalArea",
    headerName: "Total Area (sqm)",
    width: 150
  },
  {
    field: "totalAreaSqFt", //this is a dummy field not availabe in datasource of the datagrid
    headerName: "Total Area (sqft)",
    width: 150,
    type: "number",
    sortComparator: numComparator,
    valueGetter: (_value: GridValueFormatter, row: Location) => `${Helper.formatNumberWithCommas(Helper.convertSqmToSqft(row.totalArea))}`, // colymn value is displayed using "totalArea" field from datasource
  }

const numComparator: GridComparatorFn<number> = (_v1: number, _v2: number, param1: GridCellParams, param2: GridCellParams) => {
  console.log(param1) // has properties of api, field, id, rowNode, value
  console.log(param2) // has properties of api, field, id, rowNode, value

  const v1: number = param1.api.getRow(param1["id"])["totalArea"]
  const v2: number = param2.api.getRow(param2["id"])["totalArea"]
  return v1 - v2

}

Above code works fine, when i am running in development mode (ie., by running vite). Howvever, when I am building for deployment (tsc && vite build), I get this error:

src/containers/SitesTable/SitesTable.tsx(32,7): error TS2322: Type '(_v1: number, _v2: number, param1: GridCellParams, param2: GridCellParams) => number' is not assignable to type 'GridComparatorFn<number>'.
frontend-1  |   Types of parameters 'param1' and 'cellParams1' are incompatible.
frontend-1  |     Type 'GridSortCellParams<number>' is missing the following properties from type 'GridCellParams<any, unknown, unknown, GridTreeNode>': row, colDef, cellMode, hasFocus, tabIndex
frontend-1  | src/containers/SitesTable/SitesTable.tsx(36,29): error TS2339: Property 'api' does not exist on type 'GridCellParams<any, unknown, unknown, GridTreeNode>'.
frontend-1  | src/containers/SitesTable/SitesTable.tsx(37,29): error TS2339: Property 'api' does not exist on type 'GridCellParams<any, unknown, unknown, GridTreeNode>'.

After looking in more detail, I realised that GridCellParams doesn't have the properties that param1 has which are api, field, id, rowNode, value.

In documentation, I couldn't find information about the function signature for typescript usage with type to be used for param1 and param2 for using custom sortComparator in Datagrid component.

Context

No response

Search keywords: mui datagrid, sortComparator

[DanailH]

@ui-code thanks for raising this!

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷 . A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed.