opt-table
Version:
A Responsive and Customizable Rich Table
93 lines • 7.16 kB
JavaScript
import { Button, Grid, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, Typography, } from "@mui/material";
import React from "react";
import useTable from "./hook/useTable";
import TableLoading from "./table_loading";
import { AddNewRowComponent } from "./add_new_row_component";
import CustomPagination from "./table_pagination";
import OptTableRow from "./table_row";
const TableIndex = (props, ref) => {
var _a, _b, _c, _d;
const { handleRequestSort, order, visibleRows, orderBy, total_data, pagination_props, set_pagination_props, } = useTable({ props: Object.assign(Object.assign({}, props), { data: props.data }), ref: ref });
const { DetailsPanel } = props;
const addRowId = React.useId();
return (React.createElement(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.createElement(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.createElement(TableContainer, { style: { maxHeight: "100%", fontFamily: "inherit" } },
React.createElement(Table, { size: "small", stickyHeader: true, sx: { fontFamily: "inherit" } },
React.createElement(TableHead, null,
React.createElement(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.createElement(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.createElement(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.createElement(Typography, { style: { fontFamily: "inherit" }, variant: "body1" }, header === null || header === void 0 ? void 0 : header.title),
header.sortable === true ||
(header.sortable === undefined && (React.createElement(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.createElement(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.createElement(TableBody, { style: {
fontFamily: "inherit",
border: "unset",
} },
React.createElement(TableLoading, { loading: props.loading }),
React.createElement(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.createElement(OptTableRow, { 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.createElement(CustomPagination, { 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.forwardRef(TableIndex);
export default CustomTable;
//# sourceMappingURL=table_index.js.map