DataGrid sorting not work

Hi! I would like to implement the sorting in my DataGrid and I did that :

 const {dataGridProps} = useDataGrid<IDomains>({
        initialSorter: [{field: "id", order: "desc"}]
    });


    const {
        paginationMode,
        onPageChange,
        pageSize,
        onPageSizeChange,
        sortingMode, 
        sortModel,
        onSortModelChange,
        ...restDataGridProps
    } = dataGridProps;
    return (
        <>
            <Header pageTitle={"ski_domains.ski_domains"} />
            <List
                title=""
                wrapperProps={{
                    sx: {
                        "-webkit-box-shadow": "none",
                        "-moz-box-shadow": "none",
                        "box-shadow": "none"
                    }
                }}>
                <DataGrid
                    {...restDataGridProps}
                    paginationMode="server"
                    onPageChange={onPageChange}
                    pageSize={30}
                    columns={columns}
                    autoHeight
                    sortingMode={sortingMode}
                    sortModel={sortModel}
                    onSortModelChange={onSortModelChange}
                />
            </List>

 const {dataGridProps} = useDataGrid<IDomains>({
        initialSorter: [{field: "id", order: "desc"}]
    });


    const {
        paginationMode,
        onPageChange,
        pageSize,
        onPageSizeChange,
        sortingMode, 
        sortModel,
        onSortModelChange,
        ...restDataGridProps
    } = dataGridProps;
    return (
        <>
            <Header pageTitle={"ski_domains.ski_domains"} />
            <List
                title=""
                wrapperProps={{
                    sx: {
                        "-webkit-box-shadow": "none",
                        "-moz-box-shadow": "none",
                        "box-shadow": "none"
                    }
                }}>
                <DataGrid
                    {...restDataGridProps}
                    paginationMode="server"
                    onPageChange={onPageChange}
                    pageSize={30}
                    columns={columns}
                    autoHeight
                    sortingMode={sortingMode}
                    sortModel={sortModel}
                    onSortModelChange={onSortModelChange}
                />
            </List>

 const {dataGridProps} = useDataGrid<IDomains>({
        initialSorter: [{field: "id", order: "desc"}]
    });


    const {
        paginationMode,
        onPageChange,
        pageSize,
        onPageSizeChange,
        sortingMode, 
        sortModel,
        onSortModelChange,
        ...restDataGridProps
    } = dataGridProps;
    return (
        <>
            <Header pageTitle={"ski_domains.ski_domains"} />
            <List
                title=""
                wrapperProps={{
                    sx: {
                        "-webkit-box-shadow": "none",
                        "-moz-box-shadow": "none",
                        "box-shadow": "none"
                    }
                }}>
                <DataGrid
                    {...restDataGridProps}
                    paginationMode="server"
                    onPageChange={onPageChange}
                    pageSize={30}
                    columns={columns}
                    autoHeight
                    sortingMode={sortingMode}
                    sortModel={sortModel}
                    onSortModelChange={onSortModelChange}
                />
            </List>

 const {dataGridProps} = useDataGrid<IDomains>({
        initialSorter: [{field: "id", order: "desc"}]
    });


    const {
        paginationMode,
        onPageChange,
        pageSize,
        onPageSizeChange,
        sortingMode, 
        sortModel,
        onSortModelChange,
        ...restDataGridProps
    } = dataGridProps;
    return (
        <>
            <Header pageTitle={"ski_domains.ski_domains"} />
            <List
                title=""
                wrapperProps={{
                    sx: {
                        "-webkit-box-shadow": "none",
                        "-moz-box-shadow": "none",
                        "box-shadow": "none"
                    }
                }}>
                <DataGrid
                    {...restDataGridProps}
                    paginationMode="server"
                    onPageChange={onPageChange}
                    pageSize={30}
                    columns={columns}
                    autoHeight
                    sortingMode={sortingMode}
                    sortModel={sortModel}
                    onSortModelChange={onSortModelChange}
                />
            </List>

It not work and i don't no what going wrong in my code (I followed this doc : https://refine.dev/docs/api-reference/mui/hooks/useDataGrid/#sorting)

useDataGrid | refine

By using useDataGrid, you are able to get properties that are compatible with MUI X

 component. All features such as sorting, filtering and pagination comes as out of box. For all the other features, you can refer to the MUI X

 component. All features such as sorting, filtering and pagination comes as out of box. For all the other features, you can refer to the MUI X

 component. All features such as sorting, filtering and pagination comes as out of box. For all the other features, you can refer to the MUI X

 component. All features such as sorting, filtering and pagination comes as out of box. For all the other features, you can refer to the MUI X

documentation.

DataGrid sorting not work

Similar Threads

Similar Threads

Similar Threads