myprojectpackageprav
Version:
My package in npm
155 lines • 7.46 kB
JavaScript
import { __extends } from "tslib";
import React from 'react';
import './table.css';
import InputCheck from '../../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.createElement(React.Fragment, null,
React.createElement("tr", null,
React.createElement("th", null,
React.createElement(InputCheck, { inputProps: {
id: props.employee.key,
name: 'Input Check',
type: 'checkbox',
label: props.employee.column1,
}, formClassName: 'form-horizontal font-0' })),
React.createElement("th", { tabIndex: 0, "aria-label": props.employee.column1 },
React.createElement("a", { href: "#/detail-view", className: 'links', title: props.employee.discription }, props.employee.column1)),
React.createElement("td", { tabIndex: 0, "aria-label": props.employee.column2 }, props.employee.column2),
React.createElement("td", { tabIndex: 0, "aria-label": props.employee.column3 }, props.employee.column3),
React.createElement("td", { tabIndex: 0, "aria-label": props.employee.column4 }, props.employee.column4),
React.createElement("td", { tabIndex: 0, "aria-label": props.employee.column5 }, props.employee.column5),
React.createElement("td", { tabIndex: 0, "aria-label": props.employee.column6 }, props.employee.column6),
React.createElement("td", { tabIndex: 0, "aria-label": props.employee.column7 }, props.employee.column7),
React.createElement("td", { tabIndex: 0, "aria-label": props.employee.column8 }, props.employee.column8),
React.createElement("td", { tabIndex: 0, "aria-label": props.employee.column9 }, props.employee.column9),
React.createElement("td", { tabIndex: 0, "aria-label": props.employee.column10 }, props.employee.column10),
React.createElement("td", { tabIndex: 0, "aria-label": props.employee.column11 }, props.employee.column11),
React.createElement("th", { "status-kpis": props.employee.colorcode, tabIndex: 0, "aria-label": props.employee.column12 }, props.employee.status)),
React.createElement("tr", null,
React.createElement("td", null),
React.createElement("th", { colSpan: 12 },
" ",
React.createElement("a", { href: "#/detail-view", className: 'links', title: props.employee.discription }, props.employee.discription)))));
}
var Table = /** @class */ (function (_super) {
__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 = [];
Employees.forEach(function (emp) {
rows.push(React.createElement(Row, { employee: emp }));
});
return (React.createElement("div", { className: 'w-100 overflow-auto' },
React.createElement("table", { className: "table-borderless table-dis w-100 sticky-top second-column last-column" },
React.createElement("thead", null,
React.createElement("tr", null,
React.createElement("th", null,
React.createElement(InputCheck, { inputProps: {
id: 'all',
name: 'Input Check',
type: 'checkbox',
label: 'All',
}, formClassName: 'form-horizontal font-0' })),
React.createElement("th", { tabIndex: 0, "aria-label": "Heading1" }, "Heading 1"),
React.createElement("th", { tabIndex: 0, "aria-label": "Heading2" }, "Heading 2"),
React.createElement("th", { tabIndex: 0, "aria-label": "Heading3" }, "Heading 3"),
React.createElement("th", { tabIndex: 0, "aria-label": "Heading4" }, "Heading 4"),
React.createElement("th", { tabIndex: 0, "aria-label": "Heading5" }, "Heading 5"),
React.createElement("th", { tabIndex: 0, "aria-label": "Heading6" }, "Heading 6"),
React.createElement("th", { tabIndex: 0, "aria-label": "Heading7" }, "Heading 7"),
React.createElement("th", { tabIndex: 0, "aria-label": "Heading8" }, "Heading 8"),
React.createElement("th", { tabIndex: 0, "aria-label": "Heading9" }, "Heading 9"),
React.createElement("th", { tabIndex: 0, "aria-label": "Heading10" }, "Heading 10"),
React.createElement("th", { tabIndex: 0, "aria-label": "Heading11" }, "Heading 11"),
React.createElement("th", { tabIndex: 0, "aria-label": "Heading12" }, "Heading 12"))),
React.createElement("tbody", null, rows))));
};
return Table;
}(React.Component));
export { Table };
//# sourceMappingURL=table.js.map