How to sort by date and time in data grid MUI X

Question

in MaterialUI X data grid i have a column of date in the format of DD/MM/YYYY HH:mm:ss and now (the defualt sort of the data grid) its sorting only by the date and the time of each day is messed up, wanted to know if there is a way to format so it will be date and time

picture of the column

the data grid tag

<DataGrid
         rows={rows}
         columns={columns}
         autoPageSize
         components={{
           LoadingOverlay: Loader,
           Toolbar: QuickSearchToolbar,
           }}
         loading={listLoading}
         initialState={{
            sorting: {
               sortModel: [{ field: "Date", sort: "asc" }],
            },
         }}/>

i tried to use the docs of the MUIX data grid with the sortComparator example but didnt work

Answer 1

By default MUI sort date like a string. You should first convert it to ISO string, sort it and then use valueFormatter in column definition to show the format that you want.