Question 195287 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0 
     let d = new Date()
 let hours = d.getHours()
 let day = d.getDate()
 let month = d.getMonth()
 let year = d.getFullYear()
 let minutes = d.getMinutes()
 
     let data = (year + "/" + (month+1) + "/" + day + " " +      (hours - 12) + "  "+" : " + minutes )
 console.log (data)

  const rows= [ { id: 5, col1: "Joy UI", col2: data},];
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search