CODEWITHSUNDEEP
reactjssortingdateecmascript-6mui-datatable
Noob
Noob

Reputation: 55

MUI-DataTables does not sort my formatted date

I have a data set recieved as response from a API call in which I have the dates in the format of "2020-06-10" which is (YYYY-MM-DD), but I need this to be displayed as "10 June 2020" for which I am using a utility as:

const SPACED_DATE_FORMAT = "DD MMM YYYY";

export const getHyphenatedDate = (dateString) =>
  moment(dateString, "YYYY-MM-DD").format(SPACED_DATE_FORMAT);

But now when I pass this data to MUI Datatable implementation and the sort does not work as expected (neither in asc nor in desc), it just get shuffled randomly.

Please suggest how can I achieve both points of display the expected format and the correct sorting on top of it.

Library version used:

"moment": "2.24.0", "mui-datatables": "2.14.0", "react": "16.13.1", "react-dom": "16.10.2"

NOTE: If I do not format the dates, the sorting works fine.

Sandbox with replicated issues : https://codesandbox.io/s/objective-golick-8qvzf

Upvotes: 0

Views: 5515

Answers (2)

Farzeb Khan
Farzeb Khan

Reputation: 11

valueFormatter: params => params?.value ? moment(params?.value).format("DD MMM yyyy") :null

maybe help you can put this in your column's field

Upvotes: 1

Noob
Noob

Reputation: 55

I have solved thism by converting the gridData date value using toDate() and getTime() through momentand using customBodyRender on date objects in columns definition as

customBodyRender: value => moment(new Date(value)).format(SPACED_DATE_FORMAT)

Below Sandbox has the fix to it

https://codesandbox.io/s/hopeful-butterfly-isdjb?file=/src/App.js:2402-2497

Upvotes: 1

Related Questions