Material-UI DataGrid not sorting numeric column correctly

Question

I am currently working on DataGrid Component from Material-UI. Data can be displayed, but the inbuilt sorting is not working as expected. When I try to sort ASC/DESC it is sorting based on the first digit of the number. Please look into the picture below:

I have tried the same with fake API in CodeSandbox. It is working fine but in my application the sorting is acting different.

Then I have tried to add sortModel (followed Material-UI Sorting docs) still it is acting the same. I haven't been able to find a solution in the docs.

const sortModel = [{ field: "canaryDeviceId", sort: "asc" }];

<div style={{ height: "90%", width: "100%" }}>
  <DataGrid sortModel={sortModel} rows={rows} columns={columns} />
</div>

Answer 1

I think DataGrid columns by default use string comparator, if you want to sort numeric column, try setting the type to 'number':

{
  field: "deviceID",
  headerName: "Canary DeviceID",
  type: "number",
},

Then I have tried to add sortModel (followed Material-UI Sorting docs) still it is acting the same.

sortModel only describes the sorting state of DataGrid so I doubt it will solve your problem.

Answer 2

sortComparator: (v1, v2) => parseInt(v1) - parseInt(v2),

work for me