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>

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

documentation.

5 Replies

rival-black•2y ago

Hi @harisris, What is your request payload on network tab ? DataGrid code seems not have any issues. maybe you can check your data provider. this tutorial explains sorting and filtering https://refine.dev/docs/tutorial/understanding-dataprovider/create-dataprovider/#getlist

sunny-green•2y ago

the payload is empty

rival-black•2y ago

probably your data provider have missing implementations. you can follow the data provider tutorial I sent above 🙏

sunny-green•2y ago

i'll try I'm facing a problem. The pagiation return by the API work is an integer which give the number of the page (pages size are fix). So how and where can I implement the sorting with this API ? (here is my getList :

   getList: async ({
                        resource,
                        hasPagination = true,
                        pagination = {current: 1, pageSize: 30},
                        filters,
                        sort
                    }) => {
        const url = `${apiUrl}/${resource}`;

        const {current = 1} = pagination ?? {};

        const queryFilters = generateFilter(filters);

        const query: {page?: number} = hasPagination
            ? {
                page: current
            }
            : {};

        const {data} = await httpClient.get(
            `${url}?${stringify(query)}&${stringify(queryFilters)}`
        );

        const total = pageSize;

        return {
            data,
            total
        };
    },

   getList: async ({
                        resource,
                        hasPagination = true,
                        pagination = {current: 1, pageSize: 30},
                        filters,
                        sort
                    }) => {
        const url = `${apiUrl}/${resource}`;

        const {current = 1} = pagination ?? {};

        const queryFilters = generateFilter(filters);

        const query: {page?: number} = hasPagination
            ? {
                page: current
            }
            : {};

        const {data} = await httpClient.get(
            `${url}?${stringify(query)}&${stringify(queryFilters)}`
        );

        const total = pageSize;

        return {
            data,
            total
        };
    },

rival-black•2y ago

i added _sort field to your code from tutorial

getList: async ({
        resource,
        hasPagination = true,
        pagination = { current: 1, pageSize: 30 },
        filters,
        sort,
    }) => {
        const url = `${apiUrl}/${resource}`;

        const { current = 1 } = pagination ?? {};

        const queryFilters = generateFilter(filters);

        const query: { page?: number; _sort?: string } = hasPagination
            ? {
                  page: current,
              }
            : {};

        if (sort && sort.length > 0) {
            query._sort = sort[0].field;
        }

        const { data } = await httpClient.get(
            `${url}?${stringify(query)}&${stringify(queryFilters)}`,
        );

        const total = pageSize;

        return {
            data,
            total,
        };
    },

getList: async ({
        resource,
        hasPagination = true,
        pagination = { current: 1, pageSize: 30 },
        filters,
        sort,
    }) => {
        const url = `${apiUrl}/${resource}`;

        const { current = 1 } = pagination ?? {};

        const queryFilters = generateFilter(filters);

        const query: { page?: number; _sort?: string } = hasPagination
            ? {
                  page: current,
              }
            : {};

        if (sort && sort.length > 0) {
            query._sort = sort[0].field;
        }

        const { data } = await httpClient.get(
            `${url}?${stringify(query)}&${stringify(queryFilters)}`,
        );

        const total = pageSize;

        return {
            data,
            total,
        };
    },