Search code examples
reactjssortingdatagridmaterial-ui

Material-UI DataGrid not sorting numeric column correctly

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:

Descending Order

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>
Solution

  • 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.