devaccel-data-grid
Version:
Dynamic table library.
61 lines • 3.37 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = require("react");
var react_2 = tslib_1.__importDefault(require("react"));
var DataRow_1 = tslib_1.__importDefault(require("./DataRow"));
var DataHeader_1 = tslib_1.__importDefault(require("./DataHeader"));
require("../styles/main.css");
var DataGrid = function (props) {
var lockedRef = (0, react_1.useRef)(null);
var unlockedRef = (0, react_1.useRef)(null);
(0, react_1.useEffect)(function () {
var lTable = lockedRef.current;
var ulTable = unlockedRef.current;
if (!lTable || !ulTable)
return;
var handleScroll = function (source, target) {
target.scrollTop = source.scrollTop;
};
lTable.addEventListener('scroll', function () { return handleScroll(lTable, ulTable); });
ulTable.addEventListener('scroll', function () { return handleScroll(ulTable, lTable); });
return function () {
lTable.removeEventListener('scroll', function () { return handleScroll(lTable, ulTable); });
ulTable.removeEventListener('scroll', function () { return handleScroll(ulTable, lTable); });
};
});
//todo extract colOptions to locked and unlocked
var renderContent = function (filter) {
return props.tableData.map(function (data) { return (react_2.default.createElement(DataRow_1.default, { key: data.id, data: data, columOptionsList: props.columnOptionsList.filter(filter) })); });
};
return (react_2.default.createElement("div", { className: 'grid-wrapper', style: {
width: '100%',
maxWidth: '90vw',
overflowX: 'hidden',
overflowY: 'hidden',
display: 'flex',
flexDirection: 'row',
maxHeight: '65vh',
} },
react_2.default.createElement("div", { className: 'locked-wrapper hidden-scroll', ref: lockedRef, style: {
width: 'auto',
maxWidth: '55vw',
display: 'flex',
flexDirection: 'column',
overflow: 'scroll',
} },
react_2.default.createElement(DataHeader_1.default, { stickyHeaders: props.stickyHeaders, columnOptionsList: props.columnOptionsList.filter(function (option) { return option.isLocked; }) }),
react_2.default.createElement("div", { className: 'grid-body', style: { display: 'flex', flexDirection: 'column' } }, renderContent(function (option) { return option.isLocked; }))),
react_2.default.createElement("div", { className: 'unlocked-wapper', ref: unlockedRef, style: {
width: '100%',
maxWidth: '90vw',
overflow: 'scroll',
display: 'flex',
flexDirection: 'column',
// maxHeight: '65vh',
} },
react_2.default.createElement(DataHeader_1.default, { stickyHeaders: props.stickyHeaders, columnOptionsList: props.columnOptionsList.filter(function (option) { return !option.isLocked; }) }),
react_2.default.createElement("div", { className: 'grid-body', style: { display: 'flex', flexDirection: 'column' } }, renderContent(function (option) { return !option.isLocked; })))));
};
exports.default = DataGrid;
//# sourceMappingURL=DataGrid.js.map