Skip to content

allow override of inner scroll elements - #1377

Closed
priley86 wants to merge 1 commit into
bvaughn:masterfrom
priley86:inner-scroll-element
Closed

priley86 wants to merge 1 commit into
bvaughn:masterfrom
priley86:inner-scroll-element

Conversation

@priley86

@priley86 priley86 commented May 20, 2019 •

Copy link
Copy Markdown

Thanks for contributing to react-virtualized!

Before submitting a pull request, please complete the following checklist:

  • The existing test suites (npm test) all pass
  • For any new features or bug fixes, both positive and negative test cases have been added
  • For any new features, documentation has been added
  • For any documentation changes, the text has been proofread and is clear to both experienced users and beginners.
  • Format your code with prettier (npm run prettier).
  • Run the Flow typechecks (npm run typecheck).

Here is a short checklist of additional things to keep in mind before submitting:

  • Please make sure your pull request description makes it very clear what you're trying to accomplish. If it's a bug fix, please also provide a failing test case (if possible). In either case, please add additional unit test coverage for your changes. :)
  • Be sure you have notifications setup so that you'll see my code review responses. (I may ask you to make some adjustments before merging.)

Hi friends 👋

I'm attempting to add support for running react-virtualized alongside our pf4 tables and our Reacttabular based React tables implementation.

Doing this was somewhat tricky with our existing API, so I have opted to stick w/ Reacttabular for rendering Table Headers while using React-Virtualized to render the scrolling Table Body. This is not super common, but it simplifies a lot of common APIs for us. You can see this in motion here:
patternfly/patternfly-react#2011
openshift/console#1465

To make this work better w/ our existing CSS, I've opted to render the inner Grid elements as table and tbody respectively, using the ARIA Table Fix to re-construct the grid's aria. Rendering React Virtualized's existing Table for all elements will just not jive w/ Reacttabular, however rendering the Table Body separately seems to work fine. Demo:
http://virtualized-pf-tables.surge.sh/virtual%20scroll/virtualized/

To make this work w/ React Virtualized out-of-the-box, I'd need the changes in this PR which allow for a custom grid and grid inline scroll element. I've defaulted these to div as to not break existing functionality here. This actually still works quite well for a11y purposes if certain precautions are taken downstream (see #2011 PR notes).

@bvaughn

bvaughn commented Oct 18, 2026

Copy link
Copy Markdown
Owner

Sorry for the very long delay in getting back to you about this!

I've just finished a large update for version 10 of react-virtualized (#1900): the library has been rewritten in TypeScript, every component is now a function component (React 18+ is required), and the source moved from source/ to lib/. Because of that, this PR can't be merged as-is. Version 10's Grid still always renders div elements for its outer and inner containers.

If you're still interested in this change, I'd welcome a new PR with it rebased onto the version-10 branch (or onto master once version 10 has been merged).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants