sort-live-preview

http://localhost:3000/products

import { useSelect } from "@refinedev/core";

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

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

    return (
        <>
            <label>
                Select a category:
                <select>
                    {options?.map((option) => (
                        <option key={option.value} value={option.value}>
                            {option.label}
                        </option>
                    ))}
                </select>
                <button
                    onClick={() => setOrder(order === "asc" ? "desc" : "asc")}
                >
                    Toggle
                </button>
            </label>
        </>
    );
};