Material UI DataGrid 排序日期未按預期工作

Question

我正在使用 Material UI DataGrid，我的其中一列包含日期。 Material UI文檔說在列數組中將類型設置為“日期”，我已經這樣做了：

{
field: "submittedAt",
headerName: "Submitted",
minWidth: 150,
flex: 2,
type: "date",
headerClassName: "tableHeader",
cellClassName: "hoverPointer"
}

然后我使用 Luxon 將我的時間戳轉換為 MM/dd/yyyy 格式

if (r.data().submittedAt) {
      const d = DateTime.fromMillis(r.data().submittedAt.toMillis());
      requestedDate = d.toFormat('MM/dd/yyyy')
    }

然后使用requestedDate設置列中單元格的值。 當我對數據進行排序時，該列仍按字符串比較器而不是按日期排序：

我不確定我做錯了什么，而且我似乎無法在文檔或以前的帖子中找到太多支持。 我知道我可以將日期設置為 yyyy/MM/dd 以便字符串比較器工作，但我不希望出於可讀性目的呈現該格式。 我還需要該列可由用戶動態排序，因此服務器端排序也無濟於事。 在此先感謝您的幫助。

Answer 1

我做了什么：

• 在數據/后端響應中，返回 DataGrid 已經理解的 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',
    // ...
};

Answer 2

我確實解決了在服務器中排序 Datagrid 數據的問題，然后我用 sortComparator 比較每個單元格的 id 縮短了行。

排序順序：['desc', 'asc'],

sortComparator: (v1, v2, param1, param2) =>{

返回 param1.id - param2.id；

}

一個例子

Answer 3

您可以像這樣定義渲染列。

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

渲染 function 與 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'}],
                }
            }}/> 

此代碼段接受時間戳，然后根據我們在 function 中定義的日期時間格式按日期和渲染值對它們進行排序。