How can i format the date data in MUI DataGrid from mongo format to moment.
Also I want to include an extra field with the edit icon which when clicked, would redirect to the edit page
Here's what i have.
const columns = [
{ field: 'createdAt', headerName: 'Join Date', width: 100 },
{ field: *****, headerName: 'Edit', width: 120 }
]
I get my output as 2022-04-03T09:24:40.199Z. I want to format it using moment.js. how can i achieve this?
Is there a way of including the edit icon and passing the id of the clicked item
Since the field contains the data from the database represented by a string. I have tried template literals. It didn't work as well.
Try adding valueFormatter property into createdAt field object as shown in the code below.
...
{
field: 'createdAt',
headerName: 'Join Date',
width: 100,
valueFormatter: params =>
moment(params?.value).format("DD/MM/YYYY hh:mm A"),
},
...
You can also find more about DataGrid cell customization in this document:
https://mui.com/x/react-data-grid/column-definition/#rendering-cells