It appears that the current behavior (refer to this PR https://github.com/mui/mui-x/pull/7125/files) is intentional, but it has complicated my understanding and logic.
When I use handleSortModelChange, it updates my state and triggers a function reloadData to fetch updated data from the backend. This process involves sorting all data in the table, not just the displayed 20 results, which poses challenges with large datasets exceeding 50k records.
The issue arises when attempting to cycle through sort options. While ascending and descending sorts work fine, selecting the third option (unsort) causes the component to return an empty array, resulting in page breakage. The problematic code snippet for handling sort changes is provided below:
const [sortModel, setSortModel] = useState<GridSortModel>([
{
field: "review_date",
sort: "desc",
},
]);
const handleSortModelChange = (model: GridSortModel) => {
if (JSON.stringify(model) !== JSON.stringify(sortModel)) {
setSortModel(model);
reloadData(0, model[0].field, model[0].sort, searchValue);
}
};
The problem becomes evident when the model array is empty, leading to undefined values for model[0].field, model[0].sort.
An attempt was made to address this by checking for an empty array and passing null values while ensuring an object remains in the array:
const handleSortModelChange = (model: GridSortModel) => {
if (JSON.stringify(model) !== JSON.stringify(sortModel)) {
if (model.length <= 0) {
setSortModel([
{
field: sortModel[0].field,
sort: null,
},
]);
reloadData(0, null, null, searchValue);
} else {
setSortModel(model);
reloadData(0, model[0].field, model[0].sort, searchValue);
}
}
};
Although this prevents page crashes on unsorting, the actual unsorting functionality is lost.
Has anyone experienced a similar issue before? It seems likely that the way reloadData functions may be flawed, or perhaps the requirement for DataGrid to expect either an array item or null for sorting behavior is unusual.