Skip to content

HeaderLabel Added #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
prabhuraj07 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

HeaderLabel Added #18

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
093c556
HeaderLabel Added
Aug 31, 2023
e87bffc
Changes for parallel scroll
Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 36 additions & 5 deletions src/ReactCohortGraph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,27 @@ class ReactCohortGraph extends React.Component {
this.state = {
dataStore: this._getStore(props),
currentType: "",
valueType: defaultValueType
valueType: defaultValueType,
scrollPosition: 0
};
}
handleScroll = (event) => {
// Get the current scroll position
const { scrollTop } = event.target;

// Update the scroll position state
this.setState({ scrollPosition: scrollTop });

// Set the scroll position for the other div (replace 'yourOtherDivId' with the actual ID)
const otherDiv = document.getElementById('table2');
const currentDiv = document.getElementById('table1')
if (otherDiv) {
otherDiv.scrollTop = scrollTop;
};
if (currentDiv) {
currentDiv.scrollTop = scrollTop;
}
}

_getStore = (props) => {
const { data = {},
Expand All @@ -53,7 +71,7 @@ class ReactCohortGraph extends React.Component {
currentType: currentType,
dataStore: store
});
}
};
}

componentWillReceiveProps(nextProps) {
Expand Down Expand Up @@ -86,8 +104,19 @@ class ReactCohortGraph extends React.Component {
}

componentDidMount(){

const divElement = document.getElementById('table1'); // Replace 'yourDivId' with the actual ID of your div
const divElement1 = document.getElementById('table2');
// Add scroll event listener to the div element when the component mounts
divElement.addEventListener('scroll', this.handleScroll);
divElement1.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
const divElement = document.getElementById('table1'); // Replace 'yourDivId' with the actual ID of your div
const divElement1 = document.getElementById('table2');
// Remove the event listener when the component unmounts
divElement.removeEventListener('scroll', this.handleScroll);
divElement1.removeEventListener('scroll', this.handleScroll);
}

isFixed = (index) => index < 2;

Expand Down Expand Up @@ -118,6 +147,7 @@ class ReactCohortGraph extends React.Component {
const WrapperStyles = wrapper(wrapperStyles);
const ScrollableTablePartStyles = scrollableTablePart(scrollableTablePartStyles);
const ScrollableTableContentStyles = scrollableTableContent(scrollableTableContentStyles);

if(header && header.length > 0){
return(
<div style={WrapperStyles}>
Expand All @@ -128,7 +158,7 @@ class ReactCohortGraph extends React.Component {
<div style={TableBodyStyles}>
<div style={TableRowStyles}>
<div style={FixedTablePartStyles}>
<div style={TableStyles}>
<div style={TableStyles} id="table1">
<div style={TableHeadingStyles}>
{
header.map((headerCell, i) =>
Expand Down Expand Up @@ -173,14 +203,15 @@ class ReactCohortGraph extends React.Component {
</div>
<div style={ScrollableTablePartStyles}>
<ScrollableContent scrollableTableContentStyles={scrollableTableContentStyles}>
<div style={TableStyles}>
<div style={TableStyles} id="table2">
<div style={TableHeadingStyles}>
{
header.map((headerCell, i) =>
!this.isFixed(i) &&
<HeaderCell
tableCellStyles={tableCellStyles}
style={headerCellStyles}
headerLabelStyles={headerLabelStyles}
key={"header" + i}
{...headerCell}
formatter={typeof headerFormatter === "function" ? headerFormatter : cellFormatter}
Expand Down