Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-05 22:38:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Pagination component

Browse source
This commit is contained in:
navaneeth 2021-05-19 12:05:29 +05:30
parent d024f4f4e3
commit 542e706328
1 changed files with 39 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
frontend/src/_components/Pagination.jsx Normal file
View file

@ -0,0 +1,39 @@
import React, { useState, useEffect } from 'react';
export const Pagination = function Pagination({
currentPage, count, totalPages, pageChanged
}) {
function renderPageItem(i) {
return <li onClick={() => gotoPage(i + 1)} className={`page-item ${currentPage === i + 1 ? 'active' : ''}`}><a className="page-link">{i + 1}</a></li>
}
function gotoPage(page) {
pageChanged(page)
}
function gotoNextPage() {
gotoPage(currentPage + 1);
}
function gotoPreviousPage() {
gotoPage(currentPage - 1);
}
return (<div className="card-footer d-flex align-items-center">
<p className="m-0 text-muted">Showing <span>1</span> to <span>8</span> of <span>{count}</span> entries</p>
<ul className="pagination m-0 ms-auto">
<li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
<a style={{cursor: 'pointer'}} className="page-link" onClick={gotoPreviousPage}>
<svg xmlns="http://www.w3.org/2000/svg" className="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><polyline points="15 6 9 12 15 18"></polyline></svg>
</a>
</li>
{Array.from(Array(totalPages).keys()).map((i) => ( renderPageItem(i) ) )}
<li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
<a style={{cursor: 'pointer'}} className="page-link" onClick={gotoNextPage}>
<svg xmlns="http://www.w3.org/2000/svg" className="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><polyline points="9 6 15 12 9 18"></polyline></svg>
</a>
</li>
</ul>
</div>)
}