opt-table
Version:
A Responsive and Customizable Rich Table
161 lines • 6.87 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Table = void 0;
const react_1 = __importDefault(require("react"));
const components_1 = require("../components");
const test_details_panel_1 = __importDefault(require("../components/table/test_details_panel"));
const test_2_details_panel_1 = __importDefault(require("../components/table/test_2_details_panel"));
const material_1 = require("@mui/material");
const icons_material_1 = require("@mui/icons-material");
const Table = ({ data = args.data }) => {
const ref = react_1.default.useRef(null);
let [rows, set_rows] = react_1.default.useState([]);
react_1.default.useEffect(() => {
if (Array.isArray(args.data)) {
set_rows(fakedata);
}
}, []);
const [loading, set_lodaing] = react_1.default.useState(false);
const loadder = (val) => {
set_lodaing(val);
};
return (react_1.default.createElement("div", { style: { width: "100%", height: 500 } },
react_1.default.createElement(material_1.IconButton, { onClick: () => {
var _a, _b;
(_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.addNewRow) === null || _b === void 0 ? void 0 : _b.call(_a);
} },
react_1.default.createElement(icons_material_1.Add, null)),
react_1.default.createElement(material_1.IconButton, { onClick: () => {
var _a, _b;
(_b = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.changeDetailPanelState) === null || _b === void 0 ? void 0 : _b.call(_a, {
index: 1,
table_key: "name",
});
} },
react_1.default.createElement(icons_material_1.ChangeCircle, null)),
react_1.default.createElement(components_1.OptTable, { data: rows, DetailsPanel: args.DetailsPanel, table_head_list: args.table_head_list, default_sort: "test", ref: ref, loading: loading, options: {
action_cell_title: "",
modal_no_title: "asdas",
edit_row: true,
delete_modal_title: react_1.default.createElement("h3", null, "\u0622\u06CC\u0627 \u0627\u0632 \u062D\u0630\u0641 \u0645\u0637\u0645\u0639\u0645\u0646 \u0647\u0633\u062A\u06CC\u062F \u061F"),
deleteDataHandler: (data) => {
return fake({ set_loading: loadder })
.then((res) => {
set_rows((pre) => pre.filter((item) => item.id !== data.id));
return true;
})
.catch((e) => {
throw new Error(`${e}`);
});
},
newDataHandler: (result) => {
return fake({ set_loading: loadder });
},
editDataHandler: (result) => {
return fake({ set_loading: loadder });
},
} })));
};
exports.Table = Table;
let args = {
data: [],
default_sort: "test",
// options: {
// edit_row: true,
// editDataHandler: async (data) => {
// try {
// await fake({ set_loading: loadder });
// } catch (error) {}
// },
// },
DetailsPanel: [
{ table_key: "action_cell", Component: test_details_panel_1.default },
{ table_key: "name", Component: test_2_details_panel_1.default },
// ,{table_key:"action_cell",Component:TestDetailsPanels}
],
table_head_list: [
// {
// title: "id",
// table_key: "id",
// align: "left",
// editable: false,
// },
{
title: "test",
table_key: "test",
has_details_penel: true,
input_type: "price",
align: "left",
editable: true,
},
{
title: "Name",
table_key: "name",
has_details_penel: true,
align: "center",
editable: true,
},
],
};
let fakedata = [
{ test: 1, name: new Date().getUTCMilliseconds(), id: 1 },
{ test: 1, name: "Amin", id: 2 },
{ test: 3, name: "Amin", id: 3 },
{ test: 5, name: "Amin", id: 4 },
{ test: 2, name: "Amin", id: 5 },
{ test: 1, name: "Amin", id: 6 },
{ test: 1, name: "Amin", id: 7 },
{ test: 1, name: "Amin", id: 8 },
{ test: 1, name: "Amin", id: 9 },
{ test: 1, name: "Amin", id: 10 },
{ test: 1, name: "Amin", id: 11 },
{ test: 1, name: "Amin", id: 12 },
{ test: 1, name: "Amin", id: 13 },
{ test: 1, name: "Amin", id: 14 },
{ test: 1, name: "Amin", id: 15 },
{ test: 1, name: "Amin", id: 16 },
{ test: 1, name: "Amin", id: 17 },
{ test: 1, name: "Amin", id: 18 },
{ test: 1, name: "Amin", id: 19 },
{ test: 1, name: "Amin", id: 20 },
{ test: 1, name: "Amin", id: 21 },
{ test: 1, name: "Amin", id: 22 },
{ test: 1, name: "Amin", id: 23 },
{ test: 1, name: "Amin", id: 24 },
{ test: 1, name: "Amin", id: "25" },
{ test: 1, name: "Amin", id: "26" },
{ test: 1, name: "Amin", id: 27 },
];
const fake = ({ set_loading, }) => __awaiter(void 0, void 0, void 0, function* () {
try {
set_loading(true);
// const t = await fetch("http://localhost:4000/category/get_category_list");
yield new Promise((res, rej) => {
setTimeout(() => {
res();
}, 2000);
});
// if (t.status !== 200) throw new Error(`Not done`);
return true;
// throw new Error("asasd")
}
catch (error) {
throw new Error(`${error}`);
}
finally {
set_loading(false);
}
});
//# sourceMappingURL=table_example.js.map