如何使用MUI DataGrid对导出CSV/Excel的行数据排序？

你提到的getRowsToExport属性确实可以实现导出前对行数据的排序，具体操作是在csvOptions（或excelOptions）中添加自定义函数，在函数内对要导出的行数据排序后返回即可。

具体修改步骤 #

1. 在csvOptions中新增getRowsToExport函数，通过参数params.api获取表格行数据；
2. 按需指定排序字段和顺序，对行数据进行排序；
3. 返回排序后的行数组。

如果需要同时对Excel导出生效，只需在excelOptions中复制相同的getRowsToExport配置。

修改后的完整代码示例 #

slots={{
  noRowsOverlay: NoDataComponent,
  noResultsOverlay: NoDataComponent,
  toolbar: (
    <GridToolbarExport
      sx={{
        borderRadius: 24
      }}
      variant='contained'
      size='medium'
      disabled={loading || clients.items?.length === 0}
      printOptions={{
        disableToolbarButton: true
      }}
      csvOptions={{
        allColumns: false,
        fields: [
          'createdDateTime',
          'partnerId',
          'company',
          'referenceNumber',
          'fullname',
          'status',
          'currencyType',
          'lastCreditMonitoringDate',
          'approvedLine',
          'availableLine',
          'utilisedLine',
          'nextRenewalDate',
          'creditlineStatus',
          'newShadowLimitDecision',
          'decision',
          // 'dateOfShadowLimitChange',
          'notes',
          'authorizedby'
        ],
        fileName: `Partner_customer_Report_${new Date().getTime()}`,
        // 添加排序逻辑
        getRowsToExport: (params) => {
          // 获取当前渲染的行数据，若要导出所有分页数据，改用params.api.getAllRows()
          const rowsToSort = [...params.api.getRenderedRows()];
          // 按createdDateTime字段降序排序，可按需替换字段或调整排序方向
          rowsToSort.sort((rowA, rowB) => {
            const dateA = new Date(rowA.createdDateTime);
            const dateB = new Date(rowB.createdDateTime);
            return dateB - dateA; // 降序，改为dateA - dateB则为升序
          });
          return rowsToSort;
        }
      }}
      // 若需要Excel导出也排序，添加以下配置
      excelOptions={{
        allColumns: false,
        fields: [
          'createdDateTime',
          'partnerId',
          'company',
          'referenceNumber',
          'fullname',
          'status',
          'currencyType',
          'lastCreditMonitoringDate',
          'approvedLine',
          'availableLine',
          'utilisedLine',
          'nextRenewalDate',
          'creditlineStatus',
          'newShadowLimitDecision',
          'decision',
          // 'dateOfShadowLimitChange',
          'notes',
          'authorizedby'
        ],
        fileName: `Partner_customer_Report_${new Date().getTime()}`,
        getRowsToExport: (params) => {
          const rowsToSort = [...params.api.getRenderedRows()];
          rowsToSort.sort((rowA, rowB) => {
            const dateA = new Date(rowA.createdDateTime);
            const dateB = new Date(rowB.createdDateTime);
            return dateB - dateA;
          });
          return rowsToSort;
        }
      }}
    />
  ),
  loadingOverlay: () => LoadingSkeleton(pageSize)
}}

注意事项 #

• 如果表格开启了分页，getRenderedRows()仅获取当前页的行数据；若要导出所有分页数据，请改用getAllRows()；
• 排序逻辑可灵活调整：字符串字段用rowA.company.localeCompare(rowB.company)，数字字段直接用数值相减即可。

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