Skip to main content
Version: 3.xx.xx

pagination-live-preview

http://localhost:3000/products
import { useState } from "react";
import { useList, HttpError } from "@pankod/refine-core";

interface IProduct {
id: number;
name: string;
material: string;
}

const ProductList: React.FC = () => {
const [current, setCurrent] = useState(1);
const [pageSize, setPageSize] = useState(5);

const { data, isLoading, isError } = useList<IProduct, HttpError>({
resource: "products",
config: {
pagination: {
current,
pageSize,
},
},
});

const products = data?.data ?? [];

if (isLoading) {
return <div>Loading...</div>;
}

if (isError) {
return <div>Something went wrong!</div>;
}

return (
<div>
<button onClick={() => setCurrent((prev) => prev - 1)}>
{"<"}
</button>
<span> page: {current} </span>
<button onClick={() => setCurrent((prev) => prev + 1)}>
{">"}
</button>
<span> per page: </span>
<select
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
>
{[5, 10, 20].map((size) => (
<option key={size} value={size}>
{size}
</option>
))}
</select>

<ul>
{products.map((product) => (
<li key={product.id}>
<h4>
{product.name} - ({product.material})
</h4>
</li>
))}
</ul>
</div>
);
};