sort-live-preview

http://localhost:3000

import { useSelect } from "@refinedev/mantine";
import { Select, Button } from "@mantine/core";

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

const ProductCreate: React.FC = () => {
    const [order, setOrder] = React.useState<"asc" | "desc">("asc");

    const { selectProps } = useSelect<ICategory>({
        resource: "categories",
        sorters: [
            {
                field: "title",
                order,
            },
        ],
    });

    return (
        <>
            <Button onClick={() => setOrder(order === "asc" ? "desc" : "asc")}>
                Toggle Order
            </Button>
            <Select
                label="Category"
                placeholder="Select a category"
                withinPortal
                {...selectProps}
            />
        </>
    );
};