如何在MUI X Data Grid排序时让Total行不参与排序

方法1：拆分数据行和Total行，单独渲染 #

把Total行从数据源里单独拎出来，不让它进入DataGrid的rows数组，DataGrid只渲染普通数据行，Total行单独放在表格下方，这样排序完全不会影响它。

示例代码：

// 先拆分数据和Total行，假设你的Total行有个标识字段比如isTotal
const [dataRows, totalRow] = useMemo(() => {
  const total = dataSource.find(row => row.isTotal);
  const rows = dataSource.filter(row => !row.isTotal);
  return [rows, total];
}, [dataSource]);

// 渲染时分开处理
return (
  <div style={{border: '1px solid #eee'}}>
    <DataGrid
      rows={dataRows}
      columns={dataColumns}
      // 其他原有属性保持不变
    />
    {/* 自定义Total行，样式对齐DataGrid */}
    <div style={{display: 'flex', padding: '10px 16px', borderTop: '1px solid #eee', fontWeight: 'bold'}}>
      {dataColumns.map(col => (
        <div key={col.field} style={{width: col.width || '150px'}}>
          {col.field === 'Total' ? totalRow?.Total : 'Total'}
        </div>
      ))}
    </div>
  </div>
);

方法2：自定义排序比较器 #

给需要排序的列设置自定义排序逻辑，在比较时把Total行固定到最后（或你想要的位置）。

示例代码：

// 自定义排序函数，假设Total行的type字段为'total'
const sortWithoutTotal = (val1, val2, cellParams1, cellParams2) => {
  // 如果其中一行是Total，直接让它排后面
  if (cellParams1.row.type === 'total') return 1;
  if (cellParams2.row.type === 'total') return -1;
  // 正常排序逻辑，数字类型直接比较，字符串可以转成对应格式再比
  return val1 - val2;
};

// 在列配置里给需要排序的列加上这个比较器
const dataColumns = [
  // 其他列配置...
  {
    field: 'Total',
    sortable: true,
    sortingComparator: sortWithoutTotal,
  },
  // 其他需要排序的列也可以复用这个函数
];

// 正常渲染DataGrid即可
<DataGrid
  rows={dataSource}
  columns={dataColumns}
  // 原有属性不变
/>

方法3：用DataGrid Pro的Footer插槽（Pro版专属） #

如果用的是DataGrid Pro，可以直接用官方提供的footer插槽来渲染Total行，它会固定在表格底部，完全不受排序、分页影响：

<DataGridPro
  rows={dataSource.filter(row => row.type !== 'total')}
  columns={dataColumns}
  slots={{
    footer: () => (
      <div style={{padding: '10px 16px', fontWeight: 'bold', borderTop: '1px solid #eee'}}>
        {/* 对应列的Total内容，比如： */}
        <span style={{width: '150px', display: 'inline-block'}}>Total</span>
        <span style={{width: '150px', display: 'inline-block'}}>{totalRow?.Total}</span>
        {/* 其他列对应内容 */}
      </div>
    ),
  }}
/>

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