Comments (11)
FYI here's an idea I had that you might find interesting https://codesandbox.io/s/0mk3qwpl4l
from react-window.
I created a table component BaseTable with frozen rows and columns support, but based on react-virtualized
, I planed to migrate to use react-window
in the next version, I'm just waiting for #6 to be supported
from react-window.
I've created this project:
https://sticky-eurovision.netlify.com/with-react-window-and-sticky-shlif
To show how it's possible, in a very lightweight way (single instance of react-window + css sticky)
but that requires small patch to react-window.
You can read more about the project here:
https://github.com/Bnaya/sticky-eurovision.
I also have async effort to maybe bring this change in some way into react-window #98.
from react-window.
Ah it was overflow: hidden
. Is there a reason that is set on the inner wrapper here? When it is removed everything seems to be working as expected. Example: https://codesandbox.io/s/6wr8y429jn. Overriding it with CSS is fine, just want to make sure I'm not messing other things up by overriding it 😅.
from react-window.
I honestly don't know. I stepped back through the history of react-window and react-virtualized looking for a commit when I added this, to see if I could jog my memory and I couldn't find one. I think it has been around since the beginning.
At least for Chrome, Safari, and Firefox it does not look to be necessary.
Would you be willing to test this a bit on IE and mobile? If it seems okay, I would accept a PR to remove that style.
from react-window.
Yup! Definitely. It sounds safe to remove since the overflow: auto
above should hide everything. I'm in the middle of shipping it at work with the CSS fix so I'll get it tested properly and PR when I can confirm it's good. Thanks!
from react-window.
Thanks! I look forward to the PR 😄
from react-window.
Nice!! We ended up grouping our lists so we didn't run into any issues with sticky positioning, but this is a great little snippet to have on hand. Thanks for sharing! 🙏
from react-window.
@bvaughn This is awesome! Could you add this to recipes?
from react-window.
It does not solve sticky column problem though.
from react-window.
Not trying to solve every problem with this example. Just illustrating how the current API could be used to approach this. Should work the same for columns as rows.
from react-window.
Related Issues (20)
- Can I replace the blank spaces which is caused by scrolling fast with other components?
- Remove nodes in pairs to avoid zebra stripe flashing HOT 1
- Need access to current scroll offset to avoid two lists scrolling each other exceed maximum rerender depth. HOT 1
- Scroll synchronization of List and Grid lagging HOT 2
- Why is the onscroll method triggered when the page is first rendered HOT 1
- Styling are not added properly in Table body
- Add "behavior" option for scroll methods
- VariableSizeGrid has issue when row count over 1000
- Section Header
- Deteriorated performance on lists exceeding 1000 elements
- Can't use react-window in vite react-ts HOT 1
- innerElementType doesn't work
- Input is losing focus , when wrapped with VariableSizeList HOT 2
- when i use "WindowScroller", why the page is constantly refreshing?
- Shifting all items in a list
- Loading indicator while it loads all 1m rows HOT 1
- onClick inside <List /> element doesn't work HOT 1
- Blanks appear on fast scrolling in react 18 use createRoot HOT 2
- add new item error when use VariableSizeList
- Allow canceling scroll
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-window.