86 lines
2.7 KiB
JavaScript
86 lines
2.7 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
Select,
|
|
HStack,
|
|
Text,
|
|
Box,
|
|
IconButton,
|
|
Button,
|
|
useColorMode,
|
|
} from "@chakra-ui/react";
|
|
import { FaArrowLeftLong, FaArrowRightLong } from "react-icons/fa6";
|
|
import { TbChevronLeftPipe, TbChevronRightPipe } from "react-icons/tb";
|
|
import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
|
|
// import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
|
|
|
|
const Pagination = ({
|
|
pageSize,
|
|
setPageSize,
|
|
totalItems,
|
|
isLoading,
|
|
setCurrentPage,
|
|
currentPage,
|
|
}) => {
|
|
// const [] = useState(itemsPerPageOptions[0]);
|
|
const { colorMode, toggleColorMode } = useColorMode();
|
|
|
|
const totalPages = Math.ceil(totalItems / pageSize);
|
|
|
|
const handlePageSizeChange = (e) => {
|
|
setPageSize(Number(e.target.value));
|
|
setCurrentPage(1); // Reset to first page whenever page size changes
|
|
};
|
|
|
|
const paginationPrev = () => {
|
|
if (currentPage > 1) {
|
|
setCurrentPage(currentPage - 1);
|
|
}
|
|
};
|
|
|
|
const paginationNext = () => {
|
|
if (currentPage < totalPages) {
|
|
setCurrentPage(currentPage + 1);
|
|
}
|
|
};
|
|
|
|
const displayRange = {
|
|
start: (currentPage - 1) * pageSize + 1,
|
|
end: Math.min(currentPage * pageSize, totalItems),
|
|
};
|
|
|
|
return (
|
|
<HStack mt={14} display={"flex"} justifyContent={"end"}>
|
|
<Box className="ttttt" display={"flex"} fontSize={"sm"} alignItems={"center"} >
|
|
<Text>Rows per page :</Text>
|
|
<Select mx={4} width={"60px"} rounded="md" size="xs">
|
|
<option value="option1">10</option>
|
|
<option value="option2">20</option>
|
|
<option value="option3">30</option>
|
|
</Select>
|
|
<Text mx={5}>1-10 of 1024778</Text>
|
|
<Box display={"flex"} alignItems={"center"}>
|
|
<Button bg={"none"} p={0}
|
|
_hover={{backgroundColor:"none",border:"none"}}
|
|
_focus={{outline:"none",}} _active={{backgroundColor:"none",}}>
|
|
<TbChevronLeftPipe />
|
|
</Button>
|
|
<Button bg={"none"} p={0} _hover={{backgroundColor:"none",border:"none"}}
|
|
_focus={{outline:"none",}} _active={{backgroundColor:"none",}}>
|
|
<FiChevronLeft />
|
|
</Button>
|
|
<Button bg={"none"} p={0} _hover={{backgroundColor:"none",border:"none"}}
|
|
_focus={{outline:"none",}} _active={{backgroundColor:"none",}}>
|
|
<FiChevronRight />
|
|
</Button>
|
|
<Button bg={"none"} p={0} _hover={{backgroundColor:"none",border:"none"}}
|
|
_focus={{outline:"none",}} _active={{backgroundColor:"none",}}>
|
|
<TbChevronRightPipe />
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</HStack>
|
|
);
|
|
};
|
|
|
|
export default Pagination;
|