deep-jade
deep-jade17mo ago

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
fascinating-indigo
fascinating-indigo17mo 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
deep-jade
deep-jade17mo ago
the payload is empty
fascinating-indigo
fascinating-indigo17mo ago
probably your data provider have missing implementations. you can follow the data provider tutorial I sent above 🙏
deep-jade
deep-jade17mo 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
};
},
fascinating-indigo
fascinating-indigo17mo 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,
};
},