如何使MUI X DataGrid新增行显示在顶部？

你遇到的核心问题是：虽然尝试通过setRegions([newRow, ...regions])将新行添加到数组头部，但DataGrid的排序配置会覆盖数组的原始顺序，导致新行仍显示在末尾。以下是几种可行的解决方法：

方法1：禁用默认排序，保持数组原始顺序 #

直接在DataGrid组件中设置sortModel={[]}，让表格严格按照你传入的rows数组顺序渲染，此时数组头部的新行会直接显示在表格顶部：

// 新增行代码调整为头部添加
const handleAddRow = () => {
  const newRow = { id: uuidv4(), reg_name: "", reg_created: '' };
  setRegions([newRow, ...regions]); // 新行放在数组头部
};

// DataGrid组件配置
<DataGrid
  rows={regions}
  columns={columns}
  sortModel={[]} // 禁用排序，强制按数组顺序显示
  // 其他原有配置...
/>

方法2：调整排序规则，让新行自然置顶 #

如果需要保留表格的排序功能（比如按创建时间排序），可以给新行设置最新的时间戳，并将表格默认排序设为按创建时间降序：

// 新增行时设置当前时间
const handleAddRow = () => {
  const newRow = { 
    id: uuidv4(), 
    reg_name: "", 
    reg_created: new Date().toISOString() // 赋值当前时间
  };
  setRegions([newRow, ...regions]);
};

// DataGrid配置默认降序排序
<DataGrid
  rows={regions}
  columns={columns}
  initialState={{
    sorting: {
      sortModel: [{ field: 'reg_created', sort: 'desc' }],
    },
  }}
  // 其他原有配置...
/>

注意事项 #

• 检查是否有自定义的排序函数或rowOrder配置，这类设置也会影响行的显示顺序，需要同步调整。
• 如果你的表格是按id排序，由于uuid是随机生成的，无法保证新行id排在前面，建议优先使用前两种方法。

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