sort-live-preview

import { useSelect } from "@pankod/refine-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",
        sort: [
            {
                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>            
        </>
        
    );
};