opt-table
Version:
A Responsive and Customizable Rich Table
57 lines • 3.17 kB
JavaScript
import { Grid, MenuItem, TextField, Typography, Pagination, } from "@mui/material";
import { ExpandMore } from "@mui/icons-material";
import React from "react";
import { motion } from "framer-motion";
const CustomPagination = ({ data, search_data, }) => {
let start = search_data.perPage * search_data.page;
const checkLast = () => {
return data.count - start < search_data.perPage;
};
return (React.createElement(motion.div, { style: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "white",
alignSelf: "flex-end",
fontFamily: "inherit",
direction: "rtl",
// position: "absolute",
width: "100%",
height: "hit-content",
maxHeight: 72,
padding: "0px 8px"
} },
React.createElement("div", { style: { fontFamily: "inherit" } },
React.createElement("h5", { style: { fontFamily: "inherit" } },
"\u0646\u0645\u0627\u06CC\u0634 ",
search_data.page * search_data.perPage,
" \u0627\u0644\u06CC",
" ",
!checkLast()
? search_data.perPage + search_data.page * search_data.perPage
: data.count,
" ",
"\u0627\u0632 ",
data.count,
" \u0631\u06A9\u0648\u0631\u062F")),
React.createElement("div", { style: {
maxWidth: "fit-content",
fontFamily: "inherit",
display: "flex",
justifyContent: "center",
alignItems: "center",
} },
React.createElement("h5", { style: { fontFamily: "inherit" } }, "\u0646\u0645\u0627\u06CC\u0634"),
React.createElement(TextField, { select: true, value: search_data.perPage, variant: "outlined", size: "small", SelectProps: { IconComponent: ExpandMore }, onChange: (e) => {
// Store.dispatch(searchPerPageChange(e.target.value));
data.onChangeRowsPerPage(e);
}, style: { margin: "0 10px" } }, search_data.rowsPerPageOptions.map((item, i) => (React.createElement(MenuItem, { key: i, value: item }, item)))),
React.createElement(Typography, { style: { fontFamily: "inherit" }, variant: "subtitle2" }, "\u0631\u062F\u06CC\u0641")),
React.createElement(Grid, { item: true, container: true, justifyContent: "flex-end", style: { maxWidth: "fit-content" } },
React.createElement(Pagination, { style: { direction: "ltr", fontFamily: "inherit" }, size: "large", siblingCount: 0, count: Math.ceil(data.count / search_data.perPage), showFirstButton: true, showLastButton: true, variant: "outlined", page: search_data.page + 1, color: "primary", onChange: (e, page) => {
data.onChangePage(e, page - 1);
// Store.dispatch(searchPage(page - 1));
} }))));
};
export default CustomPagination;
//# sourceMappingURL=table_pagination.js.map