API Reference
Advanced Tutorials
Comparison
FAQ
Contributing
Testing
Migration Guide
Licence
This is documentation for Refine 3.xx.xx, which is no longer actively maintained.
For up-to-date documentation, see the latest version (4.xx.xx).
Version: 3.xx.xx
sort-live-preview
localhost:3000/products
Live previews only work with the latest documentation.
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>
</>
);
};