MUI DataGrid 中的日期格式

Question

我如何将 MUI DataGrid 中的日期数据从 mongo 格式格式化为 moment.

另外，我想包含一个带有编辑图标的额外字段，单击该图标时，会重定向到编辑页面

这就是我所拥有的。

 const columns = [

    { field: 'createdAt', headerName: 'Join Date', width: 100 },
    { field: *****, headerName: 'Edit', width: 120 }
]

我的输出为2022-04-03T09:24:40.199Z. 我想使用 moment.js 对其进行格式化。我怎样才能做到这一点？

有没有办法包含编辑图标并传递单击项目的 id

由于该字段包含由字符串表示的数据库中的数据。我尝试过模板文字。但效果并不好。

Answer 1

尝试将valueFormatter属性添加到createdAt字段对象中，如下面的代码所示。这应该可以解决你的问题。

const columns = [
   ...

   { 
     field: 'createdAt', 
     headerName: 'Join Date', 
     width: 100,
     valueFormatter: params => 
     moment(params?.value).format("DD/MM/YYYY hh:mm A"),
   },

   ...
]

您还可以在本文档中找到有关 DataGrid 单元格自定义的更多信息：

https://mui.com/x/react-data-grid/column-definition/#rendering-cells