opt-table
Version:
A Responsive and Customizable Rich Table
52 lines • 3.54 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const material_1 = require("@mui/material");
const icons_material_1 = require("@mui/icons-material");
const react_1 = __importDefault(require("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_1.default.createElement(material_1.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_1.default.createElement(material_1.Grid, { item: true, style: { fontFamily: "inherit" } },
react_1.default.createElement(material_1.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_1.default.createElement(material_1.Grid, { item: true, container: true, alignItems: "center", justifyContent: "center", style: { maxWidth: "fit-content", fontFamily: "inherit" } },
react_1.default.createElement(material_1.Typography, { style: { fontFamily: "inherit" }, variant: "subtitle2" }, "\u0646\u0645\u0627\u06CC\u0634"),
react_1.default.createElement(material_1.TextField, { select: true, value: search_data.perPage, variant: "outlined", size: "small", SelectProps: { IconComponent: icons_material_1.ExpandMore }, onChange: (e) => {
// Store.dispatch(searchPerPageChange(e.target.value));
data.onChangeRowsPerPage(e);
}, style: { margin: "0 10px" } }, search_data.rowsPerPageOptions.map((item, i) => (react_1.default.createElement(material_1.MenuItem, { key: i, value: item }, item)))),
react_1.default.createElement(material_1.Typography, { style: { fontFamily: "inherit" }, variant: "subtitle2" }, "\u0631\u062F\u06CC\u0641")),
react_1.default.createElement(material_1.Grid, { item: true, container: true, justifyContent: "flex-end", style: { maxWidth: "fit-content" } },
react_1.default.createElement(material_1.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));
} }))));
};
exports.default = CustomPagination;
//# sourceMappingURL=table_paginations.js.map