Skip to content

Added virtualization to DxcSelect #2243

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

Draft
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

Mil4n0r
Copy link
Collaborator

@Mil4n0r Mil4n0r commented Jun 12, 2025

Checklist
(Check off all the items before submitting)

  • Build process is done without errors. All tests pass in the /lib directory.
  • Self-reviewed the code before submitting.
  • Meets accessibility standards.
  • Added/updated documentation to /website as needed.
  • Added/updated tests as needed.

Our select was not behaving properly with huge datasets due to performance issues (overloading the DOM and doing data processing).

In order to get around that problem, there is a common strategy, virtualization, which allows the component to load only a few items at once and update that list of items each time an user scrolls over it.

I have implemented it using virtuoso, one of the highest performance libraries out there that remains up to date and can achieve all the common use cases for these kind of strategies.

The work is still in progress, however, there are a few limitations that we have to take into account:

  • In order to achieve virtualization, we need a FIXED height for the component, I am currently using an arbitrary value but we should discuss the best approach.
  • The scroll works flawlessly for normal selects, even using the keyboard! However, for groups it's not the same and some refactor has yet to be done for it to work as expected when scrolling through keyboard. The critical methods that have to be reimplemented are marked as // TODO in the code.
  • This is an important update not only because of being able to use the Select with datasets with more than 10k items, but because also other of our components depend on it, such as the DxcPaginator menus, which don't allow switching pages smoothly when there is a big amount of them.
  • There is another PR which is ready to review which applies virtualization to the DxcResultsetTable component with a simpler logic which could be useful to understand how virtuoso works in an easier way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant