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
sorting-live-preview
localhost:3000/products
Live previews only work with the latest documentation.
import { useState } from "react";
import { useList, HttpError } from "@pankod/refine-core";
interface IProduct {
id: number;
name: string;
material: string;
}
const ProductList: React.FC = () => {
const [order, setOrder] = useState<"asc" | "desc">("asc");
const { data, isLoading, isError } = useList<IProduct, HttpError>({
resource: "products",
config: {
sort: [
{
field: "name",
order,
},
],
},
});
const products = data?.data ?? [];
if (isLoading) {
return <div>Loading...</div>;
}
if (isError) {
return <div>Something went wrong!</div>;
}
return (
<div>
<button
onClick={() =>
setOrder((prev) => (prev === "asc" ? "desc" : "asc"))
}
>
toggle sort
</button>
<ul>
{products.map((product) => (
<li key={product.id}>
<h4>
{product.name} - ({product.material})
</h4>
</li>
))}
</ul>
</div>
);
};