opt-table
Version:
A Responsive and Customizable Rich Table
47 lines • 3.1 kB
JavaScript
import { Grid, MenuItem, TextField, Typography, Pagination, } from "@mui/material";
import { ExpandMore } from "@mui/icons-material";
import React from "react";
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(Grid, { container: true, component: "td", justifyContent: "space-between", alignItems: "center", spacing: 2, style: {
margin: "auto",
backgroundColor: "white",
alignSelf: "flex-end",
fontFamily: "inherit",
direction: "rtl",
// position: "absolute",
width: "100%",
height: "hit-content",
maxHeight: 72,
} },
React.createElement(Grid, { item: true, style: { fontFamily: "inherit" } },
React.createElement(Typography, { variant: "subtitle2", 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(Grid, { item: true, container: true, alignItems: "center", justifyContent: "center", style: { maxWidth: "fit-content", fontFamily: "inherit" } },
React.createElement(Typography, { style: { fontFamily: "inherit" }, variant: "subtitle2" }, "\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_paginations.js.map