Skip to content
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

Row ordering with row virtualization #1217

Open
1 task done
RubiCom001 opened this issue Aug 18, 2024 · 2 comments
Open
1 task done

Row ordering with row virtualization #1217

RubiCom001 opened this issue Aug 18, 2024 · 2 comments

Comments

@RubiCom001
Copy link

material-react-table version

2.13.1

react & react-dom versions

your own example, so go figure :)

Describe the bug and the steps to reproduce it

I'm using row virtualization and drag and drop between two tables. I can also filter with global search(separate for each table).
Once the number of rows is low enough so it fits the height of a table(vertical scrollbar dissapears), when you try to drag a row, it gives an error "Cannot read properties of undefined (reading 'index')".
The easiest to reproduce is to use official storybook examples, namely the "Row Ordering With Row Virtualization":

  1. open this example:
    https://www.material-react-table.dev/?path=/story/features-row-ordering-examples--row-ordering-with-row-virtualization
  2. in the table from example, use global search and enter "delo" . It should filter rows enough so they all fit and vertical scrollbar dissapeares.
  3. try to drag any row
    image

I think it doesn't make any real life use for a single table to search/filter and order rows at the same time, but it makes sense when you want to filter and drag a row onto another table on the same "form".

I have found similar issue on tanstack table issues, if that helps, but I'm not sure how to try that fix on MRT table:
TanStack/table#5689

However, I think, the proper fix, would be if "the code" would check if virtualization is enabled AND actually working, same logic as vertical scrollbar hide/show. Maybe we could simply use vertical scroll somehow here, "if virtualization is enabled and vertical scrollabr is on....
image

Minimal, Reproducible Example - (Optional, but Recommended)

https://www.material-react-table.dev/?path=/story/features-row-ordering-examples--row-ordering-with-row-virtualization

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

Terms

  • I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
@9utty
Copy link

9utty commented Aug 21, 2024

I'm posting this because I'm experiencing something similar.

image

I think your code in #178 is referencing undefined in the absence of “row”.

I deleted the count code in rowVirtualizerOptions and it works fine.
image

I've done a lot of testing, and I think it's because there's a mismatch between the count in the virtual and the actual row count.

@KevinVandy
Copy link
Owner

Feel free to make a PR then

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

No branches or pull requests

3 participants