opt-table
Version:
A Responsive and Customizable Rich Table
98 lines • 7.8 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 react_1 = __importDefault(require("react"));
const useTable_1 = __importDefault(require("./hook/useTable"));
const table_loading_1 = __importDefault(require("./table_loading"));
const add_new_row_component_1 = require("./add_new_row_component");
const table_pagination_1 = __importDefault(require("./table_pagination"));
const table_row_1 = __importDefault(require("./table_row"));
const TableIndex = (props, ref) => {
var _a, _b, _c, _d;
const { handleRequestSort, order, visibleRows, orderBy, total_data, pagination_props, set_pagination_props, } = (0, useTable_1.default)({ props: Object.assign(Object.assign({}, props), { data: props.data }), ref: ref });
const { DetailsPanel } = props;
const addRowId = react_1.default.useId();
return (react_1.default.createElement(material_1.Grid, { style: Object.assign({ transition: "0.4s", height: "100%", fontFamily: "inherit", direction: (_a = props.options) === null || _a === void 0 ? void 0 : _a.direction }, props.container_style), container: true },
react_1.default.createElement(material_1.Grid, { item: true, container: true, xs: 12, style: {
maxHeight: `calc(100% - ${props.has_pagination ? 72 : 0}px)`,
transition: "0.4s",
fontFamily: "inherit",
// flex:1
} },
react_1.default.createElement(material_1.TableContainer, { style: { maxHeight: "100%", fontFamily: "inherit" } },
react_1.default.createElement(material_1.Table, { size: "small", stickyHeader: true, sx: { fontFamily: "inherit" } },
react_1.default.createElement(material_1.TableHead, null,
react_1.default.createElement(material_1.TableRow, null, (_b = props === null || props === void 0 ? void 0 : props.table_head_list) === null || _b === void 0 ? void 0 :
_b.map((header, i) => {
return (react_1.default.createElement(material_1.TableCell, { sx: {
padding: 0,
fontFamily: "inherit",
boxShadow: (t) => `0px 1px 0px ${t.palette.mode === "light"
? "#E8E8EF"
: t.palette.background.paper}`,
zIndex: props.table_zIndex,
}, style: Object.assign({ minWidth: header.width }, header.header_style), align: header.align, sortDirection: orderBy === header.table_key ? order : "asc", onClick: (e) => {
if (header.sortable === false)
return;
handleRequestSort(e, header.table_key);
}, key: i },
react_1.default.createElement(material_1.Button, { fullWidth: true, sx: {
color: "black",
padding: 1,
position: "relative",
display: "flex",
flexDirection: header.align === "right" ? "row-reverse" : "row",
justifyContent: header.align,
fontFamily: "inherit",
}, onClick: () => {
// setOrderBy(i.toString());
// setOrder(order === "asc" ? "desc" : "asc");
} },
react_1.default.createElement(material_1.Typography, { style: { fontFamily: "inherit" }, variant: "body1" }, header === null || header === void 0 ? void 0 : header.title),
header.sortable === true ||
(header.sortable === undefined && (react_1.default.createElement(material_1.TableSortLabel, { active: orderBy === header.table_key, direction: orderBy === header.table_key ? order : "desc" }))))));
}),
((DetailsPanel === null || DetailsPanel === void 0 ? void 0 : DetailsPanel.some((item) => item.table_key === "action_cell")) ||
((_c = props.options) === null || _c === void 0 ? void 0 : _c.edit_row)) && (react_1.default.createElement(material_1.TableCell, { sx: {
fontFamily: "inherit",
boxShadow: (t) => `0px 1px 0px ${t.palette.mode === "light"
? "#E8E8EF"
: t.palette.background.paper}`,
zIndex: props.table_zIndex,
// border: (t) => `1px solid ${t.palette.divider}`,
// backgroundImage:t=> `linear-gradient(0deg, ${t.palette.divider} 0%, transparent 100%)`
} }, ((_d = props.options) === null || _d === void 0 ? void 0 : _d.action_cell_title) === undefined
? "عملیات"
: props.options.action_cell_title)))),
react_1.default.createElement(material_1.TableBody, { style: {
fontFamily: "inherit",
border: "unset",
} },
react_1.default.createElement(table_loading_1.default, { loading: props.loading }),
react_1.default.createElement(add_new_row_component_1.AddNewRowComponent, { ref: ref, key: addRowId, list_for_edit: props.table_head_list, options: props.options }), visibleRows === null || visibleRows === void 0 ? void 0 :
visibleRows.map((row, i) => {
var _a;
return (react_1.default.createElement(table_row_1.default, { DetailPanels: DetailsPanel, has_edit_row: Boolean((_a = props.options) === null || _a === void 0 ? void 0 : _a.edit_row), options: props.options, row_data: row, table_head_list: props.table_head_list, key: `${i * (i + 1)}`, ref: ref }));
}))))),
props.has_pagination && (react_1.default.createElement(table_pagination_1.default, { data: {
count: total_data,
onChangePage(event, page) {
set_pagination_props((pre) => (Object.assign(Object.assign({}, pre), { page: page })));
},
onChangeRowsPerPage(event) {
set_pagination_props((pre) => (Object.assign(Object.assign({}, pre), { page: 0, perPage: Number(event.target.value) })));
},
}, search_data: {
page: pagination_props.page,
perPage: pagination_props.perPage,
rowsPerPageOptions: pagination_props.rowsPerPageOptions,
totalDocs: pagination_props.totalDocs,
totalIncome: pagination_props.totalIncome,
} }))));
};
const CustomTable = react_1.default.forwardRef(TableIndex);
exports.default = CustomTable;
//# sourceMappingURL=table_index.js.map