使用 MUI DataGrid 对行数据进行排序以进行 CSV 或 Excel 导出

Question

如何使用 MUI DataGrid 对行数据进行排序以导出到 CSV 或 Excel？

下面是我的代码示例

toolbar

。

      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()}`
            }}
          />
        ),
        loadingOverlay: () => LoadingSkeleton(pageSize)
      }}

我已经尝试了 CSV 导出的不同选项，如 MUI DatGrid 站点中所述。

我认为使用

getRowsToExport

道具有助于实现结果。

Answer 1

我们可以使用

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',
            'notes',
            'authorizedby'
          ],
          fileName: `Partner_customer_Report_${new Date().getTime()}`,
          getRowsToExport: (params: GridCsvGetRowsToExportParams) => {
            let response = [] as GridRowId[];

            if (params.apiRef.current) {
              params.apiRef.current.setSortModel([{ field: 'referenceNumber', sort: 'asc' }]);
              response = params.apiRef.current.getSortedRowIds();
            }

            return response;
          }
        }}
      />
    ),
    loadingOverlay: () => LoadingSkeleton(pageSize)
  }}

说明： 我们可以首先按所需的列和顺序对行进行排序，然后将其传递给

setSortModel

函数对数据进行排序。之后，只需使用

getSortedRowIds

函数返回排序后的行 ID 列表，因为此道具应返回

GridRowId[]

的数据列表类型。

所以

getRowsToExport

应该如下所示。

  getRowsToExport: (params: GridCsvGetRowsToExportParams) => {
            let response = [] as GridRowId[];

            if (params.apiRef.current) {
              params.apiRef.current.setSortModel([{ field: 'referenceNumber', sort: 'asc' }]);
              response = params.apiRef.current.getSortedRowIds();
            }

            return response;
          }

希望对您有帮助，谢谢。