<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Table With pagination</h2>
</div>
</div>
//Custom Table with pagination
import axios from 'axios';
import React, { useEffect, useState } from 'react'
const CustomTable = () => {
const [data, setData] = useState([]);
const [employeeInitialState, setEmployeeInitialState] = useState({
pageNumber: 1,
pageSize: 2,
totalItems: null,
filter: '',
});
const handleApi = async () => {
try {
const res = await axios.get(
`http://localhost:5900/getbooking2?pageNumber=${employeeInitialState.pageNumber}&pageSize=${employeeInitialState.pageSize}&filter=${employeeInitialState.filter}`
);
if (res.status === 200) {
setData(res.data.data.result);
setEmployeeInitialState((prevState) => ({
...prevState,
totalItems: res.data.data.count || 0,
}));
}
} catch (error) {
console.error("Error fetching data:", error);
}
};
const handlePageChange = (direction) => {
setEmployeeInitialState((prevState) => {
const newPageNumber =
direction === 'next'
? prevState.pageNumber + 1
: prevState.pageNumber - 1;
return { ...prevState, pageNumber: newPageNumber };
});
};
useEffect(() => {
handleApi();
}, [employeeInitialState.pageNumber, employeeInitialState.pageSize, employeeInitialState.filter]);
const totalPages = Math.ceil(employeeInitialState.totalItems / employeeInitialState.pageSize);
return (
<div>
<table border={1}>
<thead>
<tr>
<th>Sr</th>
<th>Name</th>
<th>Age</th>
<th>Number</th>
</tr>
</thead>
<tbody>
{data.length > 0 ? (
data.map((e, i) => (
<tr key={i}>
<td>{(employeeInitialState.pageNumber - 1) * employeeInitialState.pageSize + (i + 1)}</td>
<td>{e.name}</td>
<td>{e.age}</td>
<td>{e.number}</td>
</tr>
))
) : (
<tr>
<td colSpan="4">No Data</td>
</tr>
)}
</tbody>
</table>
<div>
<button
onClick={() => handlePageChange('previous')}
disabled={employeeInitialState.pageNumber === 1}
>
Previous
</button>
<span>
Page {employeeInitialState.pageNumber} of {totalPages || 1}
</span>
<button
onClick={() => handlePageChange('next')}
disabled={employeeInitialState.pageNumber === totalPages}
>
Next
</button>
</div>
</div>
);
};
export default CustomTable
// pagination with button number
import axios from 'axios';
import React, { useEffect, useState } from 'react';
const CustomTable = () => {
const [data, setData] = useState([]);
const [employeeInitialState, setEmployeeInitialState] = useState({
pageNumber: 1,
pageSize: 2,
totalItems: null,
filter: '',
});
const handleApi = async () => {
try {
const res = await axios.get(
`http://localhost:5900/getbooking2?pageNumber=${employeeInitialState.pageNumber}&pageSize=${employeeInitialState.pageSize}&filter=${employeeInitialState.filter}`
);
if (res.status === 200) {
setData(res.data.data.result);
setEmployeeInitialState((prevState) => ({
...prevState,
totalItems: res.data.data.count || 0,
}));
}
} catch (error) {
console.error("Error fetching data:", error);
}
};
const handlePageChange = (newPage) => {
setEmployeeInitialState((prevState) => ({
...prevState,
pageNumber: newPage,
}));
};
const totalPages = Math.ceil(employeeInitialState.totalItems / employeeInitialState.pageSize);
const renderPaginationButtons = () => {
const buttons = [];
const currentPage = employeeInitialState.pageNumber;
const startPage = Math.max(1, currentPage - 1); // Show two pages before the current
const endPage = Math.min(totalPages, currentPage + 1); // Show two pages after the current
// Add "First" button
if (startPage > 1) {
buttons.push(
<button key="first" onClick={() => handlePageChange(1)}>
First
</button>
);
}
// Add numbered buttons
for (let i = startPage; i <= endPage; i++) {
buttons.push(
<button
key={i}
onClick={() => handlePageChange(i)}
style={{
fontWeight: currentPage === i ? 'bold' : 'normal',
}}
>
{i}
</button>
);
}
// Add "Last" button
if (endPage < totalPages) {
buttons.push(
<button key="last" onClick={() => handlePageChange(totalPages)}>
Last
</button>
);
}
return buttons;
};
useEffect(() => {
handleApi();
}, [employeeInitialState.pageNumber, employeeInitialState.pageSize, employeeInitialState.filter]);
return (
<div>
<table border={1}>
<thead>
<tr>
<th>Sr</th>
<th>Name</th>
<th>Age</th>
<th>Number</th>
</tr>
</thead>
<tbody>
{data.length > 0 ? (
data.map((e, i) => (
<tr key={i}>
<td>{(employeeInitialState.pageNumber - 1) * employeeInitialState.pageSize + (i + 1)}</td>
<td>{e.name}</td>
<td>{e.userId}</td>
<td>{e.name}</td>
</tr>
))
) : (
<tr>
<td colSpan="4">No Data</td>
</tr>
)}
</tbody>
</table>
<div>
<button
onClick={() => handlePageChange(employeeInitialState.pageNumber - 1)}
disabled={employeeInitialState.pageNumber === 1}
>
Previous
</button>
{renderPaginationButtons()}
<button
onClick={() => handlePageChange(employeeInitialState.pageNumber + 1)}
disabled={employeeInitialState.pageNumber === totalPages}
>
Next
</button>
</div>
</div>
);
};
export default CustomTable;
//React Data Table component Npm
import axios from 'axios'
import React, { useEffect, useState } from 'react'
import DataTable from 'react-data-table-component'
const TablePagination = () => {
const [data, setData] = useState([]);
const [employeeInitialState, setEmployeeInitialState] = useState({
pageNumber: 1,
pageSize: 2,
totalItems: null,
filter: ''
})
const handleApi = async () => {
let res =await axios.get(`http://localhost:5900/getbooking2?pageNumber=${employeeInitialState.pageNumber}&pageSize=${employeeInitialState.pageSize}&filter=${employeeInitialState.filter}`)
if (res.status === 200) {
setData(res.data.data.result);
setEmployeeInitialState((prevState) => ({
...prevState,
totalItems: res.data.data.count || 0,
}));
}
}
const columns = [
{
name: 'Sr no.',
selector: (row, index) => index + 1,
},
{
name: 'Title',
selector: row => row.name,
},
{
name: 'Age',
selector: row => row.age,
},
{
name: 'Number',
selector: row => row.number,
},
];
const [loader, setLoader] = useState(false);
useEffect(() => {
handleApi()
}, [employeeInitialState.pageNumber, employeeInitialState.pageSize, employeeInitialState.filter])
return loader ? <div>Loading</div> : (
<>
<DataTable
columns={columns}
data={data}
paginationPerPage={employeeInitialState?.pageSize}
paginationDefaultPage={employeeInitialState?.pageNumber}
pagination
progressPending={loader}
paginationServer
paginationTotalRows={employeeInitialState.totalItems}
paginationRowsPerPageOptions={[1, 5, 10]}
onChangeRowsPerPage={(pageSize, pageNumber) => {
setEmployeeInitialState((prevState) => ({
...prevState,
pageSize,
pageNumber,
}));
}}
onChangePage={(pageNumber) => {
setEmployeeInitialState((prevState) => ({
...prevState,
pageNumber,
}));
}}
theme="solarized"
/>
</>
)
}
export default TablePagination
