In Ant Design, you can use the pagination attribute of the Table component to paginate data.
And onChange (callback function that gets called when the page number or page size changes).
Here is an example of how to use the pagination attribute in a Table component:
import { Table } from "antd";
import { useState, useEffect } from "react";
import axios from "axios";
function App() {
const [dataSource, setDataSource] = useState([]);
const [totalPassengers, setTotalPassengers] = useState(1);
const [loading, setLoading] = useState(false);
useEffect(() => {
fetchRecords(1, 10);
}, []);
const columns = [
{
title: "ID",
dataIndex: "_id",
key: "_id",
},
{
title: "Name",
dataIndex: "name",
key: "name",
},
{
title: "Trips",
dataIndex: "trips",
key: "trips",
},
];
const fetchRecords = (page, pageSize) => {
setLoading(true);
axios
.get(`https://api.instantwebtools.net/v1/passenger?page=${page}&size=${pageSize}`)
.then((res) => {
setDataSource(res.data.data);
setTotalPassengers(res.data.totalPassengers);
setLoading(false);
});
};
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<Table
loading={loading}
columns={columns}
dataSource={dataSource}
pagination={{
total: totalPassengers,
onChange: (page, pageSize) => {
fetchRecords(page, pageSize);
},
}}
bordered
></Table>
</div>
);
}
export default App;
You can also use the pagination.total to set the total number of records
Codesandbox Example : https://codesandbox.io/s/tender-khorana-6oww0d
Top comments (0)