-
Notifications
You must be signed in to change notification settings - Fork 289
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.
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
Removing FixedDataTableCell div #687
Open
Archit101967
wants to merge
33
commits into
column-virtualization
Choose a base branch
from
removing_cell_div
base: column-virtualization
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from 24 commits
Commits
Show all changes
33 commits
Select commit
Hold shift + click to select a range
f7b8628
Impl
c4e8c63
changes
fde920c
Remove cell group div checking of code for different examples is pending
Archit101967 f475a20
Final code after removing CellGroup div
Archit101967 b90f33a
Choice on user whether to use new or old version
Archit101967 4fe0bc9
added if conditions at some places
Archit101967 4ff2935
Made legacy components for each component
Archit101967 51696af
Converted the code to use HOC components
Archit101967 f4af336
Updated some part of the code
Archit101967 31fbf7e
after removing unnecessary changes
Archit101967 5aabef5
Rebuild the node modules
Archit101967 d10313a
react-fps added
Archit101967 a7f6949
added CSS
Archit101967 9006cbd
Resize and reorder cell not fixed
Archit101967 f46247d
some changes
Archit101967 02ec021
Fixed resize example
Archit101967 8c90fec
working on reorder cell
Archit101967 ec226ff
working on dragging feature of reorder still remaining
Archit101967 f6dc4a7
container coming to right position
Archit101967 77b730b
reorder cell resolved
Archit101967 1fe34ad
HOC components made
Archit101967 eeef456
updated the auto scroll example
Archit101967 2cfdf0d
removed extra spaces
Archit101967 44b9a96
Updated the auto scroll example
Archit101967 71203f3
removed package-lock.json and tools used for internal testing
Archit101967 505204a
removed internal testing from autoscrollexample_changed.js
Archit101967 329a443
changed variable names and will fix autoscroll example
Archit101967 479796e
fixed auto scroll example
Archit101967 31dc976
seperated the HOC components into different folder
Archit101967 c419014
Checking performance
Archit101967 1e5dfd8
correcting reorder cell
Archit101967 57cdf03
corrected reorder cell rendering issue
Archit101967 a813f30
corrected variable names and also fixed reorder cell example in other…
Archit101967 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,180 @@ | ||
/** | ||
* Copyright Schrodinger, LLC | ||
*/ | ||
|
||
'use strict'; | ||
|
||
import FakeObjectDataListStore from './helpers/FakeObjectDataListStore'; | ||
import { ImageCell, LinkCell, TextCell } from './helpers/cells'; | ||
import { Table, Column, DataCell, Plugins } from 'fixed-data-table-2'; | ||
import React from 'react'; | ||
import { FpsView } from 'react-fps'; | ||
|
||
class AutoScrollExample extends React.Component { | ||
constructor(props) { | ||
super(props); | ||
|
||
this.state = { | ||
dataList: new FakeObjectDataListStore(10000), | ||
scrollTop: 0, | ||
scrollLeft: 0, | ||
autoScrollEnabled: true, | ||
horizontalScrollDelta: 0, | ||
verticalScrollDelta: 0, | ||
columns: [], | ||
columnGroups: [], | ||
columnsCount: 10000, | ||
}; | ||
const cellRenderer = (props) => ( | ||
<DataCell {...props}> | ||
{props.columnKey},{props.rowIndex} | ||
</DataCell> | ||
); | ||
// const cellRenderer = (props) => `${props.columnKey},${props.rowIndex}`; | ||
const headerCellRenderer = (props) => ( | ||
<DataCell {...props}>{props.columnKey}</DataCell> | ||
); | ||
// props.columnKey; | ||
|
||
for (let i = 0; i < 10000; i++) { | ||
// console.log(props.columnKey) | ||
const columnGroupIndex = Math.floor(i / 2); | ||
this.state.columns[i] = { | ||
columnKey: 'Column ' + i, | ||
columnGroupIndex, | ||
header: headerCellRenderer, | ||
cell: cellRenderer, | ||
// cell:<TextCell data={`Column ${i},${props.rowIndex}`} />, | ||
|
||
width: 100, | ||
allowCellsRecycling: true, | ||
fixed: i < 2 ? true : false, | ||
fixedRight: i >= 10000 - 4 ? true : false, | ||
}; | ||
this.state.columnGroups[columnGroupIndex] = { | ||
columnKey: 'Column Group ' + columnGroupIndex, | ||
header: headerCellRenderer, | ||
}; | ||
} | ||
|
||
this.onVerticalScroll = this.onVerticalScroll.bind(this); | ||
this.onHorizontalScroll = this.onHorizontalScroll.bind(this); | ||
this.toggleAutoScroll = this.toggleAutoScroll.bind(this); | ||
this.setHorizontalScrollDelta = this.setHorizontalScrollDelta.bind(this); | ||
this.setVerticalScrollDelta = this.setVerticalScrollDelta.bind(this); | ||
} | ||
|
||
componentDidMount() { | ||
setInterval(() => { | ||
if (!this.state.autoScrollEnabled) { | ||
return; | ||
} | ||
this.setState((prevState) => ({ | ||
scrollTop: prevState.scrollTop + (prevState.verticalScrollDelta || 0), | ||
scrollLeft: | ||
prevState.scrollLeft + (prevState.horizontalScrollDelta || 0), | ||
})); | ||
}, 16); | ||
} | ||
|
||
render() { | ||
return ( | ||
<> | ||
<div className="autoScrollContainer"> | ||
{this.renderControls()} | ||
{this.renderTable()} | ||
</div> | ||
<FpsView /> | ||
</> | ||
); | ||
} | ||
|
||
renderControls() { | ||
return ( | ||
<div className="autoScrollControls"> | ||
<label> | ||
Auto Scroll Enabled | ||
<input | ||
type="checkbox" | ||
checked={this.state.autoScrollEnabled} | ||
onChange={this.toggleAutoScroll} | ||
/> | ||
</label> | ||
<label> | ||
Horizontal Scroll Delta | ||
<input | ||
type="number" | ||
value={this.state.horizontalScrollDelta} | ||
onChange={this.setHorizontalScrollDelta} | ||
/> | ||
</label> | ||
<label> | ||
Vertical Scroll Delta | ||
<input | ||
type="number" | ||
value={this.state.verticalScrollDelta} | ||
onChange={this.setVerticalScrollDelta} | ||
/> | ||
</label> | ||
</div> | ||
); | ||
} | ||
|
||
renderTable() { | ||
var { dataList, scrollLeft, scrollTop } = this.state; | ||
return ( | ||
<Table | ||
groupHeaderHeight={50} | ||
rowHeight={50} | ||
headerHeight={50} | ||
rowsCount={dataList.getSize()} | ||
width={1000} | ||
height={500} | ||
scrollLeft={scrollLeft} | ||
scrollTop={scrollTop} | ||
onVerticalScroll={this.onVerticalScroll} | ||
onHorizontalScroll={this.onHorizontalScroll} | ||
columnsCount={this.state.columnsCount} | ||
getColumn={(i) => this.state.columns[i]} | ||
getColumnGroup={(i) => this.state.columnGroups[i]} | ||
{...this.props} | ||
/> | ||
); | ||
} | ||
|
||
onVerticalScroll(scrollTop) { | ||
this.setState({ scrollTop }); | ||
} | ||
|
||
onHorizontalScroll(scrollLeft) { | ||
this.setState({ scrollLeft }); | ||
} | ||
|
||
toggleAutoScroll() { | ||
this.setState((prevState) => ({ | ||
autoScrollEnabled: !prevState.autoScrollEnabled, | ||
})); | ||
} | ||
|
||
setHorizontalScrollDelta(event) { | ||
const { value } = event.target; | ||
if (isNaN(value)) { | ||
return; | ||
} | ||
this.setState({ | ||
horizontalScrollDelta: parseInt(value), | ||
}); | ||
} | ||
|
||
setVerticalScrollDelta(event) { | ||
const { value } = event.target; | ||
if (isNaN(value)) { | ||
return; | ||
} | ||
this.setState({ | ||
verticalScrollDelta: parseInt(value), | ||
}); | ||
} | ||
} | ||
|
||
export default AutoScrollExample; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This example should also work without any change, even when not using legacy table.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes it will work
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Doesn't seems to be working correctly for me.
Note that cell-render could be anything i.e DataCell, TextCell, LinkCell, ImageCell or any customized cell or raw data, and this example should render same table as before for each case.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated the auto scroll example