如何在MUI X Data Grid中按日期时间正确排序？

你的核心问题是Date列存储的是DD/MM/YYYY HH:mm:ss格式的字符串，DataGrid默认按字符串字典序排序，而非日期时间的实际先后顺序，导致每日内的时间排序混乱。以下是两种可靠的解决方法：

方法一：预处理行数据（推荐） #

将字符串格式的日期时间转换为JavaScript Date 对象，DataGrid会自动对Date类型做正确的时间排序，同时还能适配日期时间类型的过滤器和样式。

代码示例： #

// 处理原始行数据，把Date字段转成Date对象
const processedRows = rows.map(row => {
  const [datePart, timePart] = row.Date.split(' ');
  const [day, month, year] = datePart.split('/').map(Number);
  const [hour, minute, second] = timePart.split(':').map(Number);
  
  return {
    ...row,
    // 注意月份是0基（0=1月，11=12月）
    Date: new Date(year, month - 1, day, hour, minute, second)
  };
});

// 把处理后的行数据传给DataGrid
<DataGrid
  rows={processedRows}
  columns={columns}
  autoPageSize
  components={{
    LoadingOverlay: Loader,
    Toolbar: QuickSearchToolbar,
  }}
  loading={listLoading}
  initialState={{
    sorting: {
      sortModel: [{ field: "Date", sort: "asc" }],
    },
  }}
/>

列定义适配（可选） #

如果需要保持DD/MM/YYYY HH:mm:ss的显示格式，在列定义中添加valueFormatter：

const columns = [
  // 其他列配置...
  {
    field: 'Date',
    headerName: '日期时间',
    type: 'dateTime', // 标记为日期时间类型，优化交互
    valueFormatter: (params) => {
      const date = params.value;
      // 格式化Date对象为目标字符串格式
      return `${String(date.getDate()).padStart(2, '0')}/${String(date.getMonth() + 1).padStart(2, '0')}/${date.getFullYear()} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
    }
  }
];

方法二：配置列的sortComparator #

如果不想修改原始行数据，直接给Date列配置自定义排序比较器，在排序时将字符串转换为Date对象再比较。注意必须手动解析DD/MM/YYYY格式（直接用new Date(字符串)在部分浏览器会解析错误）。

代码示例： #

const columns = [
  // 其他列配置...
  {
    field: 'Date',
    headerName: '日期时间',
    // 自定义排序比较器
    sortComparator: (a, b) => {
      const parseDateTime = (str) => {
        const [datePart, timePart] = str.split(' ');
        const [day, month, year] = datePart.split('/').map(Number);
        const [hour, minute, second] = timePart.split(':').map(Number);
        return new Date(year, month - 1, day, hour, minute, second);
      };
      const dateA = parseDateTime(a);
      const dateB = parseDateTime(b);
      return dateA - dateB; // 升序排序，降序则返回dateB - dateA
    },
    type: 'dateTime' // 可选，优化列的交互体验
  }
];

// DataGrid组件代码保持原有写法即可
<DataGrid
  rows={rows}
  columns={columns}
  autoPageSize
  components={{
    LoadingOverlay: Loader,
    Toolbar: QuickSearchToolbar,
  }}
  loading={listLoading}
  initialState={{
    sorting: {
      sortModel: [{ field: "Date", sort: "asc" }],
    },
  }}
/>

内容的提问来源于stack exchange，提问作者Nadav Inbar