devaccel-data-grid
Version:
Dynamic table library.
58 lines • 3.03 kB
JavaScript
import { useEffect, useRef } from 'react';
import React from 'react';
import DataRow from './DataRow';
import DataHeader from './DataHeader';
import '../styles/main.css';
var DataGrid = function (props) {
var lockedRef = useRef(null);
var unlockedRef = useRef(null);
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.createElement(DataRow, { key: data.id, data: data, columOptionsList: props.columnOptionsList.filter(filter) })); });
};
return (React.createElement("div", { className: 'grid-wrapper', style: {
width: '100%',
maxWidth: '90vw',
overflowX: 'hidden',
overflowY: 'hidden',
display: 'flex',
flexDirection: 'row',
maxHeight: '65vh',
} },
React.createElement("div", { className: 'locked-wrapper hidden-scroll', ref: lockedRef, style: {
width: 'auto',
maxWidth: '55vw',
display: 'flex',
flexDirection: 'column',
overflow: 'scroll',
} },
React.createElement(DataHeader, { stickyHeaders: props.stickyHeaders, columnOptionsList: props.columnOptionsList.filter(function (option) { return option.isLocked; }) }),
React.createElement("div", { className: 'grid-body', style: { display: 'flex', flexDirection: 'column' } }, renderContent(function (option) { return option.isLocked; }))),
React.createElement("div", { className: 'unlocked-wapper', ref: unlockedRef, style: {
width: '100%',
maxWidth: '90vw',
overflow: 'scroll',
display: 'flex',
flexDirection: 'column',
// maxHeight: '65vh',
} },
React.createElement(DataHeader, { stickyHeaders: props.stickyHeaders, columnOptionsList: props.columnOptionsList.filter(function (option) { return !option.isLocked; }) }),
React.createElement("div", { className: 'grid-body', style: { display: 'flex', flexDirection: 'column' } }, renderContent(function (option) { return !option.isLocked; })))));
};
export default DataGrid;
//# sourceMappingURL=DataGrid.js.map