Drag row exception when row virtualization is true

[helt]

material-react-table version

2.12.1

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

This story reproduces the bug. Try to drag the Foobar row, and it will trigger.

Alternatively, remove the filter, and drag a row, then it will also trigger, IFF the row # is > 13. Maybe its 0.5* rows.length, but I really just guess.

Minimal, Reproducible Example - (Optional, but Recommended)

Story also pushed to https://github.com/helt/material-react-table/tree/bug/row-dragging-on-virtualized

import { faker } from '@faker-js/faker';
import { type Meta } from '@storybook/react';
import { useState } from 'react';
import { MaterialReactTable, useMaterialReactTable, type MRT_ColumnDef } from '../../src';

const meta: Meta = {
  title: 'Fixed Bugs/row dragging on paginated virtual table',
};

export default meta;

const initData = [...Array(25), ].map(() => ({
  age: faker.number.int(20) + 18,
  email: faker.internet.email(),
  firstName: faker.person.firstName(),
  id: faker.string.alphanumeric(6),
  lastName: faker.person.lastName(),
  state: faker.location.state(),
}));
initData.push({
  age: 18,
  email: "info@example.com",
  firstName: "Foobar",
  lastName: "Baz",
  id: "1",
  state: faker.location.state()
})

const columns: MRT_ColumnDef<(typeof initData)[0]>[] = [
  {
    accessorKey: 'id',
    header: 'ID',
  },
  {
    accessorKey: 'firstName',
    header: 'First Name',
  },
  {
    accessorKey: 'lastName',
    header: 'Last Name',
  },
  {
    accessorKey: 'email',
    header: 'Email Address',
  },
  {
    accessorKey: 'age',
    header: 'Age',
  },
  {
    accessorKey: 'state',
    header: 'State',
  },
];



export const RowDraggingEnabled = () => {
  const [data, _setData] = useState(() => initData);

  const t = useMaterialReactTable({
    enableRowVirtualization: true,
    enableRowNumbers: true,
    columns:columns,
    data:data,
    enableRowDragging: true,
    initialState: {
      density: 'compact',
      columnFilters: [{id: "firstName", value: "foo" }],
      showColumnFilters: true
    },
  })
  return (
    <MaterialReactTable table={t}
    />
  );
};

Screenshots or Videos (Optional)

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

Yes, if I knew the source of the bug.

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.

[helt]

It appears like the first argument rowOrVirtualRow is sometimes empty during drag.

If we look at virtualRows and rows, we can observe that in the moment when dragging starts, virtualRows grows by a single item, which is undefined. I suspect that packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts to be the origin of the bug, specifically the rangeExtractorCallback.

If i disable the custom rangeExtractor in packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts, then dragging works as I would expect. However, there must be a reason, why it is there in the first place.
I dont understand why there needs to be an additional index created, and why it should be different from the rowindex of the dragged row, I dont know how to fix.

@KevinVandy You know where to test, if my fix breaks the current implementation of the rangeExtractor? Then I can submit a PR.