myprojectpackageprav
Version:
My package in npm
158 lines • 8.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Table = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
require("./table.css");
var input_checkbox_1 = tslib_1.__importDefault(require("../../utils/controls/input-checkbox"));
var Employees = [
{
key: "column-id-1",
column1: 'column 1',
column2: 'column 2',
column3: 'column 3',
column4: 'column 4',
column5: 'column 5',
column6: 'column 6',
column7: 'column 7',
column8: 'column 8',
column9: 'column 9',
column10: 'column 10',
column11: 'column 11',
status: 'status 1',
discription: 'discription',
colorcode: '1'
},
{
key: "column-id-2",
column1: 'column 1',
column2: 'column 2',
column3: 'column 3',
column4: 'column 4',
column5: 'column 5',
column6: 'column 6',
column7: 'column 7',
column8: 'column 8',
column9: 'column 9',
column10: 'column 10',
column11: 'column 11',
status: 'status 2',
discription: 'discription',
colorcode: '2'
},
{
key: "column-id-3",
column1: 'column 1',
column2: 'column 2',
column3: 'column 3',
column4: 'column 4',
column5: 'column 5',
column6: 'column 6',
column7: 'column 7',
column8: 'column 8',
column9: 'column 9',
column10: 'column 10',
column11: 'column 11',
status: 'status 3',
discription: 'discription',
colorcode: '3'
}
];
function Row(props) {
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("tr", null,
react_1.default.createElement("th", null,
react_1.default.createElement(input_checkbox_1.default, { inputProps: {
id: props.employee.key,
name: 'Input Check',
type: 'checkbox',
label: props.employee.column1,
}, formClassName: 'form-horizontal font-0' })),
react_1.default.createElement("th", { tabIndex: 0, "aria-label": props.employee.column1 },
react_1.default.createElement("a", { href: "#/detail-view", className: 'links', title: props.employee.discription }, props.employee.column1)),
react_1.default.createElement("td", { tabIndex: 0, "aria-label": props.employee.column2 }, props.employee.column2),
react_1.default.createElement("td", { tabIndex: 0, "aria-label": props.employee.column3 }, props.employee.column3),
react_1.default.createElement("td", { tabIndex: 0, "aria-label": props.employee.column4 }, props.employee.column4),
react_1.default.createElement("td", { tabIndex: 0, "aria-label": props.employee.column5 }, props.employee.column5),
react_1.default.createElement("td", { tabIndex: 0, "aria-label": props.employee.column6 }, props.employee.column6),
react_1.default.createElement("td", { tabIndex: 0, "aria-label": props.employee.column7 }, props.employee.column7),
react_1.default.createElement("td", { tabIndex: 0, "aria-label": props.employee.column8 }, props.employee.column8),
react_1.default.createElement("td", { tabIndex: 0, "aria-label": props.employee.column9 }, props.employee.column9),
react_1.default.createElement("td", { tabIndex: 0, "aria-label": props.employee.column10 }, props.employee.column10),
react_1.default.createElement("td", { tabIndex: 0, "aria-label": props.employee.column11 }, props.employee.column11),
react_1.default.createElement("th", { "status-kpis": props.employee.colorcode, tabIndex: 0, "aria-label": props.employee.column12 }, props.employee.status)),
react_1.default.createElement("tr", null,
react_1.default.createElement("td", null),
react_1.default.createElement("th", { colSpan: 12 },
" ",
react_1.default.createElement("a", { href: "#/detail-view", className: 'links', title: props.employee.discription }, props.employee.discription)))));
}
var Table = /** @class */ (function (_super) {
tslib_1.__extends(Table, _super);
function Table(props) {
var _this = _super.call(this, props) || this;
_this.state = {
employees: Employees
};
_this.handleSelectChnage = _this.handleSelectChnage.bind(_this);
_this.handleInputChnage = _this.handleInputChnage.bind(_this);
return _this;
}
Table.prototype.handleSelectChnage = function (event) {
if (event.target.value == '') {
this.setState({
employees: Employees
});
}
else {
var searchData = Employees.filter(function (emp) {
return emp.department == event.target.value;
});
this.setState({
employees: searchData
});
}
};
Table.prototype.handleInputChnage = function (event) {
var searchText = event.target.value.toLowerCase();
var searchData = Employees.filter(function (emp) {
return emp.name.toLowerCase().indexOf(searchText) > -1;
});
this.setState({
employees: searchData
});
};
Table.prototype.render = function () {
var rows = [];
this.state.employees.forEach(function (emp) {
rows.push(react_1.default.createElement(Row, { employee: emp }));
});
return (react_1.default.createElement("div", { className: 'w-100 overflow-auto' },
react_1.default.createElement("table", { className: "table-borderless table-dis w-100 sticky-top second-column last-column" },
react_1.default.createElement("thead", null,
react_1.default.createElement("tr", null,
react_1.default.createElement("th", null,
react_1.default.createElement(input_checkbox_1.default, { inputProps: {
id: 'all',
name: 'Input Check',
type: 'checkbox',
label: 'All',
}, formClassName: 'form-horizontal font-0' })),
react_1.default.createElement("th", { tabIndex: 0, "aria-label": "Heading1" }, "Heading 1"),
react_1.default.createElement("th", { tabIndex: 0, "aria-label": "Heading2" }, "Heading 2"),
react_1.default.createElement("th", { tabIndex: 0, "aria-label": "Heading3" }, "Heading 3"),
react_1.default.createElement("th", { tabIndex: 0, "aria-label": "Heading4" }, "Heading 4"),
react_1.default.createElement("th", { tabIndex: 0, "aria-label": "Heading5" }, "Heading 5"),
react_1.default.createElement("th", { tabIndex: 0, "aria-label": "Heading6" }, "Heading 6"),
react_1.default.createElement("th", { tabIndex: 0, "aria-label": "Heading7" }, "Heading 7"),
react_1.default.createElement("th", { tabIndex: 0, "aria-label": "Heading8" }, "Heading 8"),
react_1.default.createElement("th", { tabIndex: 0, "aria-label": "Heading9" }, "Heading 9"),
react_1.default.createElement("th", { tabIndex: 0, "aria-label": "Heading10" }, "Heading 10"),
react_1.default.createElement("th", { tabIndex: 0, "aria-label": "Heading11" }, "Heading 11"),
react_1.default.createElement("th", { tabIndex: 0, "aria-label": "Heading12" }, "Heading 12"))),
react_1.default.createElement("tbody", null, rows))));
};
return Table;
}(react_1.default.Component));
exports.Table = Table;
//# sourceMappingURL=table.js.map