我做了什么：

• 在数据/后端响应中，返回数据网格已经理解的ISO时间戳（例如"2022 - 09 - 12T10：01：08 + 0200"）
• 只需改变时间戳显示给用户的方式。

这样，您需要做的调整是最小的（只是呈现代码）

const dateFormattingOptions: Intl.DateTimeFormatOptions = {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    };

    function renderDate(checkTimeAndDate: any) {
        if (!checkTimeAndDate) {
            return '';
        }
        return new Date(checkTimeAndDate).toLocaleDateString(
            'de-DE',
            dateFormattingOptions
        );
    }

const columns: GridColDef[] = [
        // ...
        {
            field: 'myTimeAndDateField',
            headerName: 'My Time and Date',
            width: 250,
            type: 'dateTime',
            renderCell: (params: GridRenderCellParams<MyDataTypeWithADateField>) =>
                renderDate(params.row.myTimeAndDateField)
        },
        // ...
    ];

return (<DataGrid
        rows={myData}
        columns={columns}
        // ...
    />);

测试：

test('the data table renders timestamps, formatted for Germany', async () => {
    // ...
    render(<MyComponent />);

    expect(findDataFieldValue('myTimeAndDateField')).toBe('12.09.2022, 10:01:08');
});

function findDataFieldValue(dataField: string): string | null | undefined {
    // material UI makes this into a div - I need to get conceptual table cell instead
    const element: HTMLElement | null = document.querySelector<HTMLElement>(
        "div[role='cell'][data-field='" + dataField + "']"
    );
    return element?.textContent;
}

试验数据：

export const testData: MyDataTypeWithADateField = {
    // ...
    myTimeAndDateField: '2022-09-12T10:01:08+0200',
    // ...
};

我确实解决了在服务器中对Datagrid的数据进行排序的问题，然后我使用sortComparator比较每个单元格的ID来缩短行。
排序顺序：[“描述”，“上升”]，
排序比较器：（v1，v2，参数1，参数2）=〉{
返回 param1.id-param2.id;
}
an example

可以像这样定义渲染列。

const columns = [
    {
        field: 'date', headerName: 'Date', flex: 1, headerClassName: 'data-grid-header', type: 'date',
        renderCell: (params) =>
            renderDate(params.row?.date)
    }
];

渲染函数与date-fns一起使用，以便转换为我需要的格式

//import
import {format} from 'date-fns'

    function renderDate(date) {
        if (!date) {
            return '';
        }
        return format(new Date(date), 'MM/dd/yyyy');
    }

然后使用sortModel进行日期字段排序

<DataGrid
            className={'data-grid-data-row'}
            sx={{fontSize: '12px'}}
            rows={data}
            autoHeight {...data}
            columns={columns}
            pageSize={pageSize}
            rowsPerPageOptions={[10, 25, 50]}
            onCellClick={(params) => onRowClick(params)}
            initialState={{
                sorting: {
                    sortModel: [{field: 'date', sort: 'desc'}],
                }
            }}/>

这段代码接受时间戳，然后根据我们在函数中定义的日期时间格式，按日期和呈现值对它们进行排序。