sort-live-preview

import { useAutocomplete } from "@refinedev/mui";
import { Autocomplete, Button, TextField } from "@mui/material";

interface ICategory {
    id: number;
    title: string;
}

const PostCreate: React.FC = () => {
    const [order, setOrder] = React.useState<"asc" | "desc">("asc");
    const { autocompleteProps } = useAutocomplete<ICategory>({
        resource: "categories",
        sorters: [
            {
                field: "title",
                order,
            },
        ],
    });

    return (
        <>
            <Autocomplete
                {...autocompleteProps}
                getOptionLabel={(item) => item.title}
                isOptionEqualToValue={(option, value) =>
                    value === undefined || option?.id?.toString() === (value?.id ?? value)?.toString()
                }
                placeholder="Select a category"
                renderInput={(params) => (
                    <TextField
                        {...params}
                        label="Category"
                        margin="normal"
                        variant="outlined"
                        required
                    />
                )}
            />
            <Button
                onClick={() => setOrder(order === "asc" ? "desc" : "asc")}
                variant="contained"
                size="small"
            >
                Toggle Order
            </Button>
        </>
    );
};